# Photo Guide

Every image on the site right now is a **stock stand-in** (from Unsplash, free, no
attribution required) chosen to match the *vibe, pose, and style* of the real
photo that should eventually live there. This file is the shopping list for
**photos of yourself and your own stuff** — what to take or find, how to frame
each one, and which file to overwrite.

Replace a photo by **dropping a new file at the same path in `public/images/`**.
No code changes needed. Aim for roughly the recommended aspect ratio so the
crop stays clean.

> General mood across the whole site: **moody, warm-low-light, "candlelit study
> under a starfield."** Deep backgrounds, soft warm key light (window, lamp, or
> a single softbox off to one side), shallow depth of field. The frames, gold
> accents, and star background do the rest.

---

## 1. Portraits of you

These are the highest priority — they make the site feel like *yours*.

### `public/images/hero-portrait.jpg` — Home hero (used for the OG/social card too)
- **Subject:** You, at your desk or workspace.
- **Framing:** Portrait, roughly **4:5** (taller than wide). Waist-up or
  three-quarter. Head near the top third.
- **Pose:** Natural, mid-thought or slight smile, looking just off-camera or at
  the screen. One hand on keyboard or holding something (a die, a mug).
- **Light:** Warm side light from a window or lamp camera-left; let the
  background fall into shadow. A little rim light from behind separates you
  from the dark background.
- **Background:** Dark/blurred workspace — monitors, books, dice shelf out of
  focus. Avoid pure white walls.
- **Wardrobe:** What you actually wear to work; dark or jewel tones read best
  against the midnight palette.
- **Resolution:** ≥ 1200×1500 px.

### `public/images/about-portrait.jpg` — About page sidebar
- **Subject:** You, but warmer and more candid than the hero.
- **Framing:** Portrait **4:5**. Can be a different environment than the desk —
  a reading chair, the making bench, the game table.
- **Pose:** Relaxed, looking at camera or at a hobby object. Smile is good here.
- **Light:** Soft, warm, even. Think "cozy evening."
- **Resolution:** ≥ 1200×1500 px.

### Optional extras that would level the site up
- **A tabletop "gamemaster" shot** — you behind the screen / Foundry VTT on a
  monitor, dice in hand. Could replace `ttrpg-table.jpg`.
- **A making shot** — you casting resin or pulling a print, hands in frame.
  Could replace `making-resin.jpg`.

---

## 2. Workspace & professional

### `public/images/pro-workspace.jpg` — Professional summary banner
- **Subject:** Your actual desk / dev setup. Monitors with code, keyboard,
  a mug, low light.
- **Framing:** Wide **21:9** landscape. Slight angle, depth.
- **Mood:** "Late-night deploy." Dark room, screen glow as the key light,
  warm accent lamp.
- **Resolution:** ≥ 1600×690 px.

### `public/images/pro-team.jpg` (currently unused — available)
- **Subject:** Whiteboard session, pair-programming, or team standup (with
  consent). Optional; only add if you want a team-work shot.

---

## 3. Hobbies — your real collections

These benefit most from being *yours* — the stock versions are generic.

### Dice / tabletop
- `public/images/ttrpg-dice.jpg` — **your** polyhedral sets, fanned out or
  stacked on a dark surface. Top-down or 45°, single warm light. ~**16:10**.
- `public/images/ttrpg-table.jpg` — your Foundry VTT screen, a battlemap, or
  the physical game table mid-session. Wide **21:9**.

### Making
- `public/images/making-resin.jpg` — resin dice mid-cast, pressure pot, pigment
  bottles. Macro / close-up, ~**4:3**.
- `public/images/making-print.jpg` — the Elegoo Mars 4 or Bambu P1S mid-print,
  or a finished miniature in your hand. ~**4:3** or **16:10**.
- *(The Making gallery shows three images — the third reuses `ttrpg-dice.jpg`.
  Add a third unique shot, e.g. painted minis, if you want.)*

### Reading
- `public/images/reading-nook.jpg` — your reading chair / nook. Wide **21:9**.
- `public/images/fantasy-books.jpg` — your Sanderson / Cosmere shelf, spines
  out, warm light. ~**4:3** or **16:10**.

### Gaming
- `public/images/gaming-setup.jpg` — your PS5 / Switch / PC corner, controller
  on the seat, screen glow. Wide **16:10** or **21:9**.

### Pokémon
- `public/images/pokemon-cards.jpg` — your card collection, a favorite binder
  page, or a Metagross card front-and-center. ~**1:1** to **4:3**.

---

## How to swap an image

1. Put the new file at the matching path under `public/images/`.
2. Keep the **same filename** (and ideally the same aspect ratio).
3. Rebuild / redeploy. Done.

To change which image a specific spot uses, edit the `src="/images/..."` path in
the relevant `.astro` file (search the `src/pages/` and
`src/components/layout/InterestHero.astro`).

## Tech notes
- All photos render inside a `CelestialFrame` (gold hairline + corner star
  bursts) or as a banner with a star accent, so they inherit the mystical
  treatment automatically.
- `loading="lazy"` and `decoding="async"` are already set — no need to optimize
  delivery by hand, but keep files under ~500 KB where you can.
- If you remove an image but leave the path, the `CelestialImage` component
  falls back to a themed starfield placeholder so the layout never breaks.