From 55d613d409624a26ee50cabfb1e3bf122d62003e Mon Sep 17 00:00:00 2001 From: Marco Date: Sat, 29 Aug 2026 22:10:41 +0000 Subject: [PATCH] About section: switch author photo to object-contain object-cover on the square about-author.jpg inside this wide/short banner was scaling the image up to fill the width and cropping most of the height away, blowing the face up to fill the entire strip. Verified the exact crop with a sharp simulation before switching. object-contain shows the whole photo at its real proportions instead. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_013Eg6h91yngXmSnM51wxXM8 --- app/components/About.tsx | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/app/components/About.tsx b/app/components/About.tsx index b32aa3d..cc0fca4 100644 --- a/app/components/About.tsx +++ b/app/components/About.tsx @@ -99,14 +99,18 @@ export function About() { src="/about-author.jpg" fill sizes="(min-width: 640px) 58vw, 100vw" - // object-position shifted up from center — about-author.jpg is a - // square close-up portrait (1254x1254), and this banner is wide - // and comparatively short, so a centered crop on a square source - // blows the face up to fill the whole strip (reported 2026-08-29, - // after the photo swap to this tighter headshot). Biasing toward - // the top keeps hairline/forehead in frame instead of cropping - // straight into eyes-to-chin. - className="object-cover object-[50%_20%] pointer-events-none" + // object-contain, not object-cover — about-author.jpg is a square + // close-up portrait (1254x1254) and this banner is wide and + // comparatively short, so object-cover scales the square up to + // fill the width and then crops most of the height away: the + // face fills the entire strip, way too large (reported + // 2026-08-29; simulated the exact crop with sharp to confirm + // before switching — a plain object-position tweak only moves + // which part of the face is blown up, it doesn't fix the zoom + // itself). contain shows the whole photo at its real proportions; + // the empty sides fall back to the section's own bg-dark behind + // the image, which reads as a deliberate frame rather than a gap. + className="object-contain pointer-events-none" /> {/* Left gradient — from sm: up, not just lg:. Even without the -ml-48 overlap at Tablet, the photo sits directly against the