---
name: kinetic-type-portfolio
description: A type-driven portfolio with scroll-linked word motion and a project index that feels like a magazine. Use when the user asks for portfolio or similar.
---

# Kinetic Type Portfolio

Creates a Next-ready portfolio with variable-font hero, scroll-linked word reveals, an indexed project list with hover previews and a restrained contact footer.

## When to use

- Designers and art directors
- Case-study heavy work
- Personal brands

## Workflow

1. Ask for name, discipline, 3-6 projects and brand colors.
2. Pick a variable display font; build the hero with weight/width axes animating on scroll.
3. Generate the project index with keyboard-accessible hover previews.
4. Respect prefers-reduced-motion throughout.
5. Ship with Lighthouse targets: Perf ≥ 90, A11y ≥ 95.

## What you deliver

- React + Tailwind portfolio
- Scroll-linked type animations (reduced-motion safe)
- Project index with hover previews

## Not for

- Photography-first portfolios
- Sites needing a CMS
- Legacy browsers

## Quality bar

- State assumptions you made and ask before overwriting existing files.
- Never invent facts, numbers, logos or quotes — use placeholders and say so.
- Follow `references/style-guide.md` for colour and type decisions.
- Finish with a short checklist of what the user should review or replace.