This is the site you're reading. A Next.js 16 app with a Rubik's-style cube for navigation and one shared template for every project page. Show the range fast, then make each project easy to inspect.
Cube navigationOne homepage object for the whole portfolio.
Six sections make the range scannable before a visitor opens any project page.
FoundedCareerProjectsSystemsBuild StackContact
The workThe cube routes into the site's sections. Every project page, including this one, renders from a typed content file through the same template.
§02What I builtMain parts
Four pieces.
Cube navigation.
The cube is the site index. Link cells route; quieter proof chips add context. You scan the whole range before clicking anything.
54 cells · 6 sections
Shared case-study template.
One template renders every project page from a typed content file: hero, metrics, sections, stack, artifacts, links. No per-page forks.
One React template
Blueprint visual layer.
A hover layer over the hero: grid, small diagrams, graphite tint. Visual texture only. It never touches the content model.
Hover grid
Typed content registry.
The cube, menu, pages, and metadata all read from the same content modules. Edit the registry, every surface follows.
Cube · menu · pages
Semantic HTML, never inside Canvas.
The cube uses real labels and the project pages render as headings, prose, lists, captions, and links. Models can read the site without parsing a canvas scene.
Readable by people and models
§03Build rulesRules I used
A few rules kept the build consistent as the site grew.
Rules I usedpublic build
One content model. Cube, menu, pages, and metadata all read from it.
Real labels, no canvas text. Focusable and crawlable, so people and models can read the work.
§04LessonsWhat changed
Lesson · 02
Build against the running site.
The cube and motion only made sense in the live app. Static mockups were useful for direction, but the final decisions had to happen against localhost.
This portfolio