// ARCHITECTURE

Architecture

How voegele.dev is structured — Next.js App Router, routes, and stack.

voegele.dev is a single Next.js 16 application (App Router, Turbopack) on React 19 and TypeScript, styled with Tailwind plus a layer of hand-written CSS variables. It deploys statically to Vercel from main.

Routes

/ — the home page: hero, then the content sections, the playground, and contact
/lab — Signal Pit, the physics sandbox (Experiment 01)
/blog and /blog/[post] — writing, one static route per post
/work/[project] — project case studies
/docs — this documentation, also served at docs.voegele.dev

Rendering

Almost everything is statically prerendered — the home page, blog, case studies and lab are all static HTML. The docs are the one exception: they read the request host to serve clean URLs on the subdomain and set per-host canonicals, which makes them dynamic. That is a deliberate, contained trade-off; see SEO & Metadata.

Layout of the code

components/
├── sections/     # Home page sections: Hero, About, Skills,
│                 # CloudDevOps, Homelab, Projects, LabSection,
│                 # Hobbies, Contact, Nav, Footer
├── effects/      # SignalGrid, Aurora, MountainBackdrop, ScrollProgress
├── primitives/   # GlareField, LiveTerminal, Magnetic, FadeIn…
├── lab/          # SignalPit (three + rapier, fully self-contained)
├── blog/ work/   # PostLayout, CaseStudy shells
├── docs/         # this section's shell + content
└── providers/    # PerfProvider (tiering), SmoothScroll (Lenis)

lib/              # gsap registration, posts + docs registries

The two providers wrap the whole app in app/layout.tsx: PerfProvider decides how much the machine can handle, and SmoothScroll wires up Lenis. Both are covered in their own pages.