com.gregkilmer.www/docs/PHOTOS.md

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.