Colophon / How this site is built
Colophon
The portfolio is itself a work sample. Everything below is inspectable in your devtools right now.
01 / Stack
- Framework
- Next.js 16, App Router, React 19, TypeScript strict
- Styling
- Tailwind CSS 4, design tokens in CSS, no config file
- Motion
- GSAP 3 with ScrollTrigger and SplitText, Lenis smooth scroll
- WebGL
- Three.js with React Three Fiber 9, one custom shader, one draw call
- State
- Zustand, one store, five fields
- Hosting
- Vercel, static where possible
02 / The hero
- Particles
- Up to 70,000 points sampled from a rasterized FRQN glyph
- Animation
- All movement is vertex shader math, zero per-frame JS loops
- Interaction
- Pointer repulsion and scroll dissolve via uniforms
- Fallback
- Static dot-matrix SVG when WebGL is missing or motion is reduced
- Budget
- The 3D chunk loads after idle and never blocks first paint
03 / Security
- CSP
- Nonce-based Content-Security-Policy, no third-party scripts
- Headers
- HSTS, X-Content-Type-Options, Referrer-Policy, Permissions-Policy
- Surface
- No forms, no cookies, no tracking, contact is a mailto
- Dependencies
- Pinned versions, no UI kit, no analytics by default
04 / Accessibility
- Motion
- Everything respects prefers-reduced-motion, including the shader
- Keyboard
- Full keyboard path, visible focus, skip link, focus-trapped menu
- Text
- Split-text animations keep the original string for screen readers
- Scroll
- Lenis wraps native scroll, the document keeps its real height
05 / Type
- Display
- Anton, one weight, served from this origin
- Text
- Archivo variable, width axis 62 to 125 percent
- Mono
- JetBrains Mono for labels, clocks and figures