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
- Use animation to reveal hierarchy, not to distract.
- Make every glow semantic: live state, active section, or focused action.
- Let typography carry the voice before decoration does.
- 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.