Skip to content

feat: bring back photos page - #125

Merged
jaspermayone merged 3 commits into
mainfrom
jaspermayone/102-photos-page
Aug 13, 2026
Merged

jaspermayone merged 3 commits into
mainfrom
jaspermayone/102-photos-page

Conversation

@jaspermayone

Copy link
Copy Markdown
Owner

Closes #102

Brings back the /photos page as a responsive masonry gallery of 133 photos.

Note

The layout reference tweet linked in the issue (x.com/sorenblank/status/1979079948204757089) has been deleted with no archive available, so the layout follows the site's existing conventions: a CSS-columns masonry grid (1/2/3/4 columns by breakpoint) with rounded corners and blur-up placeholders. Happy to rework if you can describe Soren's layout.

What's included

  • Optimized images: originals (428MB of JPGs, recovered from git history) converted to metadata-stripped WebP, max 1600px, quality 80 → 26MB total. Avoids the slow-load and serverless-size problems that got the old page removed ([BUG] /photos page takes a suuuuuper long time to load #50, Vercel Build Failing due to serverless function too large #51).
  • EXIF on hover: camera, focal length, aperture, shutter, ISO, and date shown in a hover overlay. Extracted at import time into a checked-in JSON (src/lib/photo-exif.json) — no runtime EXIF parsing. GPS data is deliberately excluded, and the shipped WebPs are fully stripped (originals contain location coordinates).
  • Shuffled order: the page renders dynamically and shuffles the gallery per visit.
  • Import pipeline: bun scripts/import-photos.ts [source-dir] converts new originals, extracts EXIF, and regenerates the src/lib/photos.ts manifest (static imports → automatic dimensions + blur placeholders).
  • SEO: ImageGallery JSON-LD, OG metadata, sitemap entry, /slashes entry, and a link from the home page's "photography" mention.
flowchart LR
    A[Original JPGs] -->|"magick: strip, resize 1600px, webp q80"| B[public/images/photography/*.webp]
    A -->|"magick identify: EXIF minus GPS"| C[src/lib/photo-exif.json]
    B --> D[src/lib/photos.ts manifest]
    C --> D
    D -->|static imports + blur placeholders| E[/photos page/]
Loading

Verification

  • next build and bun run lint pass
  • All 133 images verified loading on the local production build and the Vercel preview (Playwright scroll-through, zero failed requests, zero broken images)
  • Per-visit shuffle verified on the production build

Entire-Checkpoint: 14559c43567d
Entire-Checkpoint: 87194c94bc97
@vercel

vercel Bot commented Aug 13, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
website Ready Ready Preview Aug 13, 2026 1:14am

…one/102-photos-page

* 'main' of github.com:jaspermayone/website:
  feat: bring back friends page

# Conflicts:
#	public/sitemap.xml
@github-actions

Copy link
Copy Markdown

React Doctor found no new issues. 🎉

Reviewed by React Doctor for commit 4be84b2.

@jaspermayone
jaspermayone merged commit 964e5f3 into main Aug 13, 2026
2 of 3 checks passed
@jaspermayone
jaspermayone deleted the jaspermayone/102-photos-page branch August 13, 2026 01:15

This branch was successfully deployed

1 active deployment
Preview — 4be84b2d Deployed Aug 13, 2026 by vercel[bot]
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.

bring back photos page

1 participant