# The Portfolio Generator Prompt

Copy everything in the fenced block below and paste it into a **Claude Code** or
**Codex** session that is open in the repository of the app you want to feature.
The agent will produce a single, self-contained portfolio entry — an anonymised,
interactive one-pager with hover tooltips, a "why I built this" description, and a
downloadable Markdown file — laid out exactly as this portfolio site expects.

When it's done, copy the generated `projects/<slug>/` folder into **this** repo
(`golfdaddy/V`), push, and the project appears on the site automatically.

> Before pasting: replace `__TOOL__` with either `claude-code` or `codex`
> depending on which agent you're running it in.

---

````text
You are helping me add one of my apps to my public portfolio. Study this
repository, then produce a SINGLE, SELF-CONTAINED portfolio entry for it.

GOAL
Create a folder `portfolio-entry/` in the repo root containing exactly these files:

  portfolio-entry/
  ├── project.json     # metadata (schema below)
  ├── demo.html        # a self-contained, interactive one-page version of the app
  ├── README.md        # the downloadable write-up
  └── screenshot.svg   # a simple vector preview (optional but preferred)

I will copy this folder into my portfolio repo, so it must be fully standalone.

=== HARD RULES ===

1. ANONYMISE EVERYTHING IDENTIFYING. The demo must contain NO real data, secrets,
   API keys, internal URLs, proprietary logic, or anything confidential.
   - Remove the names of specific companies, clients, people, and businesses —
     anything that identifies who the app was built for or about. Replace them
     with generic stand-ins (e.g. "Acme Co.", "a client", "Jordan R.").
   - EXCEPTION: it's fine to keep ubiquitous, publicly-known platforms and tools
     that every business uses — e.g. Google, OpenAI, Anthropic, AWS, GitHub,
     Slack, Stripe. These are generic infrastructure, not sensitive; stripping
     them just makes the demo confusing. (Still remove any real keys/tokens/IDs.)
   - Replace real data with realistic but obviously fake sample data.
   - Stub out any backend/API calls — the demo must run entirely in the browser
     with no network requests. If the real app needs a server, fake the responses
     with in-memory sample data so the interaction still feels real.
   - Do NOT copy proprietary algorithms; reproduce only the *interaction* and feel.

2. SELF-CONTAINED. `demo.html` must be ONE file: inline CSS and inline JS, no
   external scripts, no CDN links, no fonts to download, no build step. It must
   work by double-clicking the file or via GitHub Pages.

3. RESPONSIVE & TASTEFUL. Mobile-friendly. Support light and dark via
   `prefers-color-scheme`. Use system fonts. Keep it clean and minimal.

4. DESIGN — pick the right mode:
   - If the app ALREADY has a visual identity (its own colours, layout, components),
     PRESERVE it. Just anonymise the data, add the intro block (A) and tooltips (C),
     and make it self-contained. Do NOT re-skin a finished design.
   - If it's a NEW build, or has no real design yet, adopt the SHARED DESIGN SYSTEM
     below so it's on-brand from the start.
   Either way the portfolio frame (cards, badges, detail pages) provides the
   cohesion, and tooltips always follow the pattern in section C.

=== SHARED DESIGN SYSTEM (use for NEW builds, or when the app has no established look) ===

If an `about-me.md` profile is provided alongside this prompt, use its `accent`
value as --accent and match the voice/links it describes. Otherwise pick ONE
accent colour for this app and set it as --accent (that is the only value you
should change per app — e.g. a calm blue, green, violet, etc.).

  :root {
    --bg: #fbfaf8; --surface: #ffffff; --surface-2: #f4f2ee; --border: #e7e3dc;
    --text: #1c1a17; --soft: #5b554c; --faint: #8b8479;
    --accent: #d97757;                /* <-- choose one accent per app */
    --radius: 14px; --radius-sm: 9px;
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#14130f; --surface:#1d1b16; --surface-2:#24211b; --border:#322e26;
            --text:#f4f1ea; --soft:#c3bdb0; --faint:#8b8479;
            --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); }
  }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
         line-height: 1.5; -webkit-font-smoothing: antialiased; }

