All work
Creative & Experimental
Four-Theme Portfolio System
This site: one token set driving four visual systems, shaders included.
Where it started
I could not pick one aesthetic, so I built the site to hold four and made the theme a first-class piece of state rather than a stylesheet swap.
What I did
- Defined every theme as a set of CSS custom properties, so components read tokens and never hard-code a colour.
- Wrote a GLSL particle field whose colour, drift speed and shape mode are uniforms fed from the active theme.
- Animated the theme change as a clip-path wipe in GSAP, with the token swap timed to happen while the wipe covers the viewport.
- Kept the whole thing behind prefers-reduced-motion, including the render loop.
What changed
Four themes, one component tree, no per-theme forks. The hardest part was contrast: every accent had to clear WCAG AA on its own background, which killed a few colours I liked.