Avani Gala

Case study · avanigala.com

How I built my PM portfolio
with an AI-native workflow

I started with Webflow, hit a paywall, and decided to learn something new instead. Here's the full story of how I rebuilt my portfolio using Claude, Claude Code, GitHub, and Vercel — without writing a single line of code from scratch.

ClaudeClaude CodeGitHub ProjectsVercelNext.js · Tailwind

The origin story

It started with a $18/month surprise

Like many PMs building a portfolio for the first time, I started on Webflow. The drag-and-drop editor was fast, the templates looked polished, and I had something live within a weekend. Then the free plan trial ended.

"$18 a month to host a static website with no database, no dynamic content, no server — just HTML, CSS, and my case studies."

I did what any PM would do: I asked whether the pricing was justified by the value. It wasn't. The site was entirely static — no backend, no CMS, no real reason to pay for managed hosting. So I started researching alternatives.

Static site + free hosting = Claude Code + GitHub + Vercel. Total hosting cost: $0/month.

The workflow, step by step

01
Structuring the narrative with ClaudeClaude chat

Before touching any code or design tool, I used Claude to think through the structure. What kind of PM roles was I targeting? What should I lead with? How do you frame PM work without shipping metrics? Claude acted as a thinking partner — helping me work through positioning, case study structure, and copy.

Covered: portfolio positioning · what to include vs. omit · headline copy · how to frame impact without metrics · what recruiters look for in PM portfolios
02
Building the site with Claude CodeClaude Code

With a clear direction, I handed the build to Claude Code inside VS Code. I described the pages I needed — home, about, case studies, contact — and Claude generated the full Next.js codebase. When something looked off, I described the problem in plain English. Claude fixed it, made the change, ran verification, and committed automatically.

Stack: Next.js · Tailwind CSS · React · Initial commit: "Next.js portfolio site for Avani"
Claude Code · VS Code · update-home-page-tagline
Update(src/app/page.jsx) — Added 2 lines, removed 2 lines
42 -  Product Manager with
43 -  <em>0→1 experience</em> building
42 +  Product-focused builder with
43 +  <em>0→1 experience</em> creating
44     a premium wellness brand
Done. Hero tagline on src/app/page.jsx:42-44 updated.
✱ Crunched for 46s
Bash(git add ... && git commit) Committed. Pushed. 64faab7.
recap: Updated home page tagline per issue #7 and pushed to main.
03
Managing tasks like a PM — on GitHub ProjectsGitHub Projects

I didn't just build — I managed the project. I used GitHub Projects as a kanban board, filing issues for every change and moving cards as Claude Code completed them. It turned the portfolio build into a proper PM workflow: backlog refinement, priority tagging, in-progress tracking, and done reviews.

13 issues tracked · P0s: home page, about page, Saanvi Botanicals case study · P1: copyright, contact form
GitHub Projects · avanigala-dot-com · Backlog
Backlog3
Add images to About Page
Add missing images to Home Page
Create a Portfolio case study on avanigala.com
Ready3
Create UX design case study
Change Footer Title to Founder · Product Lead
Rotate image — Paper wireframes
In progress2
Update home page tag line
Update Hire Me page
Done5
Update Saanvi Botanicals Case Study
Update Home page
Update About Page
Update copyright to dynamic year
Fix contact us page
04
Shipping to production instantly with VercelVercel

I connected the GitHub repo to Vercel in a single click. Every push to main — whether from Claude Code or directly — triggered an automatic deploy. Builds took 17–29 seconds. The site at avanigala.com went live with HTTPS, a global CDN, and zero monthly cost.

9 production deployments in the first session · Each commit → deploy pipeline completes in under 30s · $0/month hosting
Vercel · avanigala-dot-com · Deployments
LCkSTmkLVCurrentReady · 19s
f1c2f4f Fix contact form to open email clientJust now
9J43gQt5EReady · 17s
64faab7 Update home page tagline #758m ago
HEwpKi7g4Ready · 19s
f43b24e Update Home page content #21h ago
7dACNEwzGBlocked
b218122 Add rounded corners throughout UIApr 30
AbzaaFgreReady · 29s
df5c549 Initial commit: Next.js portfolioApr 30

Reflection

What this actually felt like

The Webflow frustration turned out to be a forcing function. If I hadn't hit that paywall, I probably never would have learned this workflow. And the workflow itself changed how I think about building things: every task was an issue, every change was a commit, every deploy was instant. It felt less like "building a website" and more like shipping a product — which, as a PM, is exactly the story I wanted my portfolio to tell.

RoleProduct Manager
TypePersonal project
StackNext.js · Tailwind · Vercel
Hosting cost$0/month (was $18)
← All Case Studies