Portfolio engine

This site is its own case study. It runs on Next.js and Payload, with a WebGL hero — a domain-warped “silk” shader and a single refractive glass sculpture — layered over server-rendered content. The brief I set myself was to make something that feels alive without ever letting the spectacle get in the way of the words or the load time.

The engineering is mostly discipline around that idea. The Three.js bundle is code-split and loaded only after first paint, so the canvas is never the LCP element. A quality ladder assigns a tier at boot from GPU detection and demotes on frame drops or a lost context. All the real content is React Server Components with structured data, so search and AI crawlers read the whole thing whether or not a single pixel of WebGL renders.

The result holds a perfect Lighthouse performance score while still doing something genuinely three-dimensional on capable hardware — the balance the whole build was about.