mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
Greg Kilmer
122 lines
5.2 KiB
Markdown
122 lines
5.2 KiB
Markdown
# 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.
|