Website Template for Photographers

Your photographs deserve a site that shows them one at a time. Aperture turns your work into a filmstrip the scroll runs sideways, keeping one frame in focus while the rest recede, with a live camera and exposure readout under each one.

**Signature interaction.** A scroll-driven filmstrip: vertical scroll moves a horizontal rail of frames, the centred one scales up and sharpens while its neighbours dim, with a live EXIF caption and a roll counter.

**Features**

- **Focus-pull filmstrip.** The centred frame pulls focus as you scroll, with a live camera, lens and exposure readout.

- **Keyboard loupe.** Enlarge any frame in a full-screen viewer, page through with the arrow keys, close with Escape.

- **Case pages.** A page per series with a hero, a metadata block and a gallery, from one content file.

- **Commissions and studio.** Sections for what you shoot, the studio, and recognition figures that count up.

- **Grid fallback.** On phones and with no JavaScript the filmstrip becomes a clean scroll rail, so nothing is lost.

- **One accent, dark and quiet.** A high-contrast serif over a calm grotesque, teal as the single accent.

**What's included**

- A home page and 8 series case pages, generated from one content file

- Every word, image, link and colour in `content.json`, so no code changes are needed to make it yours

- README and a buyer guide for editing, building and deploying

- The Studio Engine: Vite, TypeScript, smooth scrolling and animation

- Self-hosted open licence (OFL) fonts and generated placeholder images

- QA notes with the test results

**Built right**

- Lighthouse mobile 92 to 100 performance, 100 accessibility, best practices and SEO

- Keyboard accessible, works without JavaScript and respects reduced motion

- About 60 KB of JavaScript gzipped

- Deploys as static files to any host

**Requirements:** Node.js 20 or newer to edit and build.

**Tags:** website template, photographer, photography portfolio, portfolio template, photography website, Vite, responsive

**Images, in upload order**

1. `aperture/studio-aperture-01-cover.jpg`

2. `aperture/studio-aperture-02-whats-inside.jpg`

3. `aperture/studio-aperture-03-pages.jpg`

4. `aperture/studio-aperture-04-listing-16x9.jpg` (wide, for a banner or a rectangular layout)