— Colophon

Wie diese Seite gebaut ist.

Wenn du wissen willst, was unter der Oberfläche passiert: hier ist die Liste. Zehn Entscheidungen, sechs Zahlen, ein paar Worte zum Warum.

— In Zahlen

  1. 4 KB

    JS auf der Homepage vor WebGL

  2. –79 %

    Font-Weight nach Subsetting

  3. –76 %

    Image-Weight nach WebP

  4. 98 /100

    Lighthouse Performance

  5. 100 /100

    Lighthouse Accessibility

  6. 0 KB

    Tailwind in der Bundle

— Entscheidungen

  1. 01

    Framework

    Astro · weil Static-First.

    Static-First mit Islands für die wenigen interaktiven Stellen. Keine SPA. Kein Hydration-Boilerplate für jede Page. Im Build: 4 KB JS auf der Homepage vor WebGL.

  2. 02

    Styling

    Plain CSS · Cascade Layers · keine Tailwind.

    Tailwind ist eine Lösung für Teams, die CSS umgehen wollen. Hier wollte ich CSS verstehen, nicht abschirmen. @layer reset, tokens, fonts, base, layout, components, utilities — die Cascade ist ein Werkzeug, kein Schmerz.

  3. 03

    Typography

    Fraunces · Onest · JetBrains Mono.

    Fraunces als Display für die editorial-modernism-Tonalität. Onest als Body — eine moderne Variable-Sans, die für den deutschen Raum gut funktioniert. JetBrains Mono für Captions und Codeblöcke. Alle WOFF2-subgesetzt: 668 KB → 142 KB Schriftgewicht (–79%).

  4. 04

    Animation

    GSAP + ScrollTrigger + SplitText · Lenis.

    GSAP für choreographierte Sequenzen, Lenis als Smooth-Scroll-Layer mit GSAP-Ticker-Sync (single RAF). prefers-reduced-motion respektiert: Animationen werden zu Crossfades, nicht abgeschaltet — das Layout bleibt erhalten, nur die Bewegung verschwindet.

  5. 05

    WebGL

    Three.js · selektiv eingesetzt.

    Vier Szenen insgesamt: Hero T-Skulptur, Image-Distortion-Shader (custom GLSL), Ambient-Particles, Statement-Backdrop. Quality-Tier-Detection (mobile/desktop/save-data) reduziert Pixel-Ratio und Particle-Count automatisch. IntersectionObserver pausiert WebGL off-screen — kein wasted Render.

  6. 06

    View Transitions

    Astro ClientRouter · custom CSS.

    Subtle blur+scale Transition zwischen Pages. Cursor und WebGL-Hero persistieren mit transition:persist. Theme-State wird via astro:after-swap aus localStorage rehydriert — kein FOUC, kein Reset.

  7. 07

    Performance

    Lighthouse 95+ · Service Worker · Manual Chunks.

    Service Worker mit drei Cache-Strategien (cache-first für Fonts/Assets, stale-while-revalidate für HTML). Vite manualChunks: three / gsap / lenis als getrennte Chunks. cssCodeSplit. Images via PIL zu WebP konvertiert: –76% Image-Weight. Lighthouse final: 98 / 100 / 100 / 100.

  8. 08

    Accessibility

    WCAG 2.2 AA · Screen-Reader getestet.

    Skip-Link, fokus-trap auf Modals, color-blind Cues (immer Underline, solid Focus-Outline), Reduced-Motion-Alternativen statt Skip, Print-Stylesheet mit Footnote-URLs. Manuell durchgetestet mit VoiceOver und NVDA.

  9. 09

    Sound

    Web Audio API · keine externen Files.

    Hover-Tick (2400 Hz Sine), Click-Tick (800→400 Hz Triangle), Transition-Whoosh (Filtered Noise Sweep) — alles prozedural. Default muted, persistiert in localStorage. Keine MP3-Downloads, kein License-Risk.

  10. 10

    Easter-Eggs

    Konami · Console-Stamp · Print-Layout.

    Konami-Code triggert data-secret-Toggle mit Banner-Toast. Console-Message als ASCII-Brand-Stamp mit CSS-in-Console (once per session). Print-Stylesheet rendert die Site als Buchseite mit Footnote-URLs nach Links.

— Footnote

Die Seite ist Open in dem Sinne, dass sie nichts versteckt. Wenn du eine Entscheidung interessant findest und sie für dein eigenes Projekt nachbauen willst — schreib mir, ich erkläre wie es geht.

— ts Tim Schneider · Stuttgart · 2026