docs: add project README and AGENTS.md for developer onboarding
This commit is contained in:
73
AGENTS.md
Normal file
73
AGENTS.md
Normal file
@@ -0,0 +1,73 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user