Skip to content

feat: ship projects cube — 6-face interactive ecosystem map#38

Merged
avrabe merged 1 commit into
mainfrom
feat/projects-cube
Apr 26, 2026
Merged

feat: ship projects cube — 6-face interactive ecosystem map#38
avrabe merged 1 commit into
mainfrom
feat/projects-cube

Conversation

@avrabe
Copy link
Copy Markdown
Contributor

@avrabe avrabe commented Apr 26, 2026

Summary

Replaces the flat project-card grid on /projects/ with a 3D rotating cube where each face is one ecosystem facet:

  • Architect (blue) — spar
  • Build (cyan) — meld, loom, synth, sigil
  • Verify (green) — Verus, Rocq, Lean
  • Trace (amber) — rivet
  • Run (red) — kiln + downstream platforms
  • Agent (purple) — AI-native development

Drag to rotate. Click a face button (top of page) to snap to a face. Click a face for the detail panel.

Why now

This template + the JS were written alongside the projects-revamp work over recent sessions, then kept WIP-local while we shipped other things. The light-mode pass (#37) already updated the template's structural colors to `var(--surface)` / `var(--border-subtle)` — so cube faces render as cream paper sheets in light mode, dark navy surface in dark mode. Per-face accent colors stay hardcoded (semantic identifiers per face, not theme tokens).

The only thing holding this back from prod was `content/projects/_index.md` still pointing at `template = "section.html"`. This PR flips that to `template = "projects.html"` and adds the two new files.

Files

  • `templates/projects.html` — new (cube template + embedded CSS + face content)
  • `static/cube.js` — new (drag-to-rotate, face nav, detail-panel logic)
  • `content/projects/_index.md` — switch `template` field

Test plan

  • zola build clean (23 pages)
  • Tested locally in both light and dark mode
  • CI passes
  • After merge: /projects/ on production renders the cube; works in dark and light; drag rotates; face buttons snap correctly

🤖 Generated with Claude Code

Replaces the flat project-card grid with a 3D rotating cube where each
face is one ecosystem facet (Architect, Build, Verify, Trace, Run, Agent).
Drag to rotate, click a face button to navigate to the corresponding side,
click a face for the detail panel.

The template + cube.js were authored alongside the projects revamp work
done over recent sessions; the light-mode pass already updated the
template's structural colors to use var(--surface)/var(--border-subtle)
etc., so cube faces render as cream paper sheets in light mode and as
the dark navy surface in dark mode. Per-face accent colors (Architect
blue, Build cyan, Verify green, Trace amber, Run red, Agent purple)
stay hardcoded — they're semantic identifiers, not theme tokens.

- Add templates/projects.html (cube template with embedded CSS + face
  content)
- Add static/cube.js (drag-to-rotate, face nav, detail-panel logic)
- Switch content/projects/_index.md template field from section.html
  to projects.html (was the only thing holding this back from
  shipping, kept local during cleanup)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@avrabe avrabe merged commit 7c4739d into main Apr 26, 2026
1 check passed
@avrabe avrabe deleted the feat/projects-cube branch April 26, 2026 13:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant