malxte_de_svelte/ARCHITECTURE.md

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:

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:

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"