This portfolio
This site: a React front end with a hand-written WebGL particle engine that changes shape for every section.
A portfolio has to say a lot to someone who will give it a minute. I wanted the page itself to show the work: one cloud of points that becomes a globe, orbits, a row of projects and a timeline as you scroll, without getting in the way of the text, slowing down a phone, or breaking for anyone who prefers less motion.
- One draw call, from 3,000 points on phones to 7,000 on desktop
- Smooth on mid-range phones, stepping down in quality when the frame rate drops
- Every piece of content readable without the animation, and a static render under reduced motion
- Two languages sharing one layout
Keep the engine outside React
The engine owns its render loop and exposes a small imperative interface. Scrolling and hovering change shader uniforms, not React state, so animating at 60 frames per second never triggers a re-render.
Derive every shape from each point's home position
Each scene is computed from where a point sits on the sphere rather than sampled fresh, so every point travels a short way to a nearby spot in the next shape. Transitions read as the form deforming, not the cloud scrambling.
Draw the globe as coastlines
Filled continents needed far more points to be recognisable and turned the far side into a competing mass. A coastline mask generated from world map data is sparse enough to fade with depth, and still makes France readable with a few thousand points.