# Portfolio in a Box

A static portfolio starter with a **voice baked in** and the **identity swappable**.
No framework, no build step, no `node_modules` — HTML, one CSS file, and your words.
Lifted from [brokenbranch.dev](https://brokenbranch.dev). Taste as a starting point, not a cage.

## What's here

```
starter/
├── tokens.css     the whole look in one file — edit the IDENTITY block at the top
├── index.html     home page template
├── essay.html     essay / writing template
├── llms.txt       discovery file for AI agents (edit the facts)
└── humans.txt     the humanstxt.org credit file (edit your details)
```

## Make it yours in three passes

1. **Skin it.** Open `tokens.css`. Everything you need is in the `IDENTITY — EDIT THIS`
   block at the top: three text tones, two darks, one accent (`--color-ember` — change
   this first), and the fonts. Change those values and the whole site follows. If you
   change the font families, update the `@import` URL just above the block to match.

2. **Fill it.** Rewrite the copy in `index.html` and `essay.html` in your own voice.
   Look for the `░░ EDIT ░░` markers. Put your one true line in the hero; the `lit` word
   is the one your reader remembers — use it sparingly.

3. **Wire your facts.** Edit `llms.txt` and `humans.txt` with your name, role, and links.
   These make humans *and* AI crawlers read your work correctly.

## Ship it (five steps)

1. **Buy a domain** (~$10/yr) — a `.dev`, `.io`, or `.com` that fits you.
2. **Put this in a GitHub repo** — public is fine for a static site (View Source already
   shows the code); go private only if you later add API keys.
3. **Pick free hosting** — [Vercel](https://vercel.com), [Netlify](https://netlify.com),
   [Cloudflare Pages](https://pages.cloudflare.com), or GitHub Pages. Git-push deploys, free SSL.
4. **Point your domain** — add the two DNS records your host gives you. Five minutes.
5. **Grow it by conversation.** Open it with Claude (or any coding agent) and describe
   what you want next — "add a projects shelf with status pills," "make the accent cooler."
   You say the outcome; it figures out the how.

## The grain

The look has three moving parts you can dial or remove:

- **Grain** — the `body::before` fractal-noise texture. Lower its `opacity` to calm it.
- **Lamplight** — the warm radial wash. It only appears if you keep `<div class="lamplight">`.
- **Reduced motion** — already honored; users with the OS preference get a still page.

That's the box. The default voice is bark-and-lamplight, but change every value in the
IDENTITY block and the only thing that survives is the craft. That's the point.