# interactive-portfolio

A skill that shapes a personal portfolio so a visitor gets who you are and what you do within seconds. Aimed at developers and designers.

- skill · `type=skill` · Claude Code · 608 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/interactive-portfolio
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/interactive-portfolio

## What it does

The skill walks you through portfolio structure: a hero block, a work section, an about page, contact details. It spells out what belongs in the first thirty seconds of a visit and which sections matter most. Each project gets a card with a thumbnail, a one-line note on your role, tech tags and an outcome.

Developer and designer tracks are separate. For developers it pushes a cleaned-up GitHub link, live demos and your own contribution on team work, and it steers you away from tutorial clones toward problems real users had. Designers get guidance on case studies that show process instead of finished screens alone.

A section on anti-patterns covers the template look, flashy animation over thin projects, and a portfolio that is just a resume in disguise. A sharp-edges table flags things like a site more elaborate than the work it shows, or one that holds up on desktop and breaks on a phone. Installation drops a `SKILL.md` file into your skills directory; no API keys or extra libraries are involved.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill creative-design/interactive-portfolio
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill interactive-portfolio -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/interactive-portfolio/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/interactive-portfolio/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/interactive-portfolio/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/interactive-portfolio/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates interactive-portfolio
```

2. **Manually: put the files in place**
- File: `.github/skills/interactive-portfolio/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/interactive-portfolio
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/interactive-portfolio/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/interactive-portfolio

## When to use it
- lay out a personal site with project pages
- write a case study that shows your own role
- decide which projects to keep and which to cut
- add a call to action and contact details
- check the portfolio on a phone

## Example prompts
- Help me plan the structure of a developer portfolio
- Rewrite this project description so my contribution stands out
- What should I cut so my portfolio doesn't look like a template?

## Similar
- [editorial-portfolio-chapters](https://affpapa.org/en/nevibecode/skills/editorial-portfolio-chapters.md) — skill · 1400 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/nexu-io-design-taste-frontend.md) — skill · 808 installs
- [gmgn-portfolio](https://affpapa.org/en/nevibecode/skills/gmgn-portfolio.md) — skill · 17600 installs
- [okx-cex-portfolio](https://affpapa.org/en/nevibecode/skills/okx-cex-portfolio.md) — skill · 10100 installs
- [portfolio-case-study-writer](https://affpapa.org/en/nevibecode/skills/portfolio-case-study-writer.md) — skill · 9700 installs
- [emblem-portfolio-tracker](https://affpapa.org/en/nevibecode/skills/emblem-portfolio-tracker.md) — skill · 8900 installs

## Other versions with the same name
- [interactive-portfolio · sickn33](https://affpapa.org/en/nevibecode/skills/sickn33-interactive-portfolio.md) — 1500 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md