The Interactive Engineer's Desk
This portfolio itself: an Astro site whose hero is a small Three.js workspace — a phone, a monitor and a notebook that stand for the three kinds of work on the site. Built to find out how much 3D a portfolio can carry without getting in the way of reading it.
- Role
- Designer and developer — design system, site, 3D scene
- Scope
- Design system, bilingual site, Three.js hero, accessibility and fallbacks
- Status
- In progress
- Timeline
- 2026
- Technology
The problem
Three kinds of work — Android apps, business systems and writing — are hard to signpost with headings alone. A visual scene can do it faster, but most 3D portfolios pay for that with a slow first paint, a page that fights the scroll and navigation that only exists inside a canvas.
Constraints
- The heading, the two calls to action and the navigation must be readable before any 3D loads.
- Every destination in the scene must also be an ordinary link.
- One canvas, bounded to the hero; rendering pauses offscreen and on a hidden tab.
- The whole site must work with WebGL unavailable and with reduced motion.
The solution and important decisions
The scene is one Draco-compressed GLB with baked lighting, rendered with
frameloop="demand": it draws a frame on pointer movement, on hover or focus, and
during the crossfade, then stops. Pointer parallax is bounded to a fraction of a
unit and returns to rest, so the text never moves with it.
Everything readable is HTML over the canvas rather than a texture inside it — the hint, the three object labels and the caption row. That is what makes the hero usable at 320px, where the canvas is not mounted at all.
The 01
Poster first, canvas second
A static render of the exact camera fills an aspect-ratio box from first paint; the canvas mounts later and crossfades in, so nothing shifts.
The 02
Hotspots are real buttons
Three 44px transparent buttons sit over the canvas with aria-labels, so the scene is reachable by keyboard and by screen reader — and the same three links appear as text under it.
The 03
Five scene states, one framing
Poster, interactive, simplified, reduced-motion and no-WebGL all share the poster's composition, so the hero looks the same however it degrades.
Screens and interaction examples
- Screenshot placeholder
- Screenshot placeholder
- Screenshot placeholder
Outcomes
Verified facts only. Until a real number or fact is available this block stays a placeholder — no estimated users, revenue or performance claims.
Lessons learned
Writing the interaction table before the scene — trigger, response, destination, fallback — made the fallbacks cheap instead of an afterthought.