feat(resume): add profile photo to resume header

[guyathomas]

Places the photo at public/images/resume-photo.jpg, renders it beside
the name/title block in ResumeHeader, and wires it through resume.yaml.

https://claude.ai/code/session_018vQR94EpjGTVw5RcP2oNBx

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
resume	Error		Apr 22, 2026 10:41am

[claude]

Code Review: feat(resume): add profile photo to resume header

Overview

Clean, focused PR that adds an optional profile photo to the resume header. The layout refactor wraps the existing heading content in a flex container alongside the new image, with the photo remaining opt-in via the photo?: string prop. Backward compatibility is fully preserved.

---

✅ What's done well

• Optional prop — photo is ?: string so existing usages without a photo are unaffected.
• Accessible alt text — alt={name} provides meaningful text for screen readers.
• Print-aware styling — print:flex-row print:items-center print:gap-6, print:shadow-none, and print:border-gray-300 show good attention to the printed resume use-case.
• shrink-0 on the image — prevents the photo from being squished when the name is long.
• min-w-0 on the text container — correctly prevents flex overflow issues.

---

Suggestions

1. Consider Astro's <Image> component for automatic optimisation

The raw <img> tag serves the original JPEG with no resizing or format conversion. Astro's built-in Image component (from astro:assets) would automatically generate a WebP/AVIF version, set correct dimensions, and add loading="lazy":

---
import { Image } from 'astro:assets';
---

{photo && (
  <Image
    src={photo}
    alt={name}
    width={112}
    height={112}
    class="w-24 h-24 sm:w-28 sm:h-28 ..."
  />
)}

Note: <Image> requires a static import or an inferSize-compatible remote URL for local public-folder images — you may need to import the asset or use inferRemoteSize. If that's too much friction, at minimum add explicit width and height attributes (see point 2).

2. Add width and height to avoid Cumulative Layout Shift (CLS)

Without explicit dimensions, the browser can't reserve space for the image before it loads, causing the heading text to jump. Even with the raw <img>, this is easy to fix:

<img
  src={photo}
  alt={name}
  width="112"
  height="112"
  class="w-24 h-24 sm:w-28 sm:h-28 ..."
/>

The CSS classes still control the rendered size; the HTML attributes just give the browser an aspect-ratio hint.

3. Minor: loading="lazy" is usually a free win

Since the photo is above the fold it's LCP-critical, so eager (the default) is actually correct here — no change needed. Just flagging it so it's a conscious choice rather than an oversight.

---

No concerns on

• Security — Astro auto-escapes template expressions; no XSS risk. The YAML is author-controlled.
• Binary asset in git — Fine for a personal site of this scale.
• The resume: any cast in index.astro — Pre-existing; out of scope for this PR.

---

Summary

Solid PR. The only actionable items are the width/height attributes (low-effort, prevents CLS) and, optionally, migrating to <Image> for format optimisation. Everything else looks good to ship.