# AGENTS.md

## Project Overview

This is the **Bytemalte.de** website — a portfolio/landing page showcasing open source projects by Bytemalte. It's a SvelteKit 2 app with Svelte 5 (Runes), TypeScript, and a dark theme design system.

The site displays projects dynamically loaded from a static JSON file, with a hero section, project cards grid, navbar, and footer.

## Key Directories & Files

```
src/
├── app.css                          # Global styles + design system (colors, typography, spacing)
├── app.html                         # HTML shell (fonts, meta tags)
├── lib/
│   ├── assets/favicon.svg           # Favicon
│   ├── components/                  # All UI components
│   │   ├── Hero.svelte              # Landing hero with gradient text & CTA buttons
│   │   ├── Navbar.svelte            # Fixed navbar, transparent→solid on scroll
│   │   ├── ProjectCard.svelte       # Single project card (image, title, desc, actions)
│   │   ├── ProjectsSection.svelte   # Grid that fetches & renders ProjectCards
│   │   └── Footer.svelte            # Site footer with branding & links
│   └── index.ts                     # $lib barrel export (currently empty)
├── routes/
│   ├── +layout.svelte               # Root layout (imports app.css, sets favicon)
│   └── +page.svelte                 # Single page: Navbar → Hero → ProjectsSection → Footer
static/
├── projects.json                    # Project data array (id, title, description, urls)
└── robots.txt
BYTEMALTE.md                         # Design system spec (German) — colors, typography, component rules
```

## Tech Details

- **Svelte 5 Runes** — Components use `$state()`, `$props()`, `$effect()` (not legacy Svelte 4 reactivity)
- **Scoped CSS** — Each component has its own `<style>` block, global vars in `app.css`
- **Dynamic data** — Projects loaded client-side via `fetch("/projects.json")` in `ProjectsSection.svelte`
- **No adapter configured** — Uses `@sveltejs/adapter-auto` (works for Vercel, Netlify, etc.)

## How to Work on This

### Run dev server
```bash
pnpm dev
```

### Add/edit projects
Edit `static/projects.json`. Each entry needs: `id`, `title`, `description`, `image_url`, `download_url`, `code_url`. Use `"#"` for unused URLs.

### Add a new page
Create a new file under `src/routes/` (e.g., `about/+page.svelte`). SvelteKit file-based routing handles the rest.

### Modify styling
- Global design tokens → `src/app.css` (`:root` variables)
- Component styles → `<style>` block in the respective `.svelte` file
- Reference → `BYTEMALTE.md` (design spec, in German)

### Type checking
```bash
pnpm check
```

### Build
```bash
pnpm build
```

## Important Notes

- The site is a **single-page layout** — no nested routes besides the root
- All links to code/repos point to `gitea.malxte.de/Bytemalte/*`
- The navbar scroll effect uses `window.scrollY` — client-side only logic
- `ProjectCard.svelte` handles broken images gracefully with a placeholder fallback