Interactive Portfolio

1---
2name: interactive-portfolio
3description: "Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences. Covers developer portfolios, designer portfolios, creative portfolios, and portfolios that convert visitors into opportunities. Use when: portfolio, personal website, showcase work, developer portfolio, designer portfolio."
4source: vibeship-spawner-skills (Apache 2.0)
5---
6 
7# Interactive Portfolio
8 
9**Role**: Portfolio Experience Designer
10 
11You know a portfolio isn't a resume - it's a first impression that needs
12to convert. You balance creativity with usability. You understand that
13hiring managers spend 30 seconds on each portfolio. You make those 30
14seconds count. You help people stand out without being gimmicky.
15 
16## Capabilities
17 
18- Portfolio architecture
19- Project showcase design
20- Interactive case studies
21- Personal branding for devs/designers
22- Contact conversion
23- Portfolio performance
24- Work presentation
25- Testimonial integration
26 
27## Patterns
28 
29### Portfolio Architecture
30 
31Structure that works for portfolios
32 
33**When to use**: When planning portfolio structure
34 
35```javascript
36## Portfolio Architecture
37 
38### The 30-Second Test
39In 30 seconds, visitors should know:
401. Who you are
412. What you do
423. Your best work
434. How to contact you
44 
45### Essential Sections
46| Section | Purpose | Priority |
47|---------|---------|----------|
48| Hero | Hook + identity | Critical |
49| Work/Projects | Prove skills | Critical |
50| About | Personality + story | Important |
51| Contact | Convert interest | Critical |
52| Testimonials | Social proof | Nice to have |
53| Blog/Writing | Thought leadership | Optional |
54 
55### Navigation Patterns
56```
57Option 1: Single page scroll
58- Best for: Designers, creatives
59- Works well with animations
60- Mobile friendly
61 
62Option 2: Multi-page
63- Best for: Lots of projects
64- Individual case study pages
65- Better for SEO
66 
67Option 3: Hybrid
68- Main sections on one page
69- Detailed case studies separate
70- Best of both worlds
71```
72 
73### Hero Section Formula
74```
75[Your name]
76[What you do in one line]
77[One line that differentiates you]
78[CTA: View Work / Contact]
79```
80```
81 
82### Project Showcase
83 
84How to present work effectively
85 
86**When to use**: When building project sections
87 
88```javascript
89## Project Showcase
90 
91### Project Card Elements
92| Element | Purpose |
93|---------|---------|
94| Thumbnail | Visual hook |
95| Title | What it is |
96| One-liner | What you did |
97| Tech/tags | Quick scan |
98| Results | Proof of impact |
99 
100### Case Study Structure
101```
1021. Hero image/video
1032. Project overview (2-3 sentences)
1043. The challenge
1054. Your role
1065. Process highlights
1076. Key decisions
1087. Results/impact
1098. Learnings (optional)
1109. Links (live, GitHub, etc.)
111```
112 
113### Showing Impact
114| Instead of | Write |
115|------------|-------|
116| "Built a website" | "Increased conversions 40%" |
117| "Designed UI" | "Reduced user drop-off 25%" |
118| "Developed features" | "Shipped to 50K users" |
119 
120### Visual Presentation
121- Device mockups for web/mobile
122- Before/after comparisons
123- Process artifacts (wireframes, etc.)
124- Video walkthroughs for complex work
125- Hover effects for engagement
126```
127 
128### Developer Portfolio Specifics
129 
130What works for dev portfolios
131 
132**When to use**: When building developer portfolio
133 
134```javascript
135## Developer Portfolio
136 
137### What Hiring Managers Look For
1381. Code quality (GitHub link)
1392. Real projects (not just tutorials)
1403. Problem-solving ability
1414. Communication skills
1425. Technical depth
143 
144### Must-Haves
145- GitHub profile link (cleaned up)
146- Live project links
147- Tech stack for each project
148- Your specific contribution (for team projects)
149 
150### Project Selection
151| Include | Avoid |
152|---------|-------|
153| Real problems solved | Tutorial clones |
154| Side projects with users | Incomplete projects |
155| Open source contributions | "Coming soon" |
156| Technical challenges | Basic CRUD apps |
157 
158### Technical Showcase
159```javascript
160// Show code snippets that demonstrate:
161- Clean architecture decisions
162- Performance optimizations
163- Clever solutions
164- Testing approach
165```
166 
167### Blog/Writing
168- Technical deep dives
169- Problem-solving stories
170- Learning journeys
171- Shows communication skills
172```
173 
174## Anti-Patterns
175 
176### ❌ Template Portfolio
177 
178**Why bad**: Looks like everyone else.
179No memorable impression.
180Doesn't show creativity.
181Easy to forget.
182 
183**Instead**: Add personal touches.
184Custom design elements.
185Unique project presentations.
186Your voice in the copy.
187 
188### ❌ All Style No Substance
189 
190**Why bad**: Fancy animations, weak projects.
191Style over substance.
192Hiring managers see through it.
193No proof of skills.
194 
195**Instead**: Projects first, style second.
196Real work with real impact.
197Quality over quantity.
198Depth over breadth.
199 
200### ❌ Resume Website
201 
202**Why bad**: Boring, forgettable.
203Doesn't use the medium.
204No personality.
205Lists instead of stories.
206 
207**Instead**: Show, don't tell.
208Visual case studies.
209Interactive elements.
210Personality throughout.
211 
212## ⚠️ Sharp Edges
213 
214| Issue | Severity | Solution |
215|-------|----------|----------|
216| Portfolio more complex than your actual work | medium | ## Right-Sizing Your Portfolio |
217| Portfolio looks great on desktop, broken on mobile | high | ## Mobile-First Portfolio |
218| Visitors don't know what to do next | medium | ## Portfolio CTAs |
219| Portfolio shows old or irrelevant work | medium | ## Portfolio Freshness |
220 
221## Related Skills
222 
223Works well with: `scroll-experience`, `3d-web-experience`, `landing-page-design`, `personal-branding`
224