HomeWorkAboutContact
← Back to work
Built · Passion Project

Portfolio Revamp & Rebuild

The handoff between design and engineering is where details go to die. This portfolio skips the handoff entirely — designed, built, and shipped by one person, as proof of that exact claim.

5 min read
Live Preview ↗
Stack
Next.js · TypeScript · Claude Code · Vercel
Year
2026
Role
Designer & Developer
Status
Live
The Spark

This is the third version of my portfolio. Version one was designed in Figma and built on Wix. Beautiful in concept, completely constrained by the platform, and a portfolio for a designer who is artistic — not one who also builds. Version two was made in bolt.new, quickly, before I knew how to direct AI tools properly. It looked fine. It still told the wrong story.

The core claim is this: the handoff between design and engineering is where details go to die. I skip it. Not because teams can't make great things, but because my practice runs on the same brain making both calls. The portfolio needed to prove that, not just say it. So I designed, built, and shipped it myself.

I started with Claude Chat: research, positioning, a full PRD with every visual and copy decision made before a line of code was written. Then Claude Code to build it, testing in the browser as I went. Not a developer who can design. Not a designer who dabbles in code. A designer who ships.

In Context
Decisions
02
The iridescent thread was a choice, not a coincidence

Spinning tops have a meditative quality if you just watch them. The Breathing Reset is supposed to do the same thing for your breathing. When I was building it, I chose the same iridescent conic-gradient for both specifically because of that connection. One visual language, two things trying to do the same thing: slow you down.

03
The name flip took more passes than anything else on the site

The hero alternates between "Hi, I'm Tanvi." and "तन्वी." every three seconds. Sideways card flip, pronunciation guide slides in when the Hindi name shows. The idea was simple. Getting the timing, the easing, the slide distance to feel natural took a lot of iterations. Most people don't know how to say my name. I wanted the correction to feel effortless, not like a lesson.

04
The type makes the argument before any copy does

Canela and Inter Tight. One is editorial, warm, unhurried. Taste. The other is precise, tight, functional. Craft. Put them together and you get the designer × builder thesis in the type itself, before a single word of copy has landed.

05
The Breathing Reset is a belief, not a feature

I think technology should make people feel calmer, not more anxious. If I'm going to say that, the portfolio should actually do it. So there's a full breathwork session built into a single page section: OM drone audio at 136Hz, an iridescent circle paced to your inhale and exhale, a mood check after 60 seconds. Not a gimmick. A conviction that felt dishonest to only write about.

06
Swipe-to-explore on mobile — borrowed and made different

On mobile, Selected Work becomes a swipeable card stack. Cards peek at different depths behind the top one. Swipe left to go forward, right to go back, spring-return if you don't commit. Inspired by Hotstar's browsing pattern but built from scratch — velocity detection, direction locking so vertical scroll always hands back to the browser. Only a deliberate horizontal gesture triggers it.

07
The detail passes never stopped

A UI/UX background and a Computer Science degree mean the bar is specific and self-imposed. Throughout the build: typescale rationalized to 14 purposeful sizes, spacing collapsed from 18 scattered values to a four-step system, contrast checked against WCAG in both light and dark modes, every breakpoint tested and iterated until mobile felt as considered as desktop. Multiple passes through each. Not because anyone asked. Because I knew exactly where to look.

08
Knowing what to cut is harder than knowing what to add

The pull with a portfolio is always to add more. The harder discipline is what goes. The Designer × Builder eyebrow repeated the tagline — gone. The HowIThink subtitle explained cards that don't need it — gone. A quote attribution animation that turned a belief into a performance — gone. Five weaker quotes, one redundant question, a response-time reassurance that appeared three times. Every cut made what stayed carry more weight.

What Worked
01

PRD-first meant the build was execution, not exploration. Design decisions were already made before I opened any code. That separation kept everything clean.

02

Writing the physics iteratively in the browser let the behaviour emerge rather than be prescribed. The spinning-top connection wasn't planned. It was discovered. The best details on the site came from following what happened, not forcing what was intended.

03

The specificity test for copy. Any line that could have appeared on another designer's site got rewritten until it couldn't. Slow and uncomfortable. Worth it.

What's Next
01

A password-protected admin dashboard built with Supabase Auth and Postgres. Every project, case study, quote, and Currently Into card editable from a single interface, no code required.

02

Project images through Supabase Storage with drag-and-drop upload. Gallery order controlled per-project. No more mapping image URLs by hand.

03

Contact form submissions in a Supabase inbox: searchable, filterable, CV requests flagged. Someone reaches out, I see it in one place.

Got a project in mind?

I'm available for new projects.

Start a conversation →
← Previous
Next →