docs: add project README and AGENTS.md for developer onboarding

This commit is contained in:
2026-03-15 14:13:25 +01:00
parent e74feec5ea
commit d3fd3bcbf3
2 changed files with 155 additions and 25 deletions

107
README.md
View File

@@ -1,42 +1,99 @@
# sv
# Bytemalte.de
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
A modern portfolio website for Bytemalte, showcasing open source projects built with Rust and modern web technologies. Powered by [SvelteKit](https://kit.svelte.dev/) with a clean dark theme design.
## Creating a project
## Tech Stack
If you're seeing this, you've probably already done this step. Congrats!
- **Framework:** [SvelteKit 2](https://kit.svelte.dev/) with Svelte 5 (Runes)
- **Language:** TypeScript
- **Build Tool:** Vite 7
- **Package Manager:** pnpm
- **Styling:** Scoped CSS with CSS custom properties
```sh
# create a new project
npx sv create my-app
## Features
- **Hero Section** — Gradient text, responsive layout, and call-to-action buttons
- **Project Showcase** — Dynamically loaded from `projects.json` with card-based grid
- **Responsive Navbar** — Transparent to solid transition on scroll
- **Dark Theme** — Custom design system with WCAG AA compliant colors
- **Mobile First** — Fully responsive across all screen sizes
## Project Structure
```
src/
├── lib/
│ ├── assets/
│ │ └── favicon.svg
│ ├── components/
│ │ ├── Footer.svelte
│ │ ├── Hero.svelte
│ │ ├── Navbar.svelte
│ │ ├── ProjectCard.svelte
│ │ └── ProjectsSection.svelte
│ └── index.ts
├── routes/
│ ├── +layout.svelte
│ └── +page.svelte
├── app.css
├── app.d.ts
└── app.html
static/
├── projects.json
└── robots.txt
```
To recreate this project with the same configuration:
## Getting Started
```sh
# recreate this project
pnpm dlx sv@0.12.7 create --template minimal --types ts --install pnpm bytemalte_de_svelte
### Prerequisites
- Node.js 18+
- pnpm
### Installation
```bash
pnpm install
```
## Developing
### Development
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```sh
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```bash
pnpm dev
```
## Building
Open [http://localhost:5173](http://localhost:5173) in your browser.
To create a production version of your app:
### Production Build
```sh
npm run build
```bash
pnpm build
```
You can preview the production build with `npm run preview`.
Preview the production build:
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
```bash
pnpm preview
```
### Type Checking
```bash
pnpm check
```
## Design System
The project uses a consistent design system defined in `app.css` and `BYTEMALTE.md`:
| Token | Value | Usage |
|-------|-------|-------|
| Primary | `#8888FF` | Buttons, links, branding |
| Secondary | `#3DDC84` | Accents, gradients |
| Background | `#0F172A` | Page background |
| Surface | `#1E293B` | Cards, sections |
| Font | Inter, system-ui, sans-serif | All typography |
## Links
- **Code Repository:** [gitea.malxte.de/Bytemalte](https://gitea.malxte.de/Bytemalte)