Conventions: cards/panels = `var(--surface)` + `1px solid var(--border)` +
`border-radius: var(--radius)` + `box-shadow: var(--shadow)`; primary actions use
`var(--accent)`; secondary text uses `var(--soft)`; hints use `var(--faint)`.
Centre the app in a `max-width: ~480–720px` column with generous padding.

=== demo.html REQUIREMENTS ===

A. HIGH-LEVEL DESCRIPTION AT THE TOP. Open with a short intro block:
   - a small kicker line (e.g. "Built with Claude Code" or "Built with Codex"),
   - the app's name as an <h1>,
   - 1–2 sentences on WHY it was built and WHAT problem it solves,
   - a line telling the visitor: "Hover any control to see what it does."

B. INTERACTIVE. Recreate the core, most impressive interaction of the real app
   so a visitor can actually use it (clicking, typing, toggling — live results).

   IF THE TOOL HAS NO REAL UI (it's a CLI, script, API, automation, agent, or
   backend-only thing): invent a tasteful one using the shared design system.
   Design the interface you would *expect* to use to drive it — inputs, buttons,
   and result panels — and wire it to a realistic MOCKED API in-memory so the
   interaction feels operational (e.g. a fake function that returns plausible
   sample responses with a short delay). The goal is to show, interactively, how
   someone would use the tool as if a live backend were running underneath.

C. TOOLTIPS ON EVERY COMPONENT. Every interactive element AND every key output
   gets a hover tooltip explaining what it does, in plain language. Implement
   tooltips in pure CSS using a `data-tip` attribute, like this:

     <button data-tip="What this control does">Click me</button>

     [data-tip] { position: relative; }
     [data-tip]::after {
       content: attr(data-tip);
       position: absolute; bottom: calc(100% + 8px); left: 50%;
       transform: translateX(-50%) translateY(4px);
       background: var(--text); color: var(--bg); font-size: 12px; line-height: 1.35;
       padding: 8px 11px; border-radius: 8px; width: max-content; max-width: 220px;
       opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
       text-align: center; z-index: 10; box-shadow: var(--shadow);
     }
     [data-tip]:hover::after, [data-tip]:focus-visible::after {
       opacity: 1; transform: translateX(-50%) translateY(0);
     }

   Make tooltips keyboard-accessible (add tabindex="0" to non-focusable elements
   that carry a tooltip).

D. FOOTER NOTE confirming "All data shown is sample data; nothing leaves your
   browser."

=== project.json SCHEMA ===

{
  "slug": "kebab-case-id",                // unique, url-safe
  "title": "Human Readable Title",
  "summary": "One sentence shown on the portfolio card.",
  "description": "2–4 sentences: why I built it and its purpose. Shown on the detail page.",
  "builtWith": "__TOOL__",                // "claude-code" or "codex"
  "tags": ["domain", "language", "..."],  // 2–5 short tags
  "date": "YYYY-MM-DD",                    // today's date
  "demo": "demo.html",
  "readme": "README.md",
  "screenshot": "screenshot.svg",
  "links": []                             // optional [{ "label": "Source", "url": "https://..." }]
}

=== README.md REQUIREMENTS ===

A clean Markdown write-up containing:
  - title and one-line summary,
  - "Why this exists" section,
  - a "What each part does" table mapping each component to its purpose,
  - "How it's built" (note that it's anonymised and self-contained),
  - a "Built with" line naming the agent.

=== screenshot.svg ===

A simple, hand-rolled SVG (~400×260) that visually previews the demo's layout
using boxes/labels. No external images. Used as the portfolio card thumbnail.

=== OUTPUT ===

Create all four files. Then print a short summary of what you anonymised and any
assumptions you made. Do not modify any other files in the repo.
````

---

## After the agent finishes

1. Rename the generated `portfolio-entry/` folder to your project's slug, e.g.
   `projects/my-cool-tool/`, and copy it into this repo under `projects/`.
2. Commit and push. The GitHub Action regenerates `projects/index.json` and
   redeploys — your project shows up on the site within a minute or two.
3. To preview locally first: run `node tools/build-manifest.mjs` then open
   `index.html` (or run a static server — see the repo `README.md`).