Behind The Machine — This Portfolio
The site you're on. The hook is a machine that transforms as you scroll — unusual enough to stop someone on the first screen, and complex enough that rendering it live would stall most devices. That's the pitch: a front-end developer who picks up whatever the idea needs — Blender, shaders, a frame pipeline — and treats the unfamiliar half as the interesting half.
Solo Design + Build
Next.js · Three.js / R3F
3D model → design → static pages
Career as assembly line
How it was built
Modeling
Blocked the robot out from a default cube — proportions and joint placement resolved before any surface detail.
Animation
Joints keyframed while the model was still primitives — the disassemble loop timed here, not in code.
Rendering
One hot reactor-core light did the work — the glow every page reuses came out of a single lighting rig.
Programming
Scroll position picks the frame inside the r3f render loop — one full-screen mesh, one draw call, no React re-render per frame.
Model spec
713K
tris373K
verts731
rigged joints7
pbr slots717
separable parts170
frames · 30 fps4
transform states5.28MB
draco compressedTimeline
Build notes
The idea came before a single shape
No wireframe, no first cube in Blender. It started as one sentence — build something people haven't scrolled past before — written down while there was still nothing to look at.
Everything else is downstream
The name, the cog, the assembly-line metaphor, the teardown language in every section heading — none of it was picked on its own merits. Once the idea was fixed, the rest came on the fly: decided in the moment, one piece at a time, and coherent only because the direction was already set.
A machine, not a demo
A robot for its own sake is a showreel. Tying it to the career — parts assembling, a machine built out of what came before — is what turned the effect into the argument.
The phone was the baseline
An idea that only runs on a desktop GPU isn't ambitious, it's broken. The transformation earned its place by being bakeable — a frame sequence a mid-range phone can page through, not a live scene it would choke on.
The crawler doesn't scroll
Canvas content is invisible to a search engine, so everything that has to rank lives in server-rendered HTML instead — its own canonical on every route, a sitemap generated from the project list, and a CV accordion that collapses with CSS rather than unmounting, so the full work history ships in the markup whether or not anyone opens it.
Outside the day job, on purpose
Modelling, lighting, baking a frame sequence, a hand-written particle shader — none of it is standard front-end work. Learning each piece was the point of building the site, not overhead on the way to it.