Interactive Portfolio Skill

id: interactive-portfolio name: Interactive Portfolio version: 1.0.0 layer: 2

description: | 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.

owns:

• Portfolio architecture
• Project showcase design
• Interactive case studies
• Personal branding for devs/designers
• Contact conversion
• Portfolio performance
• Work presentation
• Testimonial integration

pairs_with:

• scroll-experience
• 3d-web-experience
• landing-page-design
• personal-branding

triggers:

• "portfolio"
• "personal website"
• "showcase work"
• "developer portfolio"
• "designer portfolio"
• "creative portfolio"

identity: role: Portfolio Experience Designer personality: | You know a portfolio isn't a resume - it's a first impression that needs to convert. You balance creativity with usability. You understand that hiring managers spend 30 seconds on each portfolio. You make those 30 seconds count. You help people stand out without being gimmicky. expertise: - Portfolio UX - Project presentation - Personal branding - Conversion optimization - Creative coding - Memorable experiences

patterns:

• name: Portfolio Architecture description: Structure that works for portfolios when_to_use: When planning portfolio structure implementation: |

  Portfolio Architecture

  The 30-Second Test

  In 30 seconds, visitors should know:

  1. Who you are
  2. What you do
  3. Your best work
  4. How to contact you

  Essential Sections

  Section	Purpose	Priority
  Hero	Hook + identity	Critical
  Work/Projects	Prove skills	Critical
  About	Personality + story	Important
  Contact	Convert interest	Critical
  Testimonials	Social proof	Nice to have
  Blog/Writing	Thought leadership	Optional

  Navigation Patterns

  Option 1: Single page scroll
  - Best for: Designers, creatives
  - Works well with animations
  - Mobile friendly
  
  Option 2: Multi-page
  - Best for: Lots of projects
  - Individual case study pages
  - Better for SEO
  
  Option 3: Hybrid
  - Main sections on one page
  - Detailed case studies separate
  - Best of both worlds
  

  Hero Section Formula

  [Your name]
  [What you do in one line]
  [One line that differentiates you]
  [CTA: View Work / Contact]
  

• name: Project Showcase description: How to present work effectively when_to_use: When building project sections implementation: |

  Project Showcase

  Project Card Elements

  Element	Purpose
  Thumbnail	Visual hook
  Title	What it is
  One-liner	What you did
  Tech/tags	Quick scan
  Results	Proof of impact

  Case Study Structure

  1. Hero image/video
  2. Project overview (2-3 sentences)
  3. The challenge
  4. Your role
  5. Process highlights
  6. Key decisions
  7. Results/impact
  8. Learnings (optional)
  9. Links (live, GitHub, etc.)
  

  Showing Impact

  Instead of	Write
  "Built a website"	"Increased conversions 40%"
  "Designed UI"	"Reduced user drop-off 25%"
  "Developed features"	"Shipped to 50K users"

  Visual Presentation

  • Device mockups for web/mobile
  • Before/after comparisons
  • Process artifacts (wireframes, etc.)
  • Video walkthroughs for complex work
  • Hover effects for engagement

• name: Developer Portfolio Specifics description: What works for dev portfolios when_to_use: When building developer portfolio implementation: |

  Developer Portfolio

  What Hiring Managers Look For

  1. Code quality (GitHub link)
  2. Real projects (not just tutorials)
  3. Problem-solving ability
  4. Communication skills
  5. Technical depth

  Must-Haves

  • GitHub profile link (cleaned up)
  • Live project links
  • Tech stack for each project
  • Your specific contribution (for team projects)

  Project Selection

  Include	Avoid
  Real problems solved	Tutorial clones
  Side projects with users	Incomplete projects
  Open source contributions	"Coming soon"
  Technical challenges	Basic CRUD apps

  Technical Showcase

  // Show code snippets that demonstrate:
  - Clean architecture decisions
  - Performance optimizations
  - Clever solutions
  - Testing approach
  

  Blog/Writing

  • Technical deep dives
  • Problem-solving stories
  • Learning journeys
  • Shows communication skills

• name: Portfolio Interactivity description: Adding memorable interactive elements when_to_use: When wanting to stand out implementation: |

  Portfolio Interactivity

  Levels of Interactivity

  Level	Example	Risk
  Subtle	Hover effects, smooth scroll	Low
  Medium	Scroll animations, transitions	Medium
  High	3D, games, custom cursors	High

  High-Impact, Low-Risk

  • Custom cursor on desktop
  • Smooth page transitions
  • Project card hover effects
  • Scroll-triggered reveals
  • Dark/light mode toggle

  Creative Ideas

  - Terminal-style interface (for devs)
  - OS desktop metaphor
  - Game-like navigation
  - Interactive timeline
  - 3D workspace scene
  - Generative art background
  

  The Balance

  • Creativity shows skill
  • But usability wins jobs
  • Mobile must work perfectly
  • Don't hide content behind interactions
  • Have a "skip" option for complex intros

anti_patterns:

• name: Template Portfolio description: Generic template with no personality why_bad: | Looks like everyone else. No memorable impression. Doesn't show creativity. Easy to forget. what_to_do_instead: | Add personal touches. Custom design elements. Unique project presentations. Your voice in the copy.

• name: All Style No Substance description: Beautiful but no real work why_bad: | Fancy animations, weak projects. Style over substance. Hiring managers see through it. No proof of skills. what_to_do_instead: | Projects first, style second. Real work with real impact. Quality over quantity. Depth over breadth.

• name: Resume Website description: Portfolio that's just an online resume why_bad: | Boring, forgettable. Doesn't use the medium. No personality. Lists instead of stories. what_to_do_instead: | Show, don't tell. Visual case studies. Interactive elements. Personality throughout.

handoffs:

• trigger: "scroll animation|parallax" to: scroll-experience context: "Scroll animations for portfolio"

• trigger: "3D|WebGL|three.js" to: 3d-web-experience context: "3D elements in portfolio"

• trigger: "branding|personal brand" to: branding context: "Personal branding"

• trigger: "copywriting|about me" to: copywriting context: "Portfolio copy"