100 lines
2.2 KiB
Markdown
100 lines
2.2 KiB
Markdown
# Bytemalte.de
|
|
|
|
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.
|
|
|
|
## Tech Stack
|
|
|
|
- **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
|
|
|
|
## 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
|
|
```
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 18+
|
|
- pnpm
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
pnpm install
|
|
```
|
|
|
|
### Development
|
|
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
Open [http://localhost:5173](http://localhost:5173) in your browser.
|
|
|
|
### Production Build
|
|
|
|
```bash
|
|
pnpm build
|
|
```
|
|
|
|
Preview the production build:
|
|
|
|
```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)
|