Structa Pro
TRT Foundry · 900
Becoming, particle by particle.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ! ? @ &
ColophonHow this site is made
Receipts.
Every design decision can be traced back to a choice. These are mine — the palette, the typography, the architecture, the credits.
LUMEN — light mode (editorial paper)
BG
#F2EEE3
page
BG-2
#E9E3D2
section
Surface
#FBF8F0
card
Ink
#0F0F0E
heading
Muted
#3D3A33
secondary
Accent
#1F4D2C
brand
Info
#1E4F7A
info
Warn
#8C2A1F
warn
NOX — dark mode (cyber-noir)
BG
#070708
page
BG-2
#0C0C0F
section
Surface
#111114
card
Ink
#F4F1EA
heading
Muted
#A8A39C
secondary
Accent
#C7FF41
brand
Info
#5DB2FF
info
Warn
#FF2E63
warn
display
Groza
TRT Foundry · 400
Becoming, particle by particle.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ! ? @ &
Terminal Mono
TRT Foundry · 400
A career, particle by particle.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ! ? @ &
Fraunces
Undercase Type · 400 · italic
Becoming, particle by particle.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ! ? @ &
- Framework
- Next.js 16 · App Router · Turbopack
- Language
- TypeScript 5
- Styling
- Tailwind CSS 4 with CSS variables
- Theming
- next-themes · two-mode tokens (Lumen / Nox)
- WebGL
- react-three-fiber · ambient starfield only (Nox)
- Motion
- Lenis (idle-mounted) · framer-motion · CSS keyframes
- Hero
- Scroll-scrubbed H.264 video (encoded with ffmpeg-static)
- Content
- MDX · TypeScript data modules
- Hosting
- Vercel · edge runtime for OG with daily revalidation
2026 · v3.0
Scroll-scrubbed video pivot
Retired the particle-era home hero in favour of a scroll-scrubbed H.264 portrait reel. Cleaned the dependency graph, centralised constants, hardened a11y, and reconciled drift across the design system. LUMEN (editorial paper) and NOX (cyber-noir) palettes formalised.
2026 · v2.7
Particle restore + Awwwards polish
Brought back the 800-particle BECOMING character. Photo-derived silhouette sampling, custom GLSL with chromatic aberration, mask-reveal page transitions, refraction lens, scroll-velocity audio. Replaced by v3.0's video direction.
2026 · v2.5
Hybrid character experiment retired
Tried a rigged SVG walking character + procedural 3D environment. It read as unpolished. Deleted, returned to the particle direction.
2026 · v2.0
Awwwards-grade rebuild
IA restructure: split work into /projects (personal) and /experience (employer). Added /uses, /colophon, /terminal. Cyberpunk DECK as the easter-egg deep-end.
2025 · v1.0
First public version
Static portfolio with a single hero + work timeline. The seed of everything that came after.
- Editorial
- Fenwick & West · The New Yorker · Pangram Pangram
- Visual culture
- Wim Crouwel · Karel Martens · Julian Charrière
- Motion
- Active Theory · Resn · Bruno Simon
- Type
- Pangram Pangram · Type Department · Klim
- Sound
- Hans Zimmer (Interstellar) · Tycho · Bonobo
Source on github. Comments and corrections always welcome.