# Portfolio

> Personal or studio portfolio — bold typographic intro, project grid, case-study links, contact.

- Skill: `jhd3197/portfolio` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jhd3197/portfolio`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jhd3197/portfolio/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jhd3197 (https://skillmd.com/u/jhd3197)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jhd3197/portfolio

---


# Portfolio site

A personal or studio site whose job is to make the visitor say "I want to work with this person."

## Required surfaces

1. **Slim nav** — name/wordmark, 3-4 links (Work / About / Writing / Contact).
2. **Intro** — large typographic statement (clamp() display size). One sentence of who-what-for, plus a thin metadata strip (location, availability, current role).
3. **Project grid** — 4-9 case-study cards. Each card: cover image / colored block, project title, one-line role, year. Hover state lifts subtly. Click goes to a (mocked) case-study URL.
4. **About** — short bio paragraph + photo OR signature mark.
5. **Selected clients / press** — restrained logo strip OR list. Skip the section entirely if there isn't real material.
6. **Contact** — email (mailto), maybe Twitter/LinkedIn, calendar booking link.

## Quality rules
- One decisive type voice. If display is serif, body is sans (or vice versa).
- Project cards: real names + roles. Use labelled placeholders ("[Cover image — replace with hero shot]") not Lorem ipsum titles.
- No carousels. No parallax. No autoplay video.
- Empty / "more soon" states are honest. Don't pad the grid with fake projects.