Case study
How I built this portfolio
The craft behind this site, one detail at a time: the thinking, the design system and the build.
How I built
this portfolio
A case study in fifteen details
Case study 01
Contents
A case study in fifteen details
How I built
this portfolio
The craft behind this site, one detail at a time: the thinking, the design system and the build.
Sujoy Kr. Haldar
click a page, or drag it, to turn it
How I built this portfolio
A portfolio is most convincing when it is the work, not a description of it.
Detail 01 · Overview
The brief
Who the site is for, what it has to prove, and the stack and workflow chosen for it.
Before a line was drawn: who this site is for and what it has to prove to them. Three readers, the one hiring given the shortest path; three things to show rather than list; and a small stack, used all the way.
Inside
- 01Three readers, one site
- 02Three things, shown, not listed
- 03The rules it’s built on
- 04A small stack, used all the way
How I built this portfolio
Decide what the first seconds must say, before deciding how anything moves.
Detail 02 · UX
The first ten seconds
What a visitor should feel and do first, the intro's trade-off between delight and time, and the depth the page gains as you scroll.
A portfolio gets about ten seconds. Here they go to who, what, a person and where next, in that order, all started by one flag. Then the page gains depth as you scroll, and the intro plays once a visit, never in the way.
Inside
- 01The first ten seconds, frame by frame
- 02Who, what, a person, where next
- 03Five layers, five speeds
- 04Delight against time
How I built this portfolio
Keep the accent rare: once everything is highlighted, nothing is.
Detail 03 · Design system
The pencil language
One system for the whole site: tokens and the ember rule, four typefaces with four jobs, and pencil instead of boxes.
The whole site is drawn with one pencil and one ember: six colour tokens and a rule for the accent, four typefaces with four jobs, and lines drawn by hand instead of boxes, their wobble seeded so a sketch is the same every visit.
Inside
- 01Six tokens and one rule
- 02Four typefaces, four jobs
- 03Lines drawn by hand
- 04A box is four lines
How I built this portfolio
Name springs by their job, and picking one becomes a decision, not more tuning.
Detail 04 · Design system
How things move
The system's other half: 26 springs sorted into five named for their job, controls that answer alike, and nothing that pops.
The system’s other half is motion. An audit found twenty-six springs and seventeen settings; sorted by what each one does, they came down to five, named for their job. Every control answers your hand alike, and nothing pops.
Inside
- 01Twenty-six springs, seventeen settings
- 02Five springs, named for their job
- 03Three controls, one hand
- 04In and out, never on and off
How I built this portfolio
Outlines are shapes, not strokes: to make a font write, uncover the ink.
Detail 05 · Signature
A signature written by hand
Handwriting generated from a font, the pen that writes it, how it flies to the navbar and becomes a logo that rewrites itself for each page.
The name on the home page writes itself. A handwriting font becomes paths, a moving pen uncovers the ink at the pace of a hand, and the signature flies to the navbar, where it becomes a logo that rewrites itself for each section.
Inside
- 01Turning a font into paths
- 02Ink, uncovered by a moving pen
- 03A logo that knows where it is
How I built this portfolio
Distance, closeness, property, spring: swap the property and it’s a new interaction.
Detail 06 · Motion
Proximity: text that leans toward you
Letters that swell as the cursor passes, and the same idea behind the macOS Dock.
The name on the home page leans toward you: each letter grows bolder as the cursor comes near and settles as it leaves. One small pipeline on motion values, real text for screen readers, and the same idea as the macOS Dock.
Inside
- 01The real thing, with the controls out
- 02From a cursor to a font weight
- 03Two small pieces
- 04Proximity is a pattern
How I built this portfolio
If a site has only a few places to go, show them.
Detail 07 · Interaction
Dynamic islands
Islands instead of a menu: a dock of pills that morph open through a blur, with sketched icons, the music island and the resume island.
There’s no menu. A dock of pills stands in for it, and each one morphs open in place: a spring with a little give, a blur through the middle, and content laid out at its final size from the first frame. Three islands, one kit.
Inside
- 01The island, taken apart
- 02One kit, three islands
- 03Sketches that colour in
- 04The music island and the résumé island
How I built this portfolio
Choreography needs one source of truth: a single phase, not a set of flags.
Detail 08 · Transitions
A state machine for transitions
Five phases, one string: how every page change here is choreographed, and why loose booleans would break it.
Every page change here is a little film in five phases, held in one string. Each phase has one way to end and cleans up after itself, everything else is read from it, and only idle can start a transition.
Inside
- 01One click, five phases
- 02Five phases, one string
- 03Impossible states, made impossible
- 04Small pieces, each with one job
How I built this portfolio
A sketch made from the real layout can’t go stale.
Detail 09 · Transitions
Sketching the page before it arrives
The page sinking away, then the next one measured and sketched in pencil before it builds inside the sketch.
Between pages, the old one sinks away and the next is sketched in pencil before it builds inside its sketch. The page describes itself with a few marks and is measured live, and the sketch gets quicker the more often you see it.
Inside
- 01Four beats
- 02Sinking, not cutting
- 03The page describes itself
- 04Quicker the fifth time
How I built this portfolio
When a page opens from a preview of itself, let the preview become the page.
Detail 10 · Transitions
From thumbnail to page
The resume island's thumbnail flying to where the sheet sits, its sketch riding along.
The résumé island holds a living thumbnail of the résumé. Open it and the thumbnail flies to where the sheet will sit, on a page that doesn’t exist yet, its pencil sketch riding along, and the page builds where it lands.
Inside
- 01Take off, fly, land, build
- 02Landing on a page that doesn’t exist yet
- 03A sketch that rides along
How I built this portfolio
Felt more than seen, and idle when nothing changes.
Detail 11 · Atmosphere
The details nobody asked for
Strings plucked by the music, grain that doesn't blink, the scroll ruler with its page index, and click targets as big as their rows.
Details nobody would miss until they’re gone: strings behind the navbar, plucked by the music; grain that doesn’t shimmer; a scroll ruler that knows the page’s sections; and rows you can click anywhere, not just on their words.
Inside
- 01Strings plucked by the music
- 02Grain that doesn’t blink
- 03A scrollbar that knows the page
- 04Click the row, not the words
How I built this portfolio
Wherever it appears, render the real thing, not a copy of it.
Detail 12 · Resume
One markup, three outputs
One resume component as a page, a living thumbnail and a one-page PDF printed from CSS.
The résumé is written once. The same component is the page you read, the living thumbnail in the résumé island and a one-page PDF, sized in container units so it scales like paper, and printed by the browser from CSS.
Inside
- 01A document, not a layout
- 02Sheet, phone and paper
- 03A PDF from CSS
How I built this portfolio
The heaviest thing on the page is rarely the one you’d guess.
Detail 13 · Performance
Fast, light and accessible
Keeping all this motion smooth and usable: cheap animations, a calm version of each motion, and the numbers.
All this motion can’t be the price of entry. Only cheap things move, filters come off once they’re done, every motion has a calm version behind one switch, anything you can hover you can reach, and the build was measured first.
Inside
- 01Only the cheap things move
- 02One switch, every motion
- 03Anything you can hover, you can reach
- 04Where the bytes go
How I built this portfolio
If it looks like paper, people handle it like paper: every way it doesn’t behave is a bug.
Detail 14 · Detailing
A book you can leaf through
The case study as a real book: sheets that only ever turn, a page that stays under your finger, corners that peel, the pages you aren’t reading, and the sound of a turn.
This book. Every sheet is always there and only turns, so a page can’t flash; a drag keeps the spot you took hold of under your finger; corners peel to show the page beneath; and the pages you aren’t reading show at its edges.
Inside
- 01A page is never swapped mid-turn
- 02The page stays under your finger
- 03A corner that peels
- 04Everything you aren’t reading
How I built this portfolio
An agent builds the average by default; the craft is steering it somewhere specific.
Detail 15 · AI
Directing an AI agent
How this site was built with an AI coding agent: what I decided, what it did, and how I kept the craft mine.
This site was built with an AI coding agent. The design system is written as rules it reads every time, each repeated correction becomes a rule, everything is checked in the browser, and the deciding stays mine.
Inside
- 01A design system the agent reads
- 02Every correction becomes a rule
- 03Deciding, and saying no
That’s the whole book, for now.
The next one is Coder’s Gyan, written the same way.
Colophon
Set in EB Garamond, Roboto and Caveat, the signature in Tropical Country. Drawn in pencil and built with Next.js, React, Tailwind CSS and Motion, with an AI coding agent at the next desk.
- 01 The brief
- 02 The first ten seconds
- 03 The pencil language
- 04 How things move
- 05 A signature written by hand
- 06 Proximity: text that leans toward you
- 07 Dynamic islands
- 08 A state machine for transitions
- 09 Sketching the page before it arrives
- 10 From thumbnail to page
- 11 The details nobody asked for
- 12 One markup, three outputs
- 13 Fast, light and accessible
- 14 A book you can leaf through
- 15 Directing an AI agent
Case study 01click it to open
Fifteen details, from the first brief to the last spring, each with a live demo you can slow down and the real code behind it. They're in the book above, a spread each, in the order they were built: open it, leaf through, then open any one to go in.