BIMZISTUDIO
CASE / 01LIVE / PERSONAL SITE
← PORTFOLIO

YODPHOTOPHOTOGRAPHY PORTFOLIO

A large photographic archive becomes a directed editorial journey: enter by subject, stay with the image, leave through one clear inquiry path.

An image-first portfolio that turns a large commercial archive into four clear galleries and a direct inquiry route.

STATUS
LIVE / PERSONAL SITE
SECTOR
PHOTOGRAPHY / CREATIVE PORTFOLIO
ROLE
DESIGN + DEVELOPMENT
DELIVERED
VISUAL DIRECTION / UX/UI / RESPONSIVE FRONT-END
VIEW YODPHOTO LIVESELECTED SCREENS ↓
YODPHOTO / REAL SITE00 / DESKTOP
YODPHOTO live homepage with an Anton Yod title, dark editorial navigation and a large red fashion portrait.
LIVE / PERSONAL SITELIVE HOMEPAGE / IMAGE-FIRST ENTRY

PROJECT NOTELIVE PERSONAL PORTFOLIO / PHOTOGRAPHY AND IMAGERY © ANTON YOD / NO PERFORMANCE CLAIM.

01 / CONTEXT & DECISIONSAUDIENCE / JOB / CONSTRAINT / RESPONSE

THE PROJECT IN CONTEXT

What the site had to solve.

A commercial photography archive can be visually rich and still feel difficult to enter. YODPHOTO needed to make a large body of work legible without turning the photographer into a faceless image grid.

How can nearly four hundred photographs feel editorial and immersive while keeping categories, navigation and inquiry unmistakably clear?
AUDIENCE
Prospective commercial clients and collaborators reviewing Anton Yod’s work. The exact persona model was not supplied.
PRIMARY JOB
Understand the photographer’s range, inspect relevant work and start a project inquiry without searching through an undifferentiated archive.
CORE CONSTRAINT
398 selected photographs span food, lifestyle, interiors and events. The interface had to remain image-first, work on mobile and keep authorship visible without becoming a generic masonry grid.
BIMZI ROLE
DESIGN + DEVELOPMENT
PUBLICATION STATE
LIVE / PERSONAL SITE
DECISION PATHPRESSURE → DECISION → CHANGE

Design is the decisions between screens.

These are qualitative interface changes, not invented performance metrics.

  1. 01
    PRESSURE

    A broad archive can feel endless.

    DECISION

    Create four named collection entrances.

    CHANGE

    Visitors can choose a relevant body of work before entering the gallery.

  2. 02
    PRESSURE

    Dense image grids reduce individual photographs to thumbnails.

    DECISION

    Use an immersive gallery and counted lightbox.

    CHANGE

    Each image receives viewing space while previous, next and close controls stay explicit.

  3. 03
    PRESSURE

    A portfolio can end without a next action.

    DECISION

    Keep inquiry and direct contact in the primary structure.

    CHANGE

    Viewing work connects to a clear project-details route.

02 / SYSTEM & EVIDENCEMEASURED CODE + OBSERVED OUTPUT + KNOWN GAPS

DARK EDITORIAL CONTACT SHEET

A system, not a moodboard.

TYPE
Helvetica Neue drives display and body; large uppercase statements meet compact, widely tracked utility labels.
COMPOSITION
Asymmetric image fields, strong left-side statements, restrained rules and deliberate negative space.
SIGNATURE
A dotted photographic field and coral editorial marker recur without competing with the work.
  • INK#111315

    Immersive gallery, navigation and primary text

    MEASURED / YOD/styles.css
  • PAPER#E9E6DD

    Warm editorial canvas

    MEASURED / YOD/styles.css
  • PAPER BRIGHT#F5F2EA

    Primary inverse text and raised paper surface

    MEASURED / YOD/styles.css
  • SIGNAL#E04E36

    Focused action, selection and editorial marker

    MEASURED / YOD/styles.css
  • MUTED#9C9C95

    Counts, captions and supporting metadata

    MEASURED / YOD/styles.css

This is BIMZI's evidence-led case analysis, not an official client brand guide. Source-code facts are marked MEASURED; independent audit, licensing and field-performance gaps remain explicit.

TYPE / 01

Typography

  • FAMILYMEASURED

    "Helvetica Neue", Helvetica, Arial, sans-serif

    SOURCE / YOD/styles.css
  • DISPLAYMEASURED

    Uppercase 600 to 700 with tracking as tight as −0.085em

    SOURCE / YOD/styles.css
  • UTILITYMEASURED

    Approximately 0.72rem, uppercase, 0.12em tracking

    SOURCE / YOD/styles.css
