# Day 16 — Photographer Portfolio

A full-bleed gallery portfolio template for travel, landscape, and documentary photographers. The photo IS the design — typography and chrome recede so the images breathe.

**Live demo:** https://templates.allanninal.dev/photographer-portfolio/

## What's included

- **Full-bleed hero** with signature image, photographer name, and role
- **Justified masonry gallery** with 16+ photos and 3 collection filter tabs
- **Vanilla-JS lightbox** — click any image, full-screen overlay, prev/next arrows, keyboard nav (arrow keys, escape), focus trap, aria-labels. Zero library dependencies.
- **Photo Stories** — 3 themed collections (`/stories/[slug]/`) with collection hero, description, and lightbox
- **About / approach** section with stats (years, countries, collections)
- **Specialties / services** — 4 areas listed (Travel & Landscape, Editorial, Commercial, Prints)
- **Contact** with LinkedIn (primary CTA), email (secondary), socials
- **Schema.org** — `Person` + `ImageGallery` JSON-LD on homepage, `ImageGallery` on each collection
- `og-image.png` + `favicon.svg`
- Lighthouse ≥ 95 on all four categories
- Playwright tests: lightbox interaction (click, escape, arrow keys, focus trap), responsive, a11y (axe-core)

## Stack

- Astro 4 (static output)
- Tailwind CSS 3
- DM Sans via @fontsource (self-hosted, no Google Fonts waterfall)
- Vanilla JS lightbox (no Swiper, no Fancybox)

## Getting started

```bash
npm install
npm run dev
```

## Customise

1. **Photos** — swap the `PHOTOS` array in `src/data/photos.ts` with your Unsplash/own images. Keep explicit `width` + `height` for CLS = 0.
2. **Collections** — edit `COLLECTIONS` in the same file. Each collection becomes a `/stories/[slug]/` page automatically.
3. **Persona** — update `src/data/site.ts` with your name, role, location, email, and social URLs.
4. **Services** — edit `SERVICES` in `src/data/site.ts`.
5. **OG image** — regenerate `public/og-image.svg` (or swap `public/og-image.png` directly).

## Deploy (GitHub Pages)

```bash
PUBLIC_BASE_PATH=/your-repo-name/ npm run build
```

The per-template `.github/workflows/pages.yml` handles single-template deploys for forks.

## License

MIT — see [LICENSE](./LICENSE).

## Support

If this saves you time, consider [supporting on Ko-fi](https://ko-fi.com/allanninal).
