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

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

pnpm check

Build

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

3.0 KiB Raw Permalink Blame History