Formation lap complete

Five lights

Awaiting race control

Back to notes
Design SystemsNext.jsMotion

Portfolio Interface Principles

2026-04-091 min read

The design rules behind this dark-mode portfolio: restraint, motion with purpose, and cards that earn their glow.

This portfolio is designed as a working surface rather than a static gallery. It uses motion, glass, and dense project cards, but the intent is to keep the work legible first.

Rules I Followed

  1. Use animation to reveal hierarchy, not to distract.
  2. Make every glow semantic: live state, active section, or focused action.
  3. Let typography carry the voice before decoration does.
  4. Keep project metadata close to the artifact.

Motion Budget

Most transitions use spring physics because they feel responsive without needing long timelines. A small number of persistent motions, like the marquee and scroll indicator, give the page a pulse.

The best interaction layer is the one that makes the portfolio feel awake while still letting the projects do the talking.