What’s inside

One SKILL.md (the playbook) + one starter template. A preview:

Basalt Dev Portfolio

When to use

• You're a developer whose portfolio is a bare link list, a PDF résumé, or nothing — and recruiters or clients ask "show me what you built"
• Your current site lists technologies but not what you shipped, who it served, or what changed
• You want a single page that a hiring manager can scan in 60 seconds and a peer can dig into for an hour
• You have 3–8 projects worth showing and real code or demos to point at — not just course exercises
• You want a dark, calm, code-forward look without the neon "hacker" cliché

Workflow

1. Pick the projects (input: project history → output: 3–8 selected projects)
   Selection rule: shipped, used by someone, and you can explain your decisions. Write one line per project: what it is, who it's for, what changed. Cut anything you can't describe without hand-waving. One real shipped project beats six tutorial clones.
2. Write the outcome-first card (input: selected projects → output: project grid copy)
   Each card leads with an outcome headline ("Cut report time from 2 days to 20 minutes"), then 2 sentences on your role and the hard part, then stack tags, then links to a live demo and a repo. No card without a link to something real — a card with no link is a claim with no evidence.
3. Choose the proof snippets (input: repos / demos → output: 1–2 snippets per featured project)
   Pick short excerpts that show a decision: a tricky function, a config, a test — 10–25 lines, with a 2-sentence note on why this code matters. Never paste secrets, keys, tokens, or proprietary code you don't own or aren't allowed to share.
4. Compose the basalt palette (input: grid copy + snippets → output: site design spec)
   Basalt means near-black stone tones: backgrounds around #141416 to #1e1e22, text around #e8e8ea, one muted stone-gray accent, one restrained highlight for links and CTAs. Code blocks use the same palette. No gradients, no neon, no glow. Type: one sans for UI, one mono for code.
5. Build the page (input: design spec → output: publish-ready site)
   Order: name + one-line role, a 3-line bio including what you're looking for, the project grid, featured snippets, writing or talks if any, contact. Every link tested. Mobile: grid collapses to one column, snippets scroll horizontally, nothing overflows.

Output spec

• One-page or two-page site: intro, project grid (3–8 cards), featured snippets, contact
• Every project card: outcome headline, role + hard part, stack tags, live + repo links
• 1–2 annotated snippets per featured project (10–25 lines each), no secrets
• Basalt design spec: palette hex values, type pairing, card + code-block rules
• Link check: every outbound link tested; contact method that actually reaches you

Good vs. bad examples

Template preview

Basalt Dev Portfolio — Site Brief Template

One portfolio = one brief. Fill this in before building.

Person: {name}

One-line role: {…} Bio (3 lines, incl. what you're looking for): {…} Contact that actually reaches you: {…}

Project shortlist (3–8)

Project cards (one per project)

#### Card: {project name}

• Outcome headline: {…}
• My role + the hard part (2 sentences): {…}
• Stack tags: {…}
• Live demo: {URL} — tested: [ ]
• Repo: {URL} — tested: [ ]

Proof snippets (1–2 per featured project)

#### Snippet: {project} — {what it shows}

`{language} {10–25 lines — shows a decision, not a dump} `

Buy the full skill pack — $4.99 Pro — all 471 skills