malxte_de_svelte/AGENTS.md

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
• 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:

// 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 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:

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:

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