Portfolio index - single-page work record

The prompt that produced this. Re-run it to generate more in the same taste.

Aesthetic

quiet personal record - narrow measure, generous leading, hover-revealed structure, monochrome with per-project accent, motion as punctuation

Reference

single-page design-engineer portfolio, project + work + writing

Intent

let someone decide in one scroll whether this person can do the thing they need, without a single navigation choice standing between them and the work

Guardrails

always keep everything on one page - no section is worth a route, give each project a visual even when there is no media to show, let hover reveal structure rather than move the layout, keep the reading measure narrow regardless of viewport

never animate anything the reader did not initiate after first paint, hide contact details behind an interaction, let a project card grow taller than its neighbours on hover, use accent colour for anything but project identity

pnpm dlx shadcn@latest add http://localhost:3040/r/portfolio-index.json

Meta block and library type import stripped - this is what pastes cleanly elsewhere.

'use client'

import { PortfolioPage } from './portfolio-page'

export default function PortfolioIndex() {
  return (
    <main className="min-h-[100dvh] bg-background px-6 py-16 text-foreground">
      <div className="mx-auto w-full max-w-screen-sm">
        <PortfolioPage />
      </div>
    </main>
  )
}