Case Study
A scroll-driven portfolio
with editorial transitions.
Designing and engineering this site as a demonstration of the same skills it presents: systems thinking, editorial design, and interaction engineering.
Dec 2025 – Apr 2026, ongoing · Solo design & build
The Challenge
Most portfolio sites are either flashy showcases or minimal templates that treat every project as an interchangeable card.
I wanted a portfolio that works the way I work: systems-first, detail-oriented, and structured around narrative rather than feature lists.
Visual Design Research
Before making any design decisions, I studied seven portfolios across the aesthetic spectrum — invisible gallery frames, playful handmade sites, single-accent minimalism, dark immersive worlds, and text-only studios that prove value through copywriting alone.
Four patterns came out of that research:
Color strategies
Monochrome + one accent (premium, focused), art-provides-all-color (neutral gallery frame), dark + neon (dramatic, immersive), and warm multi-color pastels (playful, human).
Typography patterns
Most portfolios use sans-serif body text with one display font; a serif body is rare.
Layout archetypes
Gallery grids for art-heavy sites, full-width narratives for immersive brands, card-based layouts for structured case studies, and text-only for confidence-first studios.
Animation philosophies
Most portfolios animate surfaces — hovers, fades, entrance reveals.
Where this site breaks from convention:
- Scroll-driven background color interpolation — the background shifts from cool lavender through warm purple to soft peach as you scroll, giving each section its own emotional temperature.
- Full-bleed alternating card stripes — projects are presented as horizontal bands that alternate text-left and text-right, closer to a magazine spread than a grid.
- Blur-in entrance animations — elements enter through a gaussian blur dissolve rather than the standard opacity/translate fade, creating a softer, more cinematic reveal.
- Structural animation via state machine — the animation investment is in the routing layer, not decoration. A four-phase state machine orchestrates page transitions instead of CSS keyframes.
- Serif body font in a dev portfolio — Bitter gives the site a literary, editorial quality that most sans-serif-default portfolios lack, reinforcing the “read an essay” browsing model.
Design Decisions
The choices that shaped the site most:
Why not a template?
Templates optimize for speed. A portfolio for a designer and developer should be the work itself, not a wrapper around it.
Why scroll-driven animations?
The floating name, background color shifts, and card transitions all use physics-based springs, not CSS keyframes.
Why editorial case studies?
A bullet list of features says what I built. An editorial layout shows how I think, how I structure information, and how I guide a reader through complexity.
Why client-side transitions?
Card-click-to-project-page transitions keep spatial context. The grid stays visible during navigation so users never lose their place.
The Interaction Layer
The site is built as a single-page application with the App Router. All project pages share one layout with a state machine that orchestrates transitions between four phases: idle, collapsing, open, and closing.
Clicking a project card doesn't navigate away. The grid collapses, the selected card's image expands to fill the viewport, and the project content fades in underneath. Navigating back reverses the sequence. The user never loses spatial context.
Scroll position is preserved and restored after the return transition completes. The floating name animates between hero scale and nav scale using a spring-driven progress value that responds to both scroll position and route state.
Background colors transition smoothly between sections using scroll-driven interpolation, with each section (hero, projects, about) mapped to its own color in the palette.
The Glass Effect
The gradient blob on the landing page creates ambient texture that responds to the cursor. I wanted to push that idea further: what if the entire viewport became a refractive surface, bending light around a shape that follows your hand?
Glacias is a standalone WebGL2 engine I built in three days. It renders SDF-based glass distortion in real time: every pixel inside the shape is refracted, blurred, and chromatic-aberrated based on its distance from the edge, creating a physically-grounded sense of material depth.
SDF Shapes
Five signed-distance-field primitives (circle, rounded rect, hexagon, clover, and star) with smooth-min boolean unions for organic silhouettes.
Edge-Band Refraction
Distortion concentrates at the boundary using SDF gradient normals, blending to radial vectors in the interior to avoid seam artifacts.
Chromatic Aberration
RGB channels are sampled at slightly different offsets, creating the prismatic fringing that makes the glass read as a physical lens.
The edge-band is the critical perceptual detail. Without it, the shape reads as a flat overlay; with it, the eye infers curvature, thickness, and materiality from refraction alone.
Four phases. Zero page loads.
One state machine orchestrates every transition, so the grid, hero, and project content never fight for space.
What I Learned
I learned to treat transitions as information design.
My old thinking was “add animation to make it feel polished.” Building this site changed that. The transition between pages IS a UX decision: it tells the user where they came from and where they're going. Cutting any transition from this portfolio would lose spatial information, and that changed how I prioritize animation engineering time.
I learned what happens when you build your portfolio as a real engineering project.
The constraint of building a custom state machine instead of using a template forced decisions about scroll anchoring, exit animations, and content transitions that taught me more about React and Framer Motion than any tutorial.
I learned that shipping is a different skill than building.
The hardest part of this project was declaring it “done.” Each case study I wrote revealed gaps in the previous version. The real skill is deciding what to ship now versus what to improve later, and being honest about which changes are improvements versus procrastination.
Built with