Initial Commit

docs/PHOTOS.md

@@ -0,0 +1,121 @@
+# 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.