# Day 16 — Photographer Portfolio — Research Brief

## Niche Analysis

### The persona

**Allan Ninal** — documentary and travel photographer. Based in Southeast Asia. Specialises in travel landscapes, urban street scenes, and editorial portraiture. Available for editorial assignments, commercial licensing, and prints.

The photographer's portfolio is fundamentally different from the designer's (Day 15): the photo IS the design. Chrome recedes. Typography serves navigation, not expression. The photographer doesn't have "project case studies" — they have collections, series, assignments. Language: "selected work", "looking through the lens", "available for assignments", "press inquiries", "prints available", "editorial licensing."

Contact: landix.ninal@gmail.com. Socials: @allanninal everywhere.

---

## Visual Differentiation from Days 1–15

**Most adjacent templates and why Day 16 differs on every axis:**

| Axis | Day 15 designer-portfolio | Day 16 photographer-portfolio |
|------|--------------------------|-------------------------------|
| Background | Warm parchment `#FAFAF8` + `#F0ECE6` | Pure white `#FFFFFF` — clinical gallery-wall |
| Accent | Terracotta `#C45B3A` (warm, earthy) | Slate-indigo `#3B5BDB` (cool, minimal UI only) |
| Display font | Archivo Black (heavy grotesque) | DM Sans (utilitarian, invisible) |
| Body font | Cormorant Garamond (high-contrast serif) | DM Sans (same — single-family, photo-first) |
| Layout | Long-scroll alternating project layout | Justified masonry gallery as primary navigation |
| Photography role | Photography used to decorate projects | Photography IS the content, fills the viewport |
| Persona language | "Selected works", "Let's make something" | "Selected work", "Available for assignments" |
| Sub-pages | `/work/[slug]` project case studies | `/stories/[slug]` photo collections/series |
| Interactive feature | None (CSS-only) | Lightbox — click any image → fullscreen overlay |
| Schema | Person + CreativeWork | Person + ImageGallery + Photograph |

**Other prior registers checked and avoided:**
- Day 1: dark indigo — ours is pure white
- Day 2: violet/cyan — ours is slate-indigo, used only as micro-accent
- Day 3: dark+lime — ours is light
- Day 4: coral — ours is cool
- Day 5: forest green serif — ours is sans only
- Day 6: cobalt + IBM Plex — different accent family, different font
- Day 7: magenta + Manrope — different accent, different font
- Day 8: premium minimal warm off-white — ours is cold pure white
- Day 9: Source Serif 4 + Inter Tight — no serif at all
- Day 10: dark teal — ours is light
- Day 11: cream + oxblood + Lora — ours is cool white, no accent warmth
- Day 12: aubergine + Fraunces — ours is cool, no display serif
- Day 13: dark + amber + Bricolage — ours is light
- Day 14: warm paper + electric blue + Plus Jakarta Sans — DM Sans is different, slate-indigo is darker/cooler
- Day 15: terracotta + parchment + Archivo Black + Cormorant — maximally different

---

## Typography System

**Single font family: DM Sans** (Google Fonts, OFL licensed) via `@fontsource/dm-sans`

Rationale: DM Sans is the "invisible" font — utilitarian, geometric but friendly, used by photographers because it gets out of the way. Unlike Plus Jakarta Sans (Day 14), DM Sans is slightly more geometric and less characterful — it reads as a frame, not a statement. The design rule is: when the art is strong, the typography whispers.

- **Headlines (h1):** DM Sans 700, 56–96px, tracking -0.02em. Not uppercase — lowercase keeps it human.
- **Subheads (h2):** DM Sans 500, 24–36px, tracking 0.
- **Body:** DM Sans 400, 16–18px, 1.6 line-height.
- **Labels/eyebrows:** DM Sans 500, 11px, UPPERCASE, tracking 0.12em. Used for collection labels, category tags.
- **No second font.** The restraint is the design.

WCAG: DM Sans 400 16px `#0D0D0D` on `#FFFFFF` — contrast 19.8:1 (AAA). Labels: `#6B7280` on `#FFFFFF` — 5.9:1 (AA). Accent `#3B5BDB` on white — 5.5:1 (AA). White text on `#3B5BDB` button — 5.5:1 (AA).

---

## Color Palette

