Thays Pritchard - Senior Product Manager

The Use Case

A few weeks ago, I decided to build a professional portfolio website. Not with Squarespace or Wix — I wanted something custom, something that would actually showcase AI prototypes I'd built. There was just one problem: I don't know how to code.

Ten hours and about $96 later, I have a live site at www.thayspritchard.com — complete with animated sections, interactive skill tabs, a mobile hamburger menu, and automatic deployments whenever I push changes.

The Challenge

I needed a professional portfolio site to showcase my PM skills and AI prototypes.
I didn't know how to code.
I wanted something custom — not a generic template.
Budget: minimal (free tools where possible).

The Toolkit

Claude — The Strategist

My AI co-pilot for the entire project. Claude explained concepts I didn't understand, gave me step-by-step terminal commands, troubleshooted errors when builds failed, and walked me through connecting my domain to Vercel screen-by-screen. Think of it as having a patient senior developer on call 24/7.

Cost: $22/month (already subscribed)

Cursor — The Code Writer

An AI-powered code editor where I describe what I want in plain English — "add a hamburger menu on mobile" or "make the skills section interactive" — and it generates the actual code. I never wrote a line manually.

Cost: $22/month

Vercel — The Publisher

Free hosting that connects to GitHub. Every time I push code, Vercel automatically rebuilds and deploys my site — usually in about 60 seconds. No server configuration, no FTP, no complexity.

Cost: Free

Cloudflare — The Domain

Where I registered thayspritchard.com. Cloudflare sells domains at wholesale prices with free WHOIS privacy. Connecting it to Vercel required adding some DNS records, which Claude walked me through.

Cost: $52 for 5 years

What Surprised Me

The first homepage took maybe two hours, including installing Node.js and figuring out where Cursor's AI chat panel was hidden (it's Cmd+L). By the end of day one, I had a live URL I could share.

The process felt surprisingly iterative. Describe something to Cursor, see if it works, ask Claude when it breaks, try again. The back-and-forth felt natural — like working with a very patient collaborator who never gets frustrated.

The Hard Parts

Mobile responsiveness was the biggest time sink. Hero image cropping, hamburger navigation, full-width sections — each took multiple attempts.

DNS configuration felt intimidating — A records? CNAMEs? — but Claude walked me through it screen by screen. Twenty minutes of confusion, then it just worked.

What I'd Do Differently

Design mobile-first. Most of my rework came from building for desktop and retrofitting for smaller screens.

Keep prompts short. Asking Cursor for one thing at a time produced more reliable results than long, multi-section requests.

The Prompts That Built It

The magic wasn't in writing code — it was in describing what I wanted clearly. Here are the actual prompts I used at key moments:

THE STARTER — Your First Homepage

This was the very first prompt I gave Cursor after creating my project. It built the entire homepage structure in one go.

Please replace the contents of app/page.tsx with a professional portfolio homepage for a Senior Product Manager named Thays Pritchard. Include: a hero section with my name and title, a short bio about being an experienced PM with Agile expertise who builds AI-powered prototypes, 4 prototype cards (PRD Generator, User Interview Analyzer, Feature Prioritization Assistant, AI Roadmap Planner), and a contact section. Use Tailwind CSS with a purple and white color scheme. Make it look modern and professional.

ADDING STRUCTURE — Navigation & Pages

Once the homepage existed, I needed to add multiple pages. This prompt created the full site architecture.

Please update my portfolio to add navigation with 4 pages: About, Prototypes, Case Studies, and Resume. Create a navigation bar at the top of the homepage with links to each page. Create separate pages for each section: app/about/page.tsx, app/prototypes/page.tsx, app/case-studies/page.tsx, and app/resume/page.tsx. Add placeholder content to each page that matches the purple and white color scheme. Make the navigation look clean and professional.

ADDING INTERACTIVITY — Tabbed Skills Section

I wanted something that felt dynamic, not just static text. This prompt created clickable tabs that show different skill categories.

Replace the skills section in app/resume/page.tsx with a clean interactive tabbed skills section titled 'My Skills'. Display 5 tab buttons: Product & Strategy, Automation & Tech, AI Tools, Leadership & Collaboration, Languages. When a tab is clicked, the bullet points for that category animate in below. First tab is active by default. Active tab should be filled with accent color, others are outline style. Use React useState for the interaction.

FIXING MOBILE — Responsive Layout

The site looked great on desktop but broken on phones. This prompt tackled multiple mobile issues at once.

Fix mobile layout issues across the entire site. NAVIGATION: Convert to hamburger menu on mobile — hide nav links, show hamburger icon, open full-screen overlay when tapped. HERO IMAGE: Make full viewport width on mobile, use object-cover, position so the person appears on the right side of the frame. GLOBAL: On mobile, content should be full-width with small padding. Apply these fixes to ALL pages.

QUICK FIXES — Single-Purpose Prompts

I learned that shorter, focused prompts worked better than long ones.

Add Resume to the navigation bar between AI Projects and the email icon. Update the header text to say 'Where Product Meets AI' with subtext 'These aren't just prototypes — they're proof of concept.' Shorten the typewriter animation delay from 100ms to 50ms so it feels snappier.

What Made Prompts Work

Be specific about file names (app/page.tsx, not "the homepage").
Describe the visual outcome, not just the feature ("purple accent color" not "make it pretty").
One thing at a time worked better than mega-prompts.
When something broke, I'd paste the error message and ask Claude to explain it.

Results

Built and deployed in ~10 hours total.
$10/year total cost (just the domain).
Fully responsive on mobile and desktop.
Custom design, not a template.