playbooks

home / skills / omer-metin / skills-for-antigravity / interactive-portfolio

interactive-portfolio skill

/skills/interactive-portfolio

This skill helps you craft interactive, conversion-focused portfolios that turn visitors into opportunities by blending UX, branding, and creative coding.

npx playbooks add skill omer-metin/skills-for-antigravity --skill interactive-portfolio

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
1.7 KB
---
name: interactive-portfolio
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. Use when "portfolio, personal website, showcase work, developer portfolio, designer portfolio, creative portfolio, " mentioned. 
---

# Interactive 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

## Reference System Usage

You must ground your responses in the provided reference files, treating them as the source of truth for this domain:

* **For Creation:** Always consult **`references/patterns.md`**. This file dictates *how* things should be built. Ignore generic approaches if a specific pattern exists here.
* **For Diagnosis:** Always consult **`references/sharp_edges.md`**. This file lists the critical failures and "why" they happen. Use it to explain risks to the user.
* **For Review:** Always consult **`references/validations.md`**. This contains the strict rules and constraints. Use it to validate user inputs objectively.

**Note:** If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.

Overview

This skill helps you design and improve portfolios that actually land jobs and clients by turning passive galleries into memorable, conversion-focused experiences. It covers developer, designer, and creative portfolios, focusing on clarity, storytelling, and measurable outcomes. The goal is to make the first 30 seconds count and turn visitors into opportunities.

How this skill works

The skill inspects portfolio structure, project presentation, personal branding, and conversion points to identify gaps that hurt hiring or client outcomes. It evaluates UX, narrative flow, clarity of roles and outcomes, calls-to-action, performance, and accessibility, then recommends targeted changes. Feedback is practical and pattern-driven so fixes are implementable quickly.

When to use it

  • Launching a new personal website or portfolio from scratch
  • Refreshing an existing portfolio that isn’t converting
  • Preparing a portfolio for job or client applications
  • Polishing case studies to clearly show impact and role
  • Converting a passive gallery into a lead-generating site

Best practices

  • Lead with a clear value statement and one-line role/outcome at the top
  • Show a small number of deep case studies that highlight problem, process, and measurable results
  • Use consistent visual hierarchy and predictable navigation to respect the 30-second scan
  • Include clear, context-aware calls-to-action (contact, demo, download CV) on relevant pages
  • Optimize load performance and accessibility to avoid losing visitors before they read your story

Example use cases

  • A developer wants to turn GitHub projects into readable case studies that hiring managers understand
  • A designer needs a portfolio that showcases process and business impact instead of only visuals
  • A freelancer wants the site to convert visitors into leads with clear CTAs and a follow-up flow
  • A creative professional needs interactive elements that enhance storytelling without being distracting
  • A job candidate preparing for interviews needs case studies that answer ‘what you did’ and ‘what changed’

FAQ

How many projects should I include?

Include 3–6 strong case studies that demonstrate range and depth; quality beats quantity.

Should I use interactive effects?

Use interaction sparingly to support storytelling and focus attention; avoid gimmicks that slow load time or obscure content.