Case Study: Designer Portfolio
How a product designer built their portfolio site in an afternoon.
The Project
What: Personal portfolio site with project showcases Platform: Web (Astro) Designer: Product designer with no coding background Timeline: One afternoon (~4 hours)
Why They Built It
“I’d been putting off updating my portfolio for months. Every template felt generic, and hiring a developer felt expensive for something that might change. I wanted something simple that I could update myself.”
The Result
A clean, minimal portfolio featuring:
- Home page with introduction
- Projects grid with hover effects
- Individual project pages with images
- Contact section
- Dark mode support
- Custom domain
Key Prompts That Worked
Starting the project
I want to build a minimal portfolio website.
I'm a product designer.
I want it to feel clean and modern, like Vercel's website.
Use Astro if that works well for this.Getting the typography right
The typography doesn't feel right.
I want it to feel more editorial, like Stripe's website.
Larger headings, generous spacing, readable body text.Adding the projects grid
Add a projects section with a grid of project cards.
Each card should have:
- Thumbnail image
- Project title
- Brief description
- Hover effect that lifts it slightly
Make the cards link to individual project pages.Dark mode
Add dark mode that respects system preference.
Make sure all colors adapt well.
The images should have a subtle border in dark mode
so they don't float.Deployment
Help me deploy this to Vercel and connect my custom domain.
Walk me through the steps.The Biggest Challenge
“I spent too long trying to get the spacing exactly like my Figma file. Eventually I realized it didn’t need to be pixel-perfect — it needed to feel right in the browser. Once I let go of matching Figma exactly, I moved much faster.”
How they solved it
I'm spending too much time matching my Figma exactly.
Can you set up a reasonable spacing system and let's use that
instead of pixel-perfect values? I want consistent spacing
that looks good.Claude set up a spacing scale, and from there adjustments were simpler: “more padding” or “less space between these” rather than specific pixel values.
What They Learned
- Start simpler than you think — The first version doesn’t need every feature
- Reference real sites — “Make it feel like X” conveyed more than detailed specs
- Good enough ships — Perfection was the enemy of launching
- You can update it — The code is yours; iterate after launching
Prompting Insights
What worked:
- Referencing real websites for style direction
- Focusing on feeling (“editorial”, “minimal”) over technical details
- Asking for systems (spacing scale, color tokens) rather than one-off values
What didn’t work:
- Trying to specify every detail upfront
- Providing Figma measurements pixel-by-pixel
- Asking for too many features at once
Time Breakdown
| Phase | Time |
|---|---|
| Setup + basic structure | 30 min |
| Home page design | 45 min |
| Projects grid | 30 min |
| Project pages | 45 min |
| Dark mode + polish | 45 min |
| Deployment | 30 min |
| Total | ~4 hours |
See It
Link to portfolio would go here
Takeaway
“The biggest shift was realizing I didn’t need to understand the code to direct it. I described what I wanted like I would to a developer, and Claude figured out the implementation. My job was knowing what good looked like, not how to build it.”