Build a Professional Portfolio
Plan a portfolio site you can actually build and share.
Most portfolios fail because they try to tell every story at once. This Cookbook splits the work into four tracks: lock your positioning, choose the projects that prove it, write each case study on a repeatable skeleton, then assemble a site brief a recruiter can scan in ninety seconds. Enter your real projects and career facts once; every step builds on the last until you leave with homepage copy, two case study drafts, a navigation plan, and a build brief for your platform of choice.
- Made for
- Designers, developers, and product people rebuilding a portfolio for their next role
- You leave with
- Positioning statement, prioritized case studies, homepage and case copy, navigation plan, and a build-ready site brief
- Time
- about 150 minutes
- Steps
- 14 guided steps
- Requires
- any AI you already use (a free chat account is usually enough); sample answers included where available
- Completed runs
- 428 (demo metric)
- Average rating
- 4.9 / 5 (demo metric)
Also in Recently Added Deep Workflows
Coming soon. This Cookbook is fully designed but not runnable in this build yet. Every stage, step, and check below is the real plan. Meanwhile, Launch Day Kit, Validate a SaaS Idea, and Plan a YouTube Video are ready to start.
Stages
4 stages in sequence-
13 steps
Position
Decide what you are selling before you pick a font.
-
24 steps
Select Projects
Choose the work that proves the positioning, not the work you like most.
-
34 steps
Write Cases
Draft homepage copy and two case studies on a shared structure.
-
43 steps
Assemble Site
Turn approved copy into navigation, build notes, and a recruiter scan test.
Step preview
14 steps · completed in orderStage 1: Position
-
1
Preview
Positioning Statement
Write the professional story every later Recipe quotes as ground truth.
Recruiters decide in seconds whether you fit the role they have open. A positioning statement that names your audience, proof, and honest limits keeps every case study from sounding like a different person wrote it.
- It names a specific hiring audience A recruiter reading this knows which team and problem you are aiming at, not "anyone who needs design."
- Proof points come from your real work Every claim ties back to projects or skills in your Pantry, not generic superlatives.
- Honest limits build trust The "do not claim" section admits what you are not selling, which makes the rest more believable.
Sample output
## Positioning statement Mira Chen is a product UX designer who turns messy operational workflows into calm, confident software for B2B teams that cannot afford a full design department. She works with seed-stage startups that have real revenue and real user pain, shipping research-backed flows in weeks, not quarters. Her portfolio shows the decisions behind the screens: what she learned, what she cut, and what changed for the people using it every day. ## The one-sentence version Mira Chen designs B2B product workflows that busy operators actually finish. ## Who she is for Hiring managers at seed-to-Series A B2B startups who need a senior IC designer without agency overhead. They care less about Dribbble polish and more about whether a designer can sit in a customer call on Tuesday and ship a better settings flow by Friday. ## Why she wins 1. **She starts with the workflow, not the mockup.** Every case study leads with the messy reality: who does what, where they get stuck, and what success looks like in their week. 2. **She ships in tight loops.** Three of her last four projects went from first research session to live UI in under six weeks, with documented tradeoffs at each gate. 3. **She speaks both languages.** Engineers get annotated flows and edge cases; executives get one-page before/after stories tied to activation or support load. 4. **Her work survives contact with production.** She has shipped in React and Rails codebases, not just Figma files that quietly rot in a shared drive. ## What she deliberately does not claim Mira does not do brand identity, marketing site illustration, or long-term design system stewardship as a primary offering. She is a product UX hire, not a full-service agency replacement.
-
2
Preview
Capability Inventory
Sort your skills into what you lead, what you contribute, and what you are still building.
Most portfolios list every tool ever touched. An inventory tied to your positioning shows depth where it matters and keeps you from overselling skills a technical interviewer will test.
- Skills map to target roles Each leading capability connects to at least one role you selected in the Pantry.
- Lead vs contribute is honest You can defend every "lead" skill in an interview without reaching for team credit.
- Gaps are named, not hidden Skills you are building appear separately from skills you would stake a project on.
-
3
Preview
Audience Targeting
Profile the hiring managers and teams your portfolio must convince.
The same project reads differently to a startup founder and an enterprise design director. Naming your primary and secondary audiences keeps later copy from trying to please everyone and pleasing no one.
- Primary audience is one person, not a category You can describe their week, their pressure, and what they scan for on a portfolio.
- Secondary audience is truly secondary You know which reader gets the default story and which gets a lighter thread.
- Scan priorities match your goal What they look for first (process, outcomes, visuals, code) aligns with your career goal.
Stage 2: Select Projects
-
4
Preview
Project Shortlist
Score your projects against positioning and pick the ones worth a full case study.
Three strong cases beat seven thin ones. This Recipe forces a ranked shortlist with explicit keep-cut reasons so you do not waste writing time on work that does not prove your story.
- Every keeper proves the positioning Each selected project supports a specific claim from your positioning statement.
- Cuts have honest reasons Projects you drop are named with a reason (NDA, weak outcome, off-story), not silently forgotten.
- Variety without sprawl The shortlist shows more than one skill or context without repeating the same story twice.
-
5
Preview
Case Study Priority
Decide which case gets the homepage spotlight and how deep each write-up goes.
Your best project should not be buried as case study three. Priority order drives homepage hero choice, navigation weight, and how much research detail each story earns.
- Hero case matches recruiter scan order The first case you write is the one your primary audience would click if they had time for only one.
- Depth tiers are explicit Each case is labeled flagship, standard, or light, with word-count or section targets.
- Order tells a career arc Reading cases in priority order shows growing scope or skill, not random chronology.
-
6
Preview
Skills Matrix
Map each prioritized project to the skills your target roles ask for.
Job descriptions are skill checklists. A matrix that links real project moments to each skill gives you quotable proof for cover letters, interviews, and homepage feature lines.
- Every target skill has a project anchor No skill row is empty; each points to a specific moment or deliverable in your work.
- No project carries the whole matrix alone Proof is distributed so one case is not doing all the heavy lifting.
- Role emphasis is visible Skills weighted for your primary target role are marked as lead proof, not buried equally.
-
7
Preview
Gap Analysis
Find proof holes in your portfolio story and decide how to fill or frame them.
Every candidate has gaps: missing metrics, NDAs, or junior-era work that does not fit the senior story. Naming gaps early lets you address them in copy or interviews instead of hoping nobody asks.
- Gaps tie to real job requirements Each gap references something target roles actually ask for, not imaginary perfection.
- Mitigations are actionable Every gap has a plan: reframe, add a sidebar, gather a metric, or acknowledge in interview.
- No fake projects invented Mitigations use honest framing of existing work, not fabricated case studies.
Stage 3: Write Cases
-
8
Preview
Homepage Copy
Draft the hero, proof strip, and call to action recruiters see first.
Most portfolio homepages open with a vague tagline and a grid of thumbnails. This Recipe writes a homepage that states your positioning, surfaces your best proof, and tells the reader where to click next.
- Hero states role and value in one glance A recruiter skimming for five seconds knows your title, audience, and strongest outcome.
- Proof strip uses real numbers or outcomes Metrics and results come from your Pantry projects, not placeholder praise.
- Contact matches your preference The primary call to action uses the contact method you chose in the Pantry.
-
9
Preview
Case Study Structure A
Write your flagship case study: context, challenge, process, outcome, reflection.
Flagship cases need room to breathe. Structure A is the long form: enough process to satisfy a design manager, enough outcome to satisfy a hiring founder, and a reflection that shows judgment.
- Challenge is a user or business problem The case opens with stakes for real people, not "the client wanted a redesign."
- Process shows decisions, not just screens At least two moments explain what you tried, cut, or changed based on evidence.
- Outcome is specific and attributed Results name a metric, behavior change, or shipped artifact you can defend.
-
10
Preview
Case Study Structure B
Write your second case on a tighter skeleton that complements the flagship.
Two cases that use the same long template feel repetitive. Structure B is shorter and angled to show a different skill or context so the portfolio reads as range, not copy-paste.
- Different angle from Structure A This case leads with a different skill, industry, or collaboration shape than your flagship.
- Shorter without feeling thin Sections are compressed but still include challenge, one process beat, and outcome.
- Cross-links feel natural A line or two connects this story to your positioning without repeating the homepage hero.
-
11
Preview
Professional Summary
Write the about section that connects your cases into one career narrative.
Case studies prove craft; the about section proves you as a colleague. This Recipe writes a summary that hiring managers can paste mentally into a team Slack channel after viewing your work.
- Sounds like you, not a template Voice matches your design tone and uses details only you would know.
- Bridges cases to career goal The summary explains why this body of work points toward the role you want next.
- No resume duplication It adds context and motivation, not a bullet list of every job title.
Stage 4: Assemble Site
-
12
Preview
Navigation Plan
Map pages, labels, and reading order for the full site.
Bad navigation hides good writing. This Recipe produces a sitemap with primary and footer links, case study order, and mobile considerations matched to how recruiters actually browse.
- Primary nav has five items or fewer Top-level choices are scannable; deeper pages live in sensible submenus or footers.
- Case order matches priority Navigation order reflects your case study priority, not alphabetical or chronological default.
- Contact is reachable from every page Your contact preference appears in header, footer, or persistent CTA without hunting.
-
13
Preview
Portfolio Implementation Brief
Turn approved copy into a build checklist for your chosen platform.
Writers finish and builders stall when there is no handoff. This Recipe outputs section-by-section build notes, asset lists, and platform-specific constraints so you or a developer can ship without re-deciding structure.
- Platform constraints are respected Build notes reference real limits of your chosen platform, not a generic custom site.
- Every page has a content source Each section maps to an approved Recipe artifact, not placeholder copy.
- Asset list is concrete Images, logos, and screenshots needed are named with suggested dimensions or formats.
-
14
Preview
Recruiter Scan Test
Simulate a ninety-second recruiter pass and fix whatever they would miss.
You are not the audience. This final Recipe walks through a timed scan: title clarity, proof visibility, case discoverability, and contact friction, with a punch list of fixes before you publish.
- Role and level clear in ten seconds A recruiter knows your title, seniority, and target role without scrolling.
- Best proof visible without clicking a case At least one outcome or testimonial appears on the homepage or proof strip.
- Punch list items are specific fixes Each issue names a page, element, and concrete change, not vague "improve UX."
Your information
12 details, answered once (preview)- Full name Spelled exactly as it should appear on your site and in your byline.
- Professional title The title you want hiring managers to remember, not every title you have ever held.
- Years of experience Whole years in roles relevant to the portfolio you are building.
- Target roles Pick the job titles you are actively pursuing. Recipes tune emphasis and vocabulary to these roles.
- Strongest skills One skill per line. These become proof points in your positioning and skills matrix.
- Career goal Two or three sentences on the kind of team, problem, and impact you want next.
- Project one Your strongest project: client or employer, your role, the problem, and one outcome number if you have it.
- Project two A second project that shows a different skill or industry, still tied to your target roles.
- Project three Optional third project. Include it even if rough; the shortlist Recipe decides whether it makes the cut.
- Design tone How the site should feel visually and verbally. Every copy Recipe writes in this voice.
- Portfolio platform Where you plan to build. The implementation brief Recipe respects platform constraints.
- Contact preference How you want recruiters to reach you. Homepage and navigation Recipes place this consistently.
Finished files
What you export when every step is approvedWhen this Cookbook ships, you export every approved step as numbered Markdown files plus a README. The step list above is that export list.
kit.htmlOffline HTML reader for every approved step01-positioning-statement.mdPositioning Statement02-capability-inventory.mdCapability Inventory03-audience-targeting.mdAudience Targeting04-project-shortlist.mdProject Shortlist05-case-study-priority.mdCase Study Priority06-skills-matrix.mdSkills Matrix07-gap-analysis.mdGap Analysis08-homepage-copy.mdHomepage Copy09-case-study-structure-a.mdCase Study Structure A10-case-study-structure-b.mdCase Study Structure B11-professional-summary.mdProfessional Summary12-navigation-plan.mdNavigation Plan13-portfolio-implementation-brief.mdPortfolio Implementation Brief14-recruiter-scan-test.mdRecruiter Scan TestREADME.mdManifest of what you approved