Krishna Bhupathi
Hyderabad 10:30 IST
All work
Build notes
A studio site with no client work to show yet. So the site had to be the proof: it shows how it is built while you read it.
Role
Everything: positioning, copy, design, build
Timeline
2 weeks, alongside learning Framer
Tools
Figma, Framer, React code components
Live at
studio.bhupathi.dev
The hero, with the dev-tools overlay fully drawn.
Back to the home page
The problem
Most Framer portfolios lead with client work. I had none yet, and a wall of concepts reads as filler.
What I did have was an engineer’s eye. The idea: let the site show the parts most sites hide, its spacing and its speed, and make that the first thing a visitor sees.
Three decisions
1. The headline wears its own measurements
The hero headline sits inside a browser dev-tools box-model overlay: margin, padding, content. The labels show the real values and change at each breakpoint, so they’re never decoration.
Box model, as drawn on load
Framer sites for AI startups
2. The page reports its own speed
Under the hero, a readout shows this page’s Lighthouse score, largest paint and page weight, measured on the live site. It’s the one claim I can prove before having clients.
Performance budget (targets)
Page weight under 400 KB
Largest paint under 1.2 s
Lighthouse 95 or higher
Live numbers replace these at launch.
3. Motion that measures
Divider lines draw left to right like a ruler. Headings rise out of a mask. The process lines fill as you scroll. The page ends by drawing the box model again around the closing question.
Motion rules
Under 56px of travel
1.0 to 1.4 s, ease-out
Reverses when you scroll away
Off for reduced motion
How it’s built
• Framer components with variants for buttons, work items, service rows and FAQ items.
• A CMS collection for case studies, using the template on this page.
• Two small code components: the box-model sweep with live size labels, and the inspector chip that shows scroll position.
• Appear effects and scroll transforms for motion, with reduced motion respected site-wide.
Result
Live numbers go here after launch.
Lighthouse score, largest paint and page weight from the live site, plus how many visitors book a call from the hero.