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 attention to interaction detail.
The Challenge
Most portfolio sites fall into one of two traps: over-designed showcases that prioritize flash over content, or minimal templates that treat projects as interchangeable cards. Neither communicates how someone actually thinks.
I wanted a portfolio that works the way I work: systems-first, detail-oriented, and structured around narrative rather than feature lists. The site itself needed to be a case study in the kind of design thinking it presents.
Visual Design Research
Before making any design decisions, I studied seven portfolios spanning the full aesthetic spectrum: invisible gallery frames that let artwork speak for itself, playful handmade sites with deliberate imperfection, single-accent minimalism as a luxury signal, dark immersive worlds that prioritize atmosphere over content, premium dark backgrounds where project images do all the work, text-only studios that prove value through copywriting alone, and curated art galleries with lightbox browsing and category filters.
Four cross-cutting patterns emerged from that research, each representing a different axis of portfolio design. Understanding where this site falls on each axis — and where it deliberately breaks from convention — shaped every decision that followed.
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). This site's scroll-driven gradient is in a category of its own.
Typography patterns
Most portfolios use sans-serif body text with one display font. A serif body font — like the Bitter used here — is rare and signals an editorial, literary sensibility that reinforces the 'read an essay' browsing model.
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. Full-bleed alternating stripes are unique to this portfolio.
Animation philosophies
Most portfolios animate surfaces — hovers, fades, entrance reveals. This site animates the structure itself: the routing layer, the page transition state machine, the scroll-driven background. That's a fundamentally different investment.
Five things this site does that none of the seven do:
- 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.
This research didn't just validate existing choices — it revealed where convention exists for good reason and where breaking from it creates a meaningful signal. The design decisions that follow are the direct result.
The medium is the message.
Design Decisions
Every architectural choice was deliberate. Here are the ones 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?
Every transition is a chance to demonstrate craft. 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 that 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.
Idle, collapsing, open, closing. A 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. The portfolio became a technical proof because the constraints demanded real solutions.
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