**Background:** `#FFFFFF` — pure white. Gallery-wall aesthetic. Magnum Photos, Format photographer themes.

**Text primary:** `#0D0D0D` — near-black. High contrast, clean.

**Text secondary:** `#6B7280` — cool grey (Tailwind gray-500). Labels, captions, metadata.

**Accent:** `#3B5BDB` — slate-indigo (between Tailwind indigo-600 and blue-600). Used ONLY for: primary CTA buttons, focus rings, active nav state, link underlines on hover. Never in photography overlays.

**Surface:** `#F9FAFB` — Tailwind gray-50. Used for footer, metadata bands. Near-invisible lift.

**Lightbox overlay:** `rgba(0, 0, 0, 0.95)` — near-opaque black. Photos in total darkness = maximum impact.

**Border:** `#E5E7EB` — Tailwind gray-200. Thin, cool separator.

**This palette is untaken.** Pure white with slate-indigo accent on a single geometric sans — no prior Day has used this combination.

---

## Layout Strategy

### Homepage
1. **Hero** — full-viewport, signature landscape photo, photographer name (DM Sans 700, white text overlaid on bottom-left), role + location. Dark gradient at bottom. Single "View Work ↓" button.
2. **Gallery** — justified masonry grid, 16+ photos across 3 collections. Click any photo → lightbox. Gallery header: "Selected Work" in DM Sans 500 24px, with 3 collection filter tabs.
3. **Stories band** — 3 cards linking to `/stories/[slug]` collection pages. Photo + collection name + count.
4. **About / Approach** — photographer philosophy in 2 paragraphs. The camera as a way of seeing.
5. **Services / Specialties** — what they shoot: Travel & Landscape, Editorial & Portrait, Commercial & Brand, Prints & Licensing.
6. **Contact** — "Let's work together." LinkedIn (primary), email (secondary), Instagram, Ko-fi.

### `/stories/[slug]` — Collection pages (3 collections)
- Full-bleed hero photo from the collection
- Collection name + description
- Full photo grid for that collection
- All photos clickable → lightbox
- ← Back to work navigation

### Lightbox
- Vanilla JS, zero libraries.
- Click any `.lightbox-trigger` → modal appears over full viewport.
- `rgba(0,0,0,0.95)` overlay.
- Photo centered, `max-height: 90vh`, `max-width: 90vw`, `object-fit: contain`.
- Prev/Next arrow buttons (keyboard: `ArrowLeft`/`ArrowRight`).
- `Escape` closes.
- Focus trap: Tab cycles only within lightbox.
- ARIA: `role="dialog"`, `aria-modal="true"`, `aria-label="Photo lightbox"`.
- Caption: photo alt text displayed below image.
- Close button: `aria-label="Close lightbox"`.

---

## Collections (Persona: Allan Ninal, Travel & Documentary Photographer)

### Collection 1: "Ascona Coast — 2024"
3 landscape photos of Mediterranean coastal scenes. Warm, cinematic, horizontal dominant.

### Collection 2: "Tokyo Light Studies — 2024"
3 urban/street photos from Tokyo. Night, rain reflections, neon. Mix of landscape and portrait orientation.

### Collection 3: "Rivers of Borneo — 2023"
3 documentary/nature photos. Jungle rivers, mist, early morning light. Moody and green.

### Uncategorised gallery mix (7 additional photos for homepage)
Additional travel/landscape photos from various trips — mountains, sea, dawn.

Total: 16 photos minimum (3+3+3+7). All from Unsplash, all unique vs. Days 1–15.

---

## Image Strategy — Unsplash

**Specialty: Travel, landscape, and urban documentary.**

All prior Day 15 IDs (banned):
`photo-1449247709967`, `photo-1487958449943`, `photo-1512820790803`, `photo-1541961017774`,
`photo-1565193566173`, `photo-1568219656418`, `photo-1572947650440`, `photo-1573496359142`,
`photo-1586281380349`, `photo-1558618666-fcd25c85cd64`, `photo-1612198188060-c7c2a3b66eae`,
`photo-1544716278-ca5e3f4abd8c`, `photo-1507842217343-583bb7270b66`, `photo-1561489422-45b5ace9d3a2`,
`photo-1618005182384-a83a8bd57fbe`.

**Selected images (travel / landscape / urban / documentary — all unique):**

Hero:
- `photo-1506905925346` — mountain lake at golden hour (wide landscape)

Collection 1 — Ascona Coast:
- `photo-1507003211169` — coastal cliffs, Mediterranean
- `photo-1502602898657` — Paris streets (use for "coastal town at dusk" mood)  
- `photo-1469854523086` — travel road landscape

Collection 2 — Tokyo Light Studies:
- `photo-1540959733332` — Tokyo at night, neon
- `photo-1513407030348` — rainy urban night, reflections
- `photo-1547981609` — urban street scene (Tokyo)

Collection 3 — Rivers of Borneo:
- `photo-1448375240586` — jungle river, mist
- `photo-1500534314209` — forest stream
- `photo-1518020382113` — misty jungle morning

Additional gallery photos:
- `photo-1519046904884` — aerial coastline
- `photo-1476514525535` — travel landscape, mountains
- `photo-1454391304352` — mountain reflection in lake
- `photo-1493558103817` — dramatic mountain peaks
- `photo-1439853949212` — misty lake morning
- `photo-1682687220742` — coastal golden hour
- `photo-1501854140801` — aerial landscape

**Optimization targets:**
- Hero: 1600×900, ≤ 250 KB (LCP — preload)
- Gallery images: 800×600 typical, ≤ 120 KB each
- Collection heroes: 1200×800, ≤ 200 KB
- All: `loading="lazy"` except hero (eager + fetchpriority="high")
- Explicit `width` + `height` on every `<img>` to prevent CLS

---

## Sections Inventory

1. **Hero** — full-bleed signature photo, overlay text, CTA
2. **Gallery** — 16+ photos, masonry/justified grid, lightbox on click, 3 collection filters (JS tabs)
3. **Stories** — 3 collection cards → `/stories/[slug]`
4. **About** — photographer philosophy, approach to seeing
5. **Services / Specialties** — 4 areas (Travel & Landscape, Editorial & Portrait, Commercial & Brand, Prints & Licensing)
6. **Contact** — "Let's work together" + LinkedIn + email + socials
7. **Lightbox** — JS overlay (inline `<script>` in Layout, no separate file needed)

Sub-pages:
- `/stories/ascona-coast/` — Collection 1
- `/stories/tokyo-light-studies/` — Collection 2
- `/stories/rivers-of-borneo/` — Collection 3

---

## Schema.org

**Homepage (`/`):**
```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Person",
      "name": "Allan Ninal",
      "jobTitle": "Travel & Documentary Photographer",
      "url": "https://templates.allanninal.dev/photographer-portfolio/",
      "email": "landix.ninal@gmail.com",
      "sameAs": ["https://www.linkedin.com/in/allanninal", "https://github.com/allanninal", "https://www.instagram.com/allanninal"]
    },
    {
      "@type": "ImageGallery",
      "name": "Selected Work — Allan Ninal Photography",
      "description": "Travel, landscape, and documentary photography by Allan Ninal.",
      "url": "https://templates.allanninal.dev/photographer-portfolio/"
    }
  ]
}
```

**Each collection page:** `Photograph` (one per photo) or `ImageGallery` for the collection.

---

## OG Image

`og-image.svg` (committed): 1200×630, `#0D0D0D` near-black background, "ALLAN NINAL" in DM Sans 700 white at ~80px centered, "TRAVEL & DOCUMENTARY PHOTOGRAPHER" in DM Sans 400 white at ~24px below, subtle slate-indigo `#3B5BDB` horizontal rule (3px) between. Rasterised to `og-image.png`.

---

## Performance Strategy

- `@fontsource/dm-sans` — self-hosted, no Google Fonts waterfall. Only weights 400 + 500 + 700.
- Hero image: `loading="eager"`, `fetchpriority="high"`, Unsplash `?w=1600&q=80` param.
- All gallery images: `loading="lazy"`, `decoding="async"`, explicit `width` + `height`.
- Lightbox JS: inlined in `<Layout>` `<script>` tag — no extra network round trip.
- CSS: Tailwind purged — only utilities used.
- No heavy frameworks. Vanilla JS lightbox only.
- Target LCP ≤ 1.8s on desktop (hero image preloaded).
- Target CLS = 0 (all images have explicit dimensions).
- Expected Lighthouse Performance ≥ 95.
