portfolio

Starter

Appears as a one-click chip in the workspace.

Build a personal portfolio site for a designer, developer, writer, or creative — about, work/projects, contact. Use when the user asks for a portfolio, personal site, "for hire" site, or showcase site. Prefer scaffold-next for static-friendly multi-route output.

Scaffolds

Verified dependencies

framer-motion

lucide-react

clsx

Example prompts

Prompts this skill is written to handle. Copy one into the workspace to try it.

Build a portfolio site for a freelance designer

Make a developer portfolio with selected projects and an about

Design a photographer's portfolio with a gallery and case studies

Instructions

The full instruction set the agent receives when this skill is active.

Portfolio

A portfolio is judged in 5 seconds. The visitor decides "is this person serious?" before they read anything.

Structure (one page or multi-page; pick based on volume of work)

Single-page is best if there are < 6 projects:

Hero (name, role, one-line pitch)
Selected work (grid or stacked, with detail on hover or modal/route)
About (short, with a real face if the user has a photo)
Contact (email + 1-2 socials)

Multi-page if > 6 projects or detailed case studies:

/ home with hero + selected work tiles
/work full grid
/work/[slug] case study per project
/about
/contact

Project tiles

Each tile shows: 1 image, project title, role/year, 1-2 tag pills. That's it.
Use a real image. If there's none, use a colored block with the project name as type — beats a placeholder gradient.
Hover state should reveal one extra line max (e.g. "View case study →"). Don't pile on overlays.

Case study page

Hero with project title, role, year, client, link to live work (if public).
Sections: Brief / Approach / Outcome / Selected screens.
Long-form is fine. Visitors who reach this page want to read.

Voice

The about section is where personality lives. Help the user write 80-150 words in first person. Skip "passionate about" and "results-driven."

Avoid

Hero with the user's name in a giant centered serif on white, fade-in animation. Done to death.
Slack/GitHub/LinkedIn icon trios in 24px gray as the only personality cue.
Carousels of "skills" with percent-filled bars.

Implementation Notes

scaffold-next: case study content in content/work/*.md with gray-matter for frontmatter (title, year, role, tags, cover). Same pattern as [[blog]].
Use framer-motion for one staggered project-tile fade-in. Not on every hover.

See also: [[frontend-design]], [[blog]].