# AGENTS.md — AI Agent Handoff Guide

This file is for the **next AI agent** working on this project. Read this before making any changes.

## What Is This Project?

**malxte.de** is a single-page personal website for **Malxte** (aka ByteMalte) — a Rust programmer, Nostr enthusiast, and content creator. The site introduces who he is, links to his social profiles, and showcases his projects.

- **Live at**: [malxte.de](https://malxte.de)
- **Stack**: SvelteKit 2 + Svelte 5 + TypeScript + Vite + pnpm
- **Type**: Static personal about page (no backend, no database, no API)

## Critical Files

| File | What It Does | Edit When |
|------|-------------|-----------|
| `src/routes/+page.svelte` | ALL page content — hero, about, connect, projects | Adding/changing content, links, styling |
| `src/routes/+layout.svelte` | Global shell — header, nav, footer, global CSS | Changing navigation, layout structure, global styles |
| `src/app.html` | HTML shell — font loading | Adding fonts, meta tags, scripts |
| `BYTEMALTE.md` | Design system spec (colors, typography, components) | Updating design tokens |
| `package.json` | Dependencies and scripts | Adding/removing packages |

## Design System

**Always follow the BYTEMALTE Design System** (see `BYTEMALTE.md`).

### Current Color Tokens (v1.1)

| Token | Hex | Used For |
|-------|-----|----------|
| Primary | `#8888FF` | Buttons, links, brand accents, hover states |
| Secondary | `#3DDC84` | Tags, success indicators |
| Background | `#0F172A` | Page background |
| Surface | `#1E293B` | Cards, sections, modals |
| Text High | `#F8FAFC` | Headings, primary text |
| Text Muted | `#B0BDD0` | Descriptions, footer, secondary text |
| Error | `#EF4444` | Destructive actions |

### When using these colors in CSS:

- **Primary**: `#8888ff` (hex) or `rgba(136, 136, 255, X)` (for transparency)
- **Primary hover**: `#9a9aff`
- **Secondary**: `#3ddc84` or `rgba(61, 220, 132, X)`
- **Muted text**: `#b0bdd0`

### Border Radii

- Buttons: `8px`
- Cards/Containers: `16px`
- Profile images: `50%` (circle)

### Typography

- Font: `Inter, system-ui, sans-serif`
- h1: `2.5rem`, weight 700
- h2: `1.8rem`, weight 600
- h3: `1.2rem`, weight 500
- Body: `1rem`, weight 400, line-height 1.6

## How Content Is Organized

All page content lives in `src/routes/+page.svelte`. Data is defined as static arrays:

```typescript
// Social links — add/remove/edit entries here
const connectLinks = [
  { title: '...', description: '...', icon: '<svg>...</svg>', href: '...', cta: '...' },
];

// Projects — add/remove/edit entries here
const projects = [
  { title: '...', description: '...', tags: ['...'], link: '...' | null },
];
```

SVG icons are inline strings (not components). Copy from [Lucide](https://lucide.dev/) or similar.

## Nostr Identity

The site displays Malxte's Nostr credentials in the hero section:

- **NIP-05**: `_@bytemalte.de`
- **npub**: `npub1guff8dkdz7k47zh0mx26y0mmx5l6np57jjkvmhnyrak0n50r5hxqjdnsra`

Both have copy-to-clipboard buttons. State is managed via:

```typescript
let copiedField = $state('');
function copyToClipboard(text: string, field: string) { ... }
```

## Common Tasks

### Adding a new social link

1. Open `src/routes/+page.svelte`
2. Add an entry to the `connectLinks` array
3. For the icon, use an inline SVG string (24x24 viewBox, stroke-based)

### Adding a new project

1. Open `src/routes/+page.svelte`
2. Add an entry to the `projects` array
3. Use `link: null` if there's no external URL

### Changing colors

1. Update `BYTEMALTE.md` with the new values
2. Find-and-replace in `src/routes/+layout.svelte` and `src/routes/+page.svelte`
3. Don't forget `rgba()` variants (e.g., `rgba(136, 136, 255, 0.1)`)

### Adding a new page

1. Create `src/routes/new-page/+page.svelte`
2. It will automatically be available at `/new-page`
3. Add a nav link in `src/routes/+layout.svelte`

### Updating the footer links

Edit the footer section in `src/routes/+layout.svelte` (around line 189-196).

## Verification Checklist

After making changes, always run:

```bash
pnpm check    # 0 errors, 0 warnings expected
pnpm build    # Must succeed
```

## Svelte 5 Patterns Used

- **`$state()`** — Reactive state declaration
- **`$props()`** — Component props (layout uses `let { children } = $props()`)
- **`{@render children()}`** — Slot rendering (replaces `<slot />`)
- **`{#each}` / `{#if}`** — Control flow blocks
- **Scoped `<style>`** — Component CSS

## Things to NOT Do

- Don't use Svelte 4 patterns (`$:`, `<slot>`, `export let`)
- Don't add CSS frameworks (Tailwind, Bootstrap, etc.)
- Don't add runtime dependencies (everything should stay devDependencies)
- Don't break WCAG AA contrast ratios
- Don't remove `rel="noopener noreferrer"` from `target="_blank"` links
- Don't hardcode the year in the footer (it uses `new Date().getFullYear()`)
- Don't commit `.env` files or secrets