The brief
A portfolio that proves the skills instead of listing them: 3D, real-time graphics, audio-reactive systems and automation, on a page that still loads fast on a phone.
The pipeline
- 1Blender scenes
- 2Rendered frames and tracked surfaces
- 3Size budget and quality check
- 4Scroll-scrubbed canvas
- 5Web content pinned into the render
The scenes
ClayFinal
What's going on under the page
- Each chapter is a Cycles camera move rendered to frames, compressed to a per-scene size budget, with a quality check so compression never shows.
- Blender exports where things are in every frame: monitor corners, book pages, lit windows. The site pins real video and HTML onto them, so the gameplay on the monitors and the archive in the book can change without re-rendering.
- The music is original. Each track is analysed offline into beats and frequency bands, so the sculpture and the island's windows move in time even with the sound off.
Decisions and trade-offs
- Image frames instead of video for scrubbing: exact and reversible on phones, where video seeking is slow.
- Baked audio data instead of a live microphone: in sync while muted, no permission prompts, no CPU cost.
- Chapters load only after the visitor scrolls, every 4th frame first so scrubbing works immediately.
- Reduced-motion and data-saver visitors get still images, no pinned scrolling and no WebGL.