docs: add project README and AGENTS.md for developer onboarding
This commit is contained in:
107
README.md
107
README.md
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user