Lab
Notes on things I've built, starting with this site. If you've got DevTools open already, this is the page for you.
This site
The constellation is the navigation
The hero isn't decoration — every node is a technology, every edge is a real path from one of the case studies, and clicking a node filters the work below. It ships as positioned HTML buttons over an SVG edge layer, so it is tab-navigable and screen-reader-readable before any WebGL loads.
This site
Deterministic layout, no Math.random in render
Node positions come from a seeded PRNG (mulberry32) computed once at module load. The previous version of this site called Math.random() during render, so every state change teleported the particles — a good example of a bug that looks like a design choice.
This site
One motion switch, read by both CSS and JS
A blocking script sets data-motion="reduce" on <html> before first paint. CSS uses it to disable transitions; JavaScript reads the same attribute to skip the WebGL loop and the view transitions. One source of truth means the two can't disagree.
This site
Architecture diagrams that lay themselves out
Case studies describe architecture as nodes and edges only. A longest-path layering assigns columns at render time, so adding a service to a diagram is one line of data rather than a coordinate rewrite. They draw in on scroll with stroke-dasharray.
The whole thing is open source — read the code, or see the rest of my GitHub. For finished work, the case studies go deeper.