— 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. Static first

    Astro · keine SPA, keine Hydration-Steuer

  2. 7 Layer

    @layer-Architektur in CSS

  3. 3 Schriften

    Fraunces · Onest · JetBrains Mono, alle WOFF2-subgesetzt

  4. 2 Shader

    Custom-GLSL — Statement-Backdrop, Image-Hover

  5. 95 +

    Lighthouse-Anspruch über alle Routes

  6. AA · WCAG 2.2

    getestet mit VoiceOver und NVDA

— 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. Was ausgeliefert wird, ist HTML — alles andere kommt nur dort, wo es etwas verdient.

  2. 02

    Styling

    Plain CSS · Cascade Layers.

    Kein Tailwind, kein CSS-in-JS, kein Pre-Processor. @layer reset, tokens, fonts, base, layout, components, utilities — die Cascade ist ein Werkzeug, wenn man sie aufräumt. Tokens für Spacing, Typografie und Farbe stehen in einer einzigen Datei.

  3. 03

    Typography

    Fraunces · Onest · JetBrains Mono.

    Fraunces als Display für die editorial-modernism-Tonalität, Variable-Axes (Soft, Wonk) für typografische Tiefe. Onest als Body — eine moderne Variable-Sans, die im deutschen Raum sauber liest. JetBrains Mono für Captions und Codeblöcke. Alle WOFF2-subgesetzt auf den verwendeten Glyph-Bestand.

  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, atmosphärisch.

    Zwei Stellen, an denen WebGL etwas trägt: ein Sand-Shimmer-Backdrop hinter der Studio-These (Custom GLSL, scroll-getrieben) und ein Image-Distortion-Shader auf den Case-Cards beim Hover. Beides Custom-GLSL, kein Library-Effekt von der Stange. IntersectionObserver pausiert WebGL off-screen.

  6. 06

    View Transitions

    Astro ClientRouter · custom CSS.

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

  7. 07

    Performance

    Anspruch: Lighthouse 95+ über alle Routes.

    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 über die Pipeline zu AVIF/WebP konvertiert. Performance ist ein Pfad, kein Trophäen-Screenshot — finale Live-Werte werden nach Launch dokumentiert.

  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. 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.

  11. 11

    Booking

    Custom Booking-System statt Cal.com.

    Cloudflare D1 als Slot-DB (partial UNIQUE-Index gegen Race-Conditions), Resend.com EU für Mails, mailbox.org CalDAV für Tim-Side-Kalender-Sync, Cloudflare Turnstile gegen Bots, separater Cron-Worker für 24h+60min-Reminder. Komplett selbst gebaut, Editorial-Mail-Templates, signierte Cancel/Reschedule-Tokens mit 30-Tage-Expiry. Ein Cal.com-Klon hätte 99€/Monat gekostet und nie zur Brand gepasst.

— 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 · Korb, Region Stuttgart · 2026