# Architecture

This document describes the technical architecture of **malxte.de**.

## Overview

malxte.de is a static single-page personal website built as a **SvelteKit** application. It uses server-side rendering (SSR) with SvelteKit's adapter system for deployment flexibility. There is no backend, database, or API — all content is hardcoded in Svelte components.

## Directory Layout

```
.
├── src/                        # Application source
│   ├── app.d.ts                # Global TypeScript type declarations
│   ├── app.html                # HTML shell template
│   ├── lib/                    # Shared library code
│   │   ├── index.ts            # Library barrel export (currently empty)
│   │   └── assets/
│   │       └── favicon.svg     # Favicon (Svelte logo placeholder)
│   └── routes/                 # SvelteKit file-based routing
│       ├── +layout.svelte      # Root layout (wraps all pages)
│       └── +page.svelte        # Home page (index route /)
├── static/                     # Static assets (served as-is)
│   └── robots.txt              # Search engine crawl rules
├── BYTEMALTE.md                # Design system specification
├── ARCHITECTURE.md             # This file
├── AGENTS.md                   # AI agent handoff documentation
├── package.json                # Project manifest and scripts
├── pnpm-lock.yaml              # Lockfile
├── pnpm-workspace.yaml         # pnpm workspace config
├── svelte.config.js            # SvelteKit configuration
├── tsconfig.json               # TypeScript configuration
├── vite.config.ts              # Vite configuration
└── .npmrc                      # pnpm settings (engine-strict)
```

## Routing

SvelteKit uses file-based routing. This project has a single route:

| File | Route | Purpose |
|------|-------|---------|
| `src/routes/+layout.svelte` | All pages | Global shell: header, nav, footer |
| `src/routes/+page.svelte` | `/` | Home page content |

The `+layout.svelte` file wraps `+page.svelte` using Svelte 5's `{@render children()}` pattern.

## Component Architecture

### `+layout.svelte` — Root Layout

Responsibilities:
- **Global CSS reset** — `box-sizing: border-box`, margin/padding zero
- **Global styles** — Body background (`#0F172A`), font family (Inter), link colors
- **Sticky header** — Glassmorphism effect (`backdrop-filter: blur(12px)`)
- **Navigation** — Smooth scroll anchors (`#about`, `#connect`, `#projects`)
- **Footer** — Social links + copyright

Key patterns:
- Uses `:global()` selectors for body-level styles
- Children rendered via Svelte 5 `{@render children()}` slot syntax
- Responsive breakpoint at `640px`

### `+page.svelte` — Home Page

Responsibilities:
- All page content in a single component
- Data-driven rendering via `connectLinks` and `projects` arrays
- Interactive copy-to-clipboard for Nostr credentials

Structure (top to bottom):
1. **Script block** — State (`$state`), functions, data arrays
2. **Hero section** — Badge, heading, subtitle, CTA buttons, Nostr identity card
3. **About section** — Three icon cards in CSS Grid
4. **Connect section** — Social link cards with SVG icons
5. **Projects section** — Project cards with tags
6. **Style block** — All scoped CSS

## State Management

The application uses minimal client-side state:

```typescript
let copiedField = $state('');
```

This single reactive variable tracks which Nostr credential was recently copied (for showing the checkmark feedback). There is no global state management — no stores, context, or external state libraries.

## Data Model

All content is defined as static arrays in `+page.svelte`:

```typescript
connectLinks: Array<{
  title: string;
  description: string;
  icon: string;        // Inline SVG markup
  href: string;        // External URL
  cta: string;         // Call-to-action label (unused in UI currently)
}>

projects: Array<{
  title: string;
  description: string;
  tags: string[];      // Displayed as green badges
  link: string | null; // Optional external link
}>
```

To add or remove social links or projects, edit these arrays directly.

## Styling Strategy

- **Scoped CSS** — Each `.svelte` file has a `<style>` block with component-scoped rules
- **No CSS framework** — All styles are hand-written vanilla CSS
- **No CSS variables** — Colors are hardcoded hex values (per BYTEMALTE.md spec)
- **Responsive design** — `@media (max-width: 768px)` breakpoints in `+page.svelte`, `640px` in `+layout.svelte`
- **CSS Grid** — Used for all card layouts (`auto-fit`, `minmax`)
- **Transitions** — CSS `transition` for hover effects on cards, buttons, links

## Build Pipeline

```
pnpm dev          → Vite dev server (HMR)
pnpm check        → svelte-kit sync → svelte-check (TypeScript)
pnpm build        → Vite build → SvelteKit SSR + client → adapter-auto
pnpm preview      → Preview production build locally
```

## Dependencies

All dependencies are devDependencies (no runtime deps):

| Package | Purpose |
|---------|---------|
| `@sveltejs/adapter-auto` | Deployment adapter |
| `@sveltejs/kit` | SvelteKit framework |
| `@sveltejs/vite-plugin-svelte` | Vite-Svelte integration |
| `svelte` | Svelte 5 compiler |
| `svelte-check` | TypeScript checking for Svelte |
| `typescript` | TypeScript compiler |
| `vite` | Build tool and dev server |

## External Services

None. The site is fully static with no API calls, no analytics, no third-party scripts.

## SEO & Meta

- `<title>` set in `+layout.svelte` via `<svelte:head>`
- `<meta name="description">` set in `+layout.svelte`
- `robots.txt` allows all crawlers
- No sitemap (single page, not needed)

## Accessibility

- Semantic HTML (`<header>`, `<main>`, `<footer>`, `<section>`, `<nav>`)
- `aria-label` on icon-only buttons and links
- All colors meet WCAG AA contrast ratios (see BYTEMALTE.md)
- `rel="noopener noreferrer"` on all external links with `target="_blank"`