A complete walkthrough of how I used Claude to build a multi-page interactive portfolio site — and how you can too.
Before opening Claude, collect everything you want to showcase: your resume (PDF or text), 3-5 bullet points about your career story, any metrics or accomplishments, certifications, and a sense of what roles you're targeting.
5-10 min Google Docs / Notes appChoose 2-3 brand colors, a heading font, and a body font. I used pink (#F2A7BB), sage (#84B59F), Space Grotesk for headings, and DM Sans for body text. Sites like Coolors.co and Google Fonts make this easy.
Coolors.co Google Fonts Pick colors that feel like YOUOpen Claude and paste the prompt (below). Feed it your resume and brand details. Ask for a single-file HTML homepage with your intro, key stats, career highlights, and navigation to sub-pages. Claude will generate the full code.
Claude (Cowork or claude.ai) Start simple, iterate laterAsk Claude to create each additional page: a visual resume deck, career narrative, job search strategy, "why me" brief, or an application tracker. Each page should be a single self-contained HTML file that matches your brand.
One page per conversation Reference your color palette each timeOnce the pages exist, ask Claude to add animations, scroll effects, interactive charts, hover states, and mobile responsiveness. This is where your site goes from "nice" to "wow." Ask for specific features you've seen on sites you admire.
Chart.js for data viz Show, don't just tellCreate a free Netlify account. Drag and drop your HTML files into the Netlify dashboard — your site is live in seconds with a free netlify.app URL. No credit card required.
Netlify (free tier) Live in under 60 secondsPurchase a domain like yourname.com from Namecheap (~$9–12/year). Then in Netlify go to Domain Settings → Add Custom Domain, and update your nameservers to point to Netlify. Takes about 10 minutes and makes your site look professional and memorable.
Namecheap (~$9–12/yr) Netlify Domain Settings yourname.com = credibilityConnect Claude to your Gmail and set up a recurring task to scan for new job applications and update your tracker automatically. Your portfolio becomes a living, breathing document that stays current without manual work.
Claude Cowork + Gmail Set it and forget itAnimated hero, key stats, navigation hub
Slide-style interactive career overview
Chapter-based narrative with metrics
Strategic roadmap with phases
Candidate value proposition
Auto-updating application dashboard
Copy, customize the bracketed sections, and paste into Claude.
I want you to build me a personal portfolio website as a single-page HTML file. Here are my details: NAME: [Your Full Name] TITLE: [Your current/target title, e.g. "Senior Program Manager"] TAGLINE: [A one-line pitch, e.g. "10+ years turning complexity into clarity"] BRAND COLORS: - Primary: [hex code, e.g. #F2A7BB] - Secondary: [hex code, e.g. #84B59F] - Dark: [hex code, e.g. #2B3040] - Background: [hex code, e.g. #FAFBFC] FONTS (from Google Fonts): - Headings: [e.g. Space Grotesk] - Body: [e.g. DM Sans] KEY STATS (pick 3-4): - [e.g. "10+ Years Experience"] - [e.g. "150+ Projects Delivered"] - [e.g. "$50M+ Portfolio Managed"] - [e.g. "PMP, CSM Certified"] RESUME HIGHLIGHTS: [Paste your resume text or 5-10 bullet points about your career] PAGES I WANT (as linked HTML files): - Homepage (build this one now) - [e.g. Visual Resume Deck] - [e.g. Career Story] - [e.g. Job Search Tracker] Requirements: - Single self-contained HTML file (CSS + JS inline) - Mobile responsive - Smooth scroll animations - Animated stat counters - Professional and modern design - Include navigation links to the other pages (even if they don't exist yet) - Use Google Fonts CDN for the fonts specified above After building, also walk me through: 1. Deploying to Netlify (free) via drag-and-drop 2. Buying a custom domain from Namecheap (~$9–12/year) 3. Connecting the domain to Netlify (nameserver setup) == BONUS: AUTO-UPDATE TRACKER FROM EMAIL == Once my tracker page is built, I want to keep it updated automatically. I use Claude Cowork with Gmail connected. Here's how I want it to work: When I say "refresh tracker," you should: 1. Search my Gmail for job application confirmation emails (from ATS platforms like Greenhouse, Lever, Ashby, Workday, iCIMS, SuccessFactors, SmartRecruiters, as well as direct company emails) 2. Search for rejection/status update emails too 3. Cross-reference findings against my existing tracker entries 4. Add new applications and update statuses (Applied → Rejected, etc.) 5. Deploy the updated file to my hosting Search broadly — companies use many different email systems. Look for: - Subjects containing: "application", "thank you for applying", "received", "candidacy", "move forward", "not selected", "next steps" - Senders: no-reply, noreply, careers, recruiting, talent, greenhouse, lever, ashby, workday, myworkday, adp, successfactors, figma, etc. - Also check for recruiter/staffing agency emails (contract roles)
I want to build a multi-page personal portfolio website using Claude. I have zero coding experience. Please guide me through the entire process and build the files for me.
== MY INFORMATION ==
NAME: [Your Full Name]
TITLE: [Your current/target title]
EMAIL: [Your email]
LINKEDIN: [Your LinkedIn URL]
== MY BRAND ==
Color Palette:
- Primary: [hex, e.g. #F2A7BB]
- Secondary: [hex, e.g. #84B59F]
- Accent: [hex, e.g. #A7C4BC]
- Dark: [hex, e.g. #2B3040]
- Light BG: [hex, e.g. #FAFBFC]
Fonts (Google Fonts):
- Headings: [e.g. Space Grotesk]
- Body: [e.g. DM Sans]
== MY CAREER ==
[Paste your full resume here, or describe your background in detail. Include: years of experience, key companies, biggest accomplishments with numbers, certifications, education, and what makes you unique.]
== PAGES I WANT ==
Please build these as separate HTML files that link to each other:
1. HOMEPAGE (index.html)
- Hero section with my name, title, and tagline
- Animated stat counters (years of experience, projects, etc.)
- Career highlights preview
- Navigation to all other pages
- Professional headshot placeholder
- Smooth scroll and entrance animations
2. VISUAL RESUME (resume_deck.html)
- Slide-style layout (not a boring document)
- Timeline of my career
- Key metrics and accomplishments
- Skills and certifications
- Keyboard navigation between slides
3. CAREER STORY (career_story.html)
- Chapter-based narrative format
- Reading progress bar
- Expandable sections
- Metrics highlighted in callout boxes
4. JOB SEARCH TRACKER (tracker.html)
- Dashboard with charts showing application stats
- Table view of all applications
- Filter by status, date, company
- Use Chart.js for visualizations
- Data stored in a JavaScript array (I'll update it manually or with Claude)
== TECHNICAL REQUIREMENTS ==
- Each page must be a SINGLE self-contained HTML file (all CSS and JS inline)
- Mobile responsive (works on phone, tablet, desktop)
- Use Google Fonts CDN and Chart.js CDN (no other external dependencies)
- Smooth animations and transitions
- Accessible (proper contrast, semantic HTML)
- Fast loading (no heavy frameworks)
== DEPLOYMENT & DOMAIN GUIDE ==
After building the files, please also explain:
1. How to create a free Netlify account and drag-and-drop deploy
2. How to buy a custom domain (e.g. yourname.com) from Namecheap
(~$9–12/year) — walk me through the purchase step by step
3. How to connect my Namecheap domain to Netlify (DNS/nameserver setup)
4. How to update the site when I make changes
== EMAIL-POWERED TRACKER UPDATES ==
I want my job tracker to stay current by pulling from my email.
I use Claude Cowork with Gmail connected.
When I say "refresh tracker," you should:
1. Search my Gmail for new application confirmation emails since the
last tracker entry date
2. Use BROAD search queries across multiple ATS platforms:
- Greenhouse, Lever, Ashby, Workday, iCIMS, SuccessFactors,
SmartRecruiters, ADP, Jobvite, BrassRing, Taleo
- Direct company career emails (e.g., careers@company.com)
- Staffing agencies and recruiters (contract/contingent roles)
3. Also search for status updates: rejections, interview invites,
next steps, offers
4. Cross-reference every finding against my existing tracker to
avoid duplicates
5. Add new entries and update statuses (Applied → Rejected, etc.)
6. Update the entry count and deploy to my live site
Search subjects for: "application", "thank you for applying",
"received", "candidacy", "move forward", "not selected", "interest"
Search senders: no-reply, noreply, careers, recruiting, talent,
greenhouse, lever, ashby, workday, myworkday, adp, figma, etc.
== ITERATION TIPS ==
After the first version, I might ask you to:
- Add more animations or interactive features
- Create additional pages
- Update content or fix styling
- Set up a scheduled auto-refresh for the tracker
Please start by building the homepage (index.html). Make it stunning.