Skip to content

feat: swap the hero portrait for the skyline illustration - #2

Merged
dommango merged 1 commit into
mainfrom
feat/hero-portrait
Jul 15, 2026
Merged

feat: swap the hero portrait for the skyline illustration#2
dommango merged 1 commit into
mainfrom
feat/hero-portrait

Conversation

@dommango

Copy link
Copy Markdown
Owner

Summary

Replaces the hero headshot with the hand-drawn NYC-skyline portrait, and removes the old cartoon.

The new art couldn't just be dropped into the old slot. The hero cropped its image to a square (width={320} height={320} plus aspect-ratio: 1/1; object-fit: cover). The drawn frame is part of this artwork, so a centre crop of the 1024×1536 source cut the frame's top and bottom edges and clipped the top of the head — the old cartoon only survived that because it had no frame. So the portrait now renders at its full 2:3: the box goes 320×320 → 320×480 and the hero row grows ~160px, with the text column still centred beside it (align-items: center on .hero-head).

Also drops a 3.4MB file that was shipping for nothing. portrait_skyline.png was already committed but referenced nowhere — and under output: 'export', everything in public/ is copied to out/ and deployed regardless. This ships a 640px-wide WebP derivative instead (2× the ~300px display box).

Encoding note: lossy beat lossless badly here. Dense cross-hatching is high-entropy, so lossless WebP came out at 733KB vs 171KB for q80 — worth knowing if this art is ever re-exported. I compared q80 against the master at true display size and there's no visible difference. Net 3.4MB → 171KB, which is also smaller than the 244KB cartoon it replaces.

before after
shipped bytes 3.4MB PNG + 244KB JPG 171KB WebP
hero portrait 320×320, cropped 320×480, whole

Test plan

  • npx tsc --noEmit — clean
  • npm run build — static export succeeds
  • npx playwright test — 20/20 (the no-horizontal-overflow matrix covers the taller hero)
  • out/images/ contains only portrait-skyline.webp — both PNGs gone
  • Rendered ratio measured at 0.667 (2:3, i.e. uncropped) at both 1440px and 390px
  • Screenshotted at 1440px and 390px: frame intact top and bottom, head not clipped, caption still reads correctly
  • q80 compared against the 3.4MB master at true 300px display size — indistinguishable

Note

Deleting cartoon-headshot.jpg removes it from the working tree, not from history — same distinction as any deleted file. Nothing sensitive here, no action needed.

Removes cartoon-headshot.jpg.

The new art could not just be dropped into the old slot. The hero cropped
to a square (width/height 320 + aspect-ratio 1/1, object-fit cover), and
the drawn frame is part of this artwork — a centre crop of the 1024x1536
source cut the frame's top and bottom edges and clipped the top of the
head. The old cartoon only survived that because it had no frame. Show the
full 2:3 instead; the portrait box goes 320x320 -> 320x480 and the hero row
grows ~160px, with the text column still centred beside it.

Also drops the 3.4MB portrait_skyline.png master. Under output: 'export'
everything in public/ is copied to out/ and deployed, so an unreferenced
3.4MB file would still have shipped to every visitor. Ships a 640px-wide
WebP derivative instead (2x the 300px display box).

Encoding note: lossy beat lossless badly here — dense cross-hatching is
high-entropy, so lossless WebP came out at 733KB vs 171KB for q80. Compared
q80 against the master at true 300px display size; no visible difference.
Net 3.4MB -> 171KB, which is also smaller than the 244KB cartoon it
replaces.

Verified: tsc clean, build green, 20/20 e2e, rendered ratio 0.667 at both
1440px and 390px, and out/images/ contains only the webp.
@dommango
dommango merged commit a04eb94 into main Jul 15, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant