Case study — Design & Engineering
This site
A portfolio built to prove the craft it's arguing for.
Live · Web
Design direction, motion engineering, frontend build, brand voice
The premise
Most portfolios describe craft. This one had to demonstrate it, or the whole pitch falls apart on contact — a site claiming skill in motion, product thinking and building real things has nowhere to hide behind a template. The premise going in was simple to state and harder to hold to: the portfolio itself is the proof, and motion isn't a section, it's the product. That ruled out the easiest path early — a competent, template-shaped site with a few scroll animations bolted on — in favour of a cinematic, all-black direction built from scratch: a title sequence, a film-cut between routes, and three ventures presented as their own worlds rather than three identical cards in a grid. Committing to that meant every decision downstream, including the ones that failed, had to be made and remade until it held up under the same standard the site was asking a visitor to judge everything else by.
The all-black hero decision
The hero went through a real reversal, not just a colour tweak. A champagne, dawn-lit treatment was tried first — warmer, softer, a gentler opening than pure black. It didn't survive contact with the portrait: a figure shot in black clothing against a warm champagne background reads as a dark silhouette-box, and no amount of masking or gradient tuning fixed it without dissolving the person inside it. The honest fix wasn't a clever crop, it was reverting. The hero went back to all-black, where a portrait shot on pure #000 floats free instead of fighting its background, and the champagne dawn was kept but demoted — it now lives further down, in the section where the palette turns warm for the first time. That's the kind of decision this case study is actually about: not the direction that shipped, but the one that got tried, tested against a real image, and cut.
The veil
Moving between pages needed to feel like a cut, not a page load. The mechanism is a route-transition veil: a full-page cover that rises over the current view, waits while the next route resolves underneath it, and lifts once the new page is ready — the grammar of a film cut rather than a browser navigating. It runs on a capture-phase link interceptor so it can catch a click before the router acts on it, and it deliberately gets out of the way for anything that isn't a plain same-tab navigation — modified clicks, new tabs, back-forward history, and reduced-motion preferences all bypass it rather than forcing the effect on someone who didn't ask for it. Getting a transition to feel inevitable rather than decorative meant treating the edge cases — the click that shouldn't be intercepted — as seriously as the transition itself.
Living plates and the flicker tradeoff
The home page runs real product footage over the venture screenshots — actual recordings of Revora, FytLounge and Protein Reserve playing quietly under the stills, so the ventures read as running products rather than framed pictures of them. The complication showed up on the home page specifically, which is skewed on scroll as one continuous transformed layer: a video inside that transform has to be re-composited on every scroll frame, and that cost shows up as flicker and slowdown, worst on Safari and iPhone where several videos can be decoding at once. There's no clever fix for that — it's a cost the browser is paying honestly for a demand the design is making. The right call is to stop asking it to: stills on the page that skews, video only where the page holds still, on the case studies and the work index where there's nothing to re-composite. Knowing what to cut turned out to be as much the craft here as building the version that flickered in the first place.
Reveals that can't miss
Content needs to be visible, not animated into existing. Two mechanisms that look reliable in isolation both failed under real conditions: IntersectionObserver doesn't reliably fire for elements already in the first viewport on load, and framer-motion's whileInView tweens can freeze mid-transition when the browser throttles requestAnimationFrame — the result in both cases isn't a missed animation, it's content that never appears at all. The fix was to stop trusting either mechanism for anything a visitor actually needs to read: reveals now run on a plain CSS-transition gate that doesn't depend on an observer callback or an animation frame to resolve. Framer is still used, deliberately, for the parts where a stall is harmless — decorative loops, scroll-scrubbed effects, springs that follow a cursor — but never for the sentence someone came to read. The ambient motion, dust and light sweeps, runs on CSS keyframes for the identical reason: it has to keep moving even when the browser is busy elsewhere.
Restraint as law
The palette is four colours: noir, ivory, champagne, anthracite. No gold, no amber accents, no boxes or borders anywhere in the system — separation between sections comes from space and from organic, uneven seams instead of a hard rule or a card edge. Colour is rationed on purpose: it enters through the multilingual greeting at the very start and through each venture's own footage and screenshots, never as a decorative accent applied to the interface itself. The same restraint governs the video layer — the ambient-video component is built to always fall back to its still frame, so reduced-motion settings, data-saver mode, a blocked autoplay, or a decode error all land on the same screenshot a visitor would have seen anyway, never a blank box. Restraint here isn't a style preference bolted on top; it's a rule the components are built to enforce even when nobody's watching which state fires.
Where it stands
This site is live at deepakkk-portfolio.vercel.app. It's the working version of everything this case study describes — the greeting, the all-black hero, the veil between routes, the venture worlds, the reveal system — running in production, not a staged demo of it. Like the rest of this practice, it keeps being worked on rather than declared finished; the video-flicker tradeoff in section four is the most current open decision, not a settled one.
Building your own proof is a different kind of pressure than building someone else's. There's no client to defer a hard call to and no brief to hide behind when a direction doesn't work — the champagne hero failing was just a fact I had to sit with and fix, not negotiate. What building this site taught me is that the standard I hold other people's products to has to survive being pointed at my own, including the parts that didn't work on the first try. That's the actual argument this case study is making: not that everything here is perfect, but that the decisions were real, and I can account for every one of them.