Portfolio Presentation
Transform scattered work into compelling professional narrative.
Core Principle
A portfolio isn't a list of projects—it's a story about who you are and what you can do for the person viewing it.
Audience Analysis
Before curating, identify the viewer:
| Audience | Primary Interest | Time Available | Decision Criteria |
|---|---|---|---|
| Hiring Manager | Can you do the job? | 30-90 seconds initial | Relevant skills, growth |
| Technical Lead | How do you think? | 2-5 minutes deep dive | Problem-solving, code quality |
| Client | Can you solve my problem? | 1-2 minutes | Similar work, results |
| Collaborator | Would I enjoy working with you? | Variable | Process, communication |
| Academic | What's your contribution? | Thorough review | Rigor, originality |
Portfolio Structure
Homepage/Landing
code
[Hero: Your positioning statement] [Featured Work: 3-4 best pieces] [Brief About] [Contact/CTA]
Positioning Statement Formula:
code
I'm a [role] who [unique approach/specialty]. I help [audience] achieve [outcome] through [method].
Project Selection
The 3-5-7 Rule:
- •3 projects minimum (shows range)
- •5 projects optimal (depth + breadth)
- •7 projects maximum (avoid overwhelm)
Selection Criteria:
| Criterion | Weight | Question |
|---|---|---|
| Relevance | 30% | Does it match target opportunity? |
| Impact | 25% | Can I quantify results? |
| Craft | 20% | Does it showcase my best work? |
| Recency | 15% | Is it current enough? |
| Story | 10% | Is there a compelling narrative? |
Project Order
- •Lead with best fit (not necessarily best work)
- •Second strongest (captures attention)
- •Show range (different type/scale)
- •Personal/passion project (shows personality)
- •Stretch piece (aspirational direction)
Case Study Framework
Quick Format (Portfolio Card)
markdown
## [Project Name] **Role**: [Your specific role] **Timeline**: [Duration] **Team**: [Size/composition] [One compelling image] [2-3 sentence summary: Problem → Solution → Result] **Key Outcome**: [Single quantified result]
Standard Format (Project Page)
markdown
# [Project Name] ## Overview [Elevator pitch: What is it? Who's it for? Why does it matter?] ## The Challenge [Problem statement with context and stakes] ## My Role [Specific responsibilities and contributions] ## Process [Key phases with visuals] 1. Discovery/Research 2. Ideation/Strategy 3. Execution/Implementation 4. Iteration/Refinement ## Solution [What was built/created with visuals] ## Results [Quantified outcomes] - [Metric]: [Before] → [After] - [Metric]: [Improvement] ## Reflection [What I learned, what I'd do differently]
Deep Dive Format (Full Case Study)
See references/case-study-template.md
Narrative Patterns
The Transformation Arc
code
Status Quo → Disruption → Struggle → Insight → Resolution → New Normal
The Problem-Solution-Impact
code
[User] was struggling with [problem] We discovered [insight] So we built [solution] Which resulted in [impact]
The Process Story
code
We started by [research/discovery] Which revealed [key insight] Leading us to [design decision] Through [iteration], we arrived at [solution]
The Constraint Story
code
Given [constraints: time/budget/tech] We had to [creative approach] Which taught us [lesson] And delivered [outcome despite constraints]
Visual Presentation
Image Requirements
| Type | Purpose | Specs |
|---|---|---|
| Hero | First impression | 16:9 or 4:3, high-res |
| Process | Show thinking | Annotated, clear |
| Detail | Craft quality | Cropped, focused |
| Before/After | Show impact | Side-by-side |
| Context | Real-world use | In-situ photos |
Screenshot Best Practices
- •Show real data (anonymized if needed)
- •Browser chrome optional (clean vs. context)
- •Highlight key interactions
- •Include mobile views if responsive
- •Show states: empty, loading, populated, error
Video/Animation
When to use:
- •Complex interactions
- •Time-based experiences
- •Before/after transformations
- •Process documentation
Keep under 60 seconds for portfolio context.
Writing Guidelines
Headlines
❌ "E-commerce Website Redesign" ✅ "Increasing Conversion 40% Through Checkout Simplification"
Descriptions
❌ "I designed the UI and implemented the frontend" ✅ "Led design and development of checkout flow that reduced cart abandonment from 68% to 41%"
Quantification
| Weak | Strong |
|---|---|
| Improved performance | Reduced load time from 4.2s to 0.8s |
| Increased engagement | Grew DAU 3x over 6 months |
| Better user experience | NPS improved from 32 to 67 |
Voice
- •First person for personal sites ("I designed...")
- •First person plural for team work ("We discovered...")
- •Active voice always
- •Present tense for live work, past for completed
Format-Specific Guidance
Portfolio Website
See references/website-structure.md
PDF Portfolio
See references/pdf-portfolio.md
Presentation Deck
See references/deck-structure.md
Review Checklist
Content
- • Positioning statement is clear
- • Projects match target audience
- • Each project has quantified results
- • Story arc is compelling
- • Role/contribution is explicit
Visual
- • Images are high quality
- • Consistent visual style
- • Mobile-friendly (if web)
- • Load time acceptable
Technical
- • All links work
- • Contact info current
- • SEO basics covered (if web)
- • Analytics installed (if web)
Polish
- • Proofread for errors
- • Consistent formatting
- • Fresh eyes review
Related Skills
Complementary Skills (Use Together)
- •cv-resume-builder - Build a resume to accompany your portfolio
- •interview-preparation - Prepare to discuss portfolio projects in interviews
- •brand-guidelines - Create consistent visual identity across portfolio
Alternative Skills (Similar Purpose)
- •None - this is the primary portfolio presentation skill
Prerequisite Skills (Learn First)
- •None required - this is a standalone professional skill
References
- •
references/case-study-template.md- Full case study format - •
references/website-structure.md- Portfolio website architecture - •
references/pdf-portfolio.md- PDF portfolio best practices - •
references/deck-structure.md- Presentation deck format