Case 01 / Three

The site you are
standing on.

A portfolio that claims range has to prove it, not list it. So the argument is the page itself: one real object, modeled and solved and shipped, carrying every claim the copy would otherwise have to make.

rjabbate.com·2026·wordpress · three.js · cad
01

The brief

The argument for hiring me, made by the page rather than stated on it.

Role
Everything: research, identity, design, build, deploy
Surface
WordPress child theme over a hand-authored static build
Centrepiece
A scroll-driven WebGL mechanism, not a hero image
02

The decisions

The constraintThe proof had to be the page

One object, four disciplines

A list of skills is a claim. An object is evidence. The hero is a real infinity cube: a physical fidget toy filmed on the bench, its mechanism derived as an overconstrained spatial linkage, re-authored in CAD, then baked into a collision-verified 828-frame loop and driven from the scroll position. It proves CAD, computational geometry, kinematics and WebGL at once, because it is all four.

The constraintA résumé dump loses the reader

One idea per screen

Seven beats, each carrying exactly one thought and one artifact. Depth is opt-in: the visitor picks the thread they care about instead of being walked through everything. The hero says a little on purpose. Restraint is what makes the rest feel chosen rather than endured.

The constraintDark portfolios all look identical

Monochrome plus one, strictly policed

True black, bone white, and a single signal red, with a rule that red marks exactly one thing per view. Everything else is hairlines and negative space. The engineered feel comes from what is withheld, not from what is added; it is the discipline, not the palette, that keeps it from looking like every other dark tech template.

The constraintMotion cannot cost the visitor anything

Quality that measures instead of guessing

Device tiers are a guess made once at load. They punish a touchscreen laptop and do nothing for a phone that throttles two minutes in. The hero measures its own frame times and steps quality down when it misses budget, in order, without oscillating. The mesh ships Draco-compressed at a twentieth of its authored size and decodes off the main thread, so the argument loads before the visitor loses interest.

03

The method

What was decided, in the order it was decided. The how stays on my bench — but the reasoning is the part worth showing anyway.

rjabbate — decision log
build film the real object # the mechanism has to be true before it can be beautiful
solve derive the linkage, exactly # closed-form, not eyeballed — the fold either closes or it doesn't
author re-cut it in CAD # measured hardware, real tolerances, printable
bake one seamless loop, collision-checked # no interpenetration at any frame
drive bind the fold to scroll position # the visitor turns the mechanism themselves
Three.js / WebGLBlenderFusion 360Computational kinematicsGLB / DracoWordPress themingPerformance engineeringArt directionDesign systems
04

Evidence

the mechanism, drawn
the mechanism, drawn
the shipped render
the shipped render

What do you
need built?

Start a conversation →