148 lines
4.8 KiB
Markdown
148 lines
4.8 KiB
Markdown
# 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
|