Bytemalte.de

A modern portfolio website for Bytemalte, showcasing open source projects built with Rust and modern web technologies. Powered by SvelteKit with a clean dark theme design.

Tech Stack

Framework: SvelteKit 2 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

pnpm install

Development

pnpm dev

Open http://localhost:5173 in your browser.

Production Build

pnpm build

Preview the production build:

pnpm preview

Type Checking

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

2.2 KiB Raw Permalink Blame History