LAYOUT / 02

Grid & spacing

  • GUTTERMEASURED

    clamp(1rem, 2.4vw, 2.75rem)

    SOURCE / YOD/styles.css
  • GRIDMEASURED

    12-column home/about and 14-column project rows

    SOURCE / YOD/styles.css
  • BREAKPOINTSMEASURED

    900px / 760px / 360px content-driven collapse

    SOURCE / YOD/styles.css
UI / 03

Components

  • ARCHIVEMEASURED

    Category entrances, project cards and immersive galleries

    SOURCE / YOD/main.js
  • LIGHTBOXMEASURED

    Native dialog, count, arrows, Home/End, swipe and focus restore

    SOURCE / YOD/main.js
  • INQUIRYMEASURED

    Netlify form, honeypot and first-visit rights notice

    SOURCE / YOD/main.js
REFLOW / 04

Responsive

  • ≤900PXMEASURED

    Hero recomposes and desktop navigation gives way to the mobile menu

    SOURCE / YOD/styles.css
  • ≤760PXMEASURED

    Gallery/about become one column; project rows become six columns

    SOURCE / YOD/styles.css
  • ≤360PXMEASURED

    Compact type and dialog controls preserve gallery navigation

    SOURCE / YOD/styles.css
BUILD / 05

Implementation

  • STACKMEASURED

    Custom Node/ESM static build with vanilla JavaScript and CSS

    SOURCE / YOD/package.json
  • MEDIAMEASURED

    Responsive AVIF/JPEG sources, intrinsic dimensions and adjacent-image preload

    SOURCE / YOD/build output
  • DELIVERYMEASURED

    Static deployment with Netlify inquiry handling

    SOURCE / YOD/build config
GATES / 06

Quality status

  • ACCESSIBILITY / CONDITIONALMEASURED

    Skip link, keyboard gallery, dialog focus restore, reduced motion and forced-colour rules exist

    SOURCE / YOD/source + checks
  • PERFORMANCE / CONDITIONALMEASURED

    Hero media is discoverable and offscreen media lazy-loads

    SOURCE / YOD/build output
  • INDEPENDENT AUDITNOT VERIFIED

    Screen-reader, usability and field-performance review

    SOURCE / BIMZI case audit
03 / EXPERIENCE ROUTEONE USEFUL STEP AT A TIME

The path through the product.

The visual system supports this route; it does not replace it.

  1. 01Choose a collection
  2. 02Browse selected work
  3. 03Open a counted lightbox
  4. 04Move previous or next
  5. 05Send project details or use direct contact
04 / SELECTED SCREENS03 VIEWS / DESKTOP + MOBILE

Selected screens.

Direct captures of the working website, shown across desktop and mobile.

YODPHOTO / REAL SITE01 / DESKTOP
YODPHOTO selected work page showing the four-gallery portfolio entry in a dark editorial layout.
LIVE / PERSONAL SITEPORTFOLIO INDEX / FOUR FOCUSED GALLERIES
YODPHOTO / REAL SITE02 / MOBILE
YODPHOTO mobile lightbox showing a food photograph, image count, close control and previous and next controls.
LIVE / PERSONAL SITEMOBILE LIGHTBOX / RESPONSIVE VIEWING
YODPHOTO / REAL SITE03 / MOBILE
YODPHOTO mobile inquiry page with a clear project-details button and direct contact section.
LIVE / PERSONAL SITEINQUIRY / ONE CLEAR NEXT STEP
VIEW YODPHOTO LIVEOPEN THE WORKING WEBSITE IN A NEW TAB
05 / RESPONSIBILITYCONTRIBUTION / OUTCOME / UNKNOWNS

What BIMZI made, and what is not claimed.

The live portfolio organises 398 selected photographs into four galleries and connects the viewing experience to a dedicated project-inquiry flow. No conversion or business-impact claim is made here.

Contribution

  • Visual direction
  • Information architecture for four collections
  • Responsive UX/UI
  • Front-end implementation
  • Gallery, lightbox and inquiry flow

Known unknowns

  • Traffic and conversion impact were not supplied.
  • No independent usability or accessibility certification is claimed.
  • Photography rights remain with Anton Yod.
  • The exact audience and persona model was not supplied.
CASE VALUE / 01BIMZI / PORTFOLIO EVIDENCE

06 / WHY THIS CASE MATTERS

The case shows BIMZI can organise a content-heavy creative portfolio without neutralising the author’s personality.