Skip to content
Back to projectsraw.vives

Case study / Editorial visual archive

raw.vives

A photography archive built so 30 images work as a journey: narrative, series, motion, and accessible exploration in Spanish and English.

View live projectView repository
raw.vives hero featuring the Cliffs of Moher
30
Photographs
3
Series
73
Static routes
67
Tests

Summary

Initial problem

raw.vives turns a photography collection into a static editorial product. The home shapes the narrative, the archive makes images discoverable, and series preserve continuity across real, directly accessible URLs.

Photographs felt isolated, repeated, and entered with an overly uniform visual treatment. The challenge was to give each image a purpose and create continuity without turning the site into an effects demo.

Goals

  • Curate and prioritize the journey
  • Connect archive, details, and series
  • Preserve performance, keyboard access, and reduced motion

My role

Product and visual direction, frontend architecture, content modelling, curation, motion, accessibility, localized SEO, tests, and continuous delivery.

Verified stack

Next.js 16React 19TypeScriptTailwind CSS 4GSAPThree.jsLenisCloudflare WorkersGitHub Actions

01 / Editorial

Visual direction, curation, and motion

A black-and-ivory editorial direction lets photography become the interface. Curation gives hero, story, chapters, and selected work distinct roles; a limited grammar of masks, soft scale, and contextual transitions adds rhythm without hiding content.

Series section on the raw.vives editorial home
02

Architecture and exploration

Next.js App Router generates localized static routes. Central data resolves photographs, series, and navigation; the archive combines search, categories, and editorial order; details preserve fullscreen, previous/next, and ?series= context with a global fallback.

03

Photography series

Three manual sequences group authentic relationships or documented editorial affinities. Every photograph keeps its own detail page and, when opened from a series, previous, next, and return follow that order.

04

CI/CD and Cloudflare

GitHub Actions validates types, lint, 67 tests, build, and export before deploying the static site to Cloudflare Workers with a token limited to the Worker and its route.

Published product

One system, different ways to explore.

Editorial home
01 / Editorial home
Series page
02 / Series page
Archive and filters
03 / Archive and filters
Detail with series context
04 / Detail with series context
Fullscreen view
05 / Fullscreen view

Accessibility, performance, and SEO

  • Content remains visible without animation
  • Keyboard, focus, localized alt text, and reduced motion
  • Responsive images, lazy loading, and reserved dimensions
  • Canonical, hreflang, Open Graph, and localized sitemap

Challenges, decisions, and trade-offs

The work prioritised verifiable photographic relationships, one central configuration per system, and progressive enhancement. Carousels, horizontal scrolling, new shaders, and per-card effects were rejected to protect clarity, memory, and navigation restoration.

Measured results

Verifiable results, without decorative metrics.

The validated result contains 30 photographs, 3 editorial series, 73 static routes, and 67 tests. No unmeasured traffic, conversion, or feedback claims are included.

Learnings

  1. 01Curation creates more continuity than adding content
  2. 02Motion works better as a grammar than a collection of effects
  3. 03Contextual navigation needs a stable direct-access fallback

Next case

LumaFlow Studio

A full-stack product for organising professional photography work.

View next case