Complete new Design and Structure
This commit is contained in:
160
ARCHITECTURE.md
Normal file
160
ARCHITECTURE.md
Normal file
@@ -0,0 +1,160 @@
|
||||
# Architecture
|
||||
|
||||
This document describes the technical architecture of **malxte.de**.
|
||||
|
||||
## Overview
|
||||
|
||||
malxte.de is a static single-page personal website built as a **SvelteKit** application. It uses server-side rendering (SSR) with SvelteKit's adapter system for deployment flexibility. There is no backend, database, or API — all content is hardcoded in Svelte components.
|
||||
|
||||
## Directory Layout
|
||||
|
||||
```
|
||||
.
|
||||
├── src/ # Application source
|
||||
│ ├── app.d.ts # Global TypeScript type declarations
|
||||
│ ├── app.html # HTML shell template
|
||||
│ ├── lib/ # Shared library code
|
||||
│ │ ├── index.ts # Library barrel export (currently empty)
|
||||
│ │ └── assets/
|
||||
│ │ └── favicon.svg # Favicon (Svelte logo placeholder)
|
||||
│ └── routes/ # SvelteKit file-based routing
|
||||
│ ├── +layout.svelte # Root layout (wraps all pages)
|
||||
│ └── +page.svelte # Home page (index route /)
|
||||
├── static/ # Static assets (served as-is)
|
||||
│ └── robots.txt # Search engine crawl rules
|
||||
├── BYTEMALTE.md # Design system specification
|
||||
├── ARCHITECTURE.md # This file
|
||||
├── AGENTS.md # AI agent handoff documentation
|
||||
├── package.json # Project manifest and scripts
|
||||
├── pnpm-lock.yaml # Lockfile
|
||||
├── pnpm-workspace.yaml # pnpm workspace config
|
||||
├── svelte.config.js # SvelteKit configuration
|
||||
├── tsconfig.json # TypeScript configuration
|
||||
├── vite.config.ts # Vite configuration
|
||||
└── .npmrc # pnpm settings (engine-strict)
|
||||
```
|
||||
|
||||
## Routing
|
||||
|
||||
SvelteKit uses file-based routing. This project has a single route:
|
||||
|
||||
| File | Route | Purpose |
|
||||
|------|-------|---------|
|
||||
| `src/routes/+layout.svelte` | All pages | Global shell: header, nav, footer |
|
||||
| `src/routes/+page.svelte` | `/` | Home page content |
|
||||
|
||||
The `+layout.svelte` file wraps `+page.svelte` using Svelte 5's `{@render children()}` pattern.
|
||||
|
||||
## Component Architecture
|
||||
|
||||
### `+layout.svelte` — Root Layout
|
||||
|
||||
Responsibilities:
|
||||
- **Global CSS reset** — `box-sizing: border-box`, margin/padding zero
|
||||
- **Global styles** — Body background (`#0F172A`), font family (Inter), link colors
|
||||
- **Sticky header** — Glassmorphism effect (`backdrop-filter: blur(12px)`)
|
||||
- **Navigation** — Smooth scroll anchors (`#about`, `#connect`, `#projects`)
|
||||
- **Footer** — Social links + copyright
|
||||
|
||||
Key patterns:
|
||||
- Uses `:global()` selectors for body-level styles
|
||||
- Children rendered via Svelte 5 `{@render children()}` slot syntax
|
||||
- Responsive breakpoint at `640px`
|
||||
|
||||
### `+page.svelte` — Home Page
|
||||
|
||||
Responsibilities:
|
||||
- All page content in a single component
|
||||
- Data-driven rendering via `connectLinks` and `projects` arrays
|
||||
- Interactive copy-to-clipboard for Nostr credentials
|
||||
|
||||
Structure (top to bottom):
|
||||
1. **Script block** — State (`$state`), functions, data arrays
|
||||
2. **Hero section** — Badge, heading, subtitle, CTA buttons, Nostr identity card
|
||||
3. **About section** — Three icon cards in CSS Grid
|
||||
4. **Connect section** — Social link cards with SVG icons
|
||||
5. **Projects section** — Project cards with tags
|
||||
6. **Style block** — All scoped CSS
|
||||
|
||||
## State Management
|
||||
|
||||
The application uses minimal client-side state:
|
||||
|
||||
```typescript
|
||||
let copiedField = $state('');
|
||||
```
|
||||
|
||||
This single reactive variable tracks which Nostr credential was recently copied (for showing the checkmark feedback). There is no global state management — no stores, context, or external state libraries.
|
||||
|
||||
## Data Model
|
||||
|
||||
All content is defined as static arrays in `+page.svelte`:
|
||||
|
||||
```typescript
|
||||
connectLinks: Array<{
|
||||
title: string;
|
||||
description: string;
|
||||
icon: string; // Inline SVG markup
|
||||
href: string; // External URL
|
||||
cta: string; // Call-to-action label (unused in UI currently)
|
||||
}>
|
||||
|
||||
projects: Array<{
|
||||
title: string;
|
||||
description: string;
|
||||
tags: string[]; // Displayed as green badges
|
||||
link: string | null; // Optional external link
|
||||
}>
|
||||
```
|
||||
|
||||
To add or remove social links or projects, edit these arrays directly.
|
||||
|
||||
## Styling Strategy
|
||||
|
||||
- **Scoped CSS** — Each `.svelte` file has a `<style>` block with component-scoped rules
|
||||
- **No CSS framework** — All styles are hand-written vanilla CSS
|
||||
- **No CSS variables** — Colors are hardcoded hex values (per BYTEMALTE.md spec)
|
||||
- **Responsive design** — `@media (max-width: 768px)` breakpoints in `+page.svelte`, `640px` in `+layout.svelte`
|
||||
- **CSS Grid** — Used for all card layouts (`auto-fit`, `minmax`)
|
||||
- **Transitions** — CSS `transition` for hover effects on cards, buttons, links
|
||||
|
||||
## Build Pipeline
|
||||
|
||||
```
|
||||
pnpm dev → Vite dev server (HMR)
|
||||
pnpm check → svelte-kit sync → svelte-check (TypeScript)
|
||||
pnpm build → Vite build → SvelteKit SSR + client → adapter-auto
|
||||
pnpm preview → Preview production build locally
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
|
||||
All dependencies are devDependencies (no runtime deps):
|
||||
|
||||
| Package | Purpose |
|
||||
|---------|---------|
|
||||
| `@sveltejs/adapter-auto` | Deployment adapter |
|
||||
| `@sveltejs/kit` | SvelteKit framework |
|
||||
| `@sveltejs/vite-plugin-svelte` | Vite-Svelte integration |
|
||||
| `svelte` | Svelte 5 compiler |
|
||||
| `svelte-check` | TypeScript checking for Svelte |
|
||||
| `typescript` | TypeScript compiler |
|
||||
| `vite` | Build tool and dev server |
|
||||
|
||||
## External Services
|
||||
|
||||
None. The site is fully static with no API calls, no analytics, no third-party scripts.
|
||||
|
||||
## SEO & Meta
|
||||
|
||||
- `<title>` set in `+layout.svelte` via `<svelte:head>`
|
||||
- `<meta name="description">` set in `+layout.svelte`
|
||||
- `robots.txt` allows all crawlers
|
||||
- No sitemap (single page, not needed)
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Semantic HTML (`<header>`, `<main>`, `<footer>`, `<section>`, `<nav>`)
|
||||
- `aria-label` on icon-only buttons and links
|
||||
- All colors meet WCAG AA contrast ratios (see BYTEMALTE.md)
|
||||
- `rel="noopener noreferrer"` on all external links with `target="_blank"`
|
||||
Reference in New Issue
Block a user