A sports photographer’s website
The photographer covers sport: AFCON, Six Nations, Diamond League. His photos are often dark and all in portrait format. His site had to scroll through them endlessly, without ever distorting them.
- Deliverable
- live website, hosting
- Role
- website design, development lead, launch
- My part
- I decide and test, Claude Code writes the code.
- Client
- sports photographer
- Team
- solo, with Claude Code
- Duration
- 1 month
- Live
- since October 2026
Context
“The watchword for the site is fluidity and infinity.” (the photographer, in his brief)
How do you let visitors browse hundreds of images without ever making them wait?
Design
Decisions
The project name, between two arrows
The word PROJECTS became the name of the current project: you know where you are, and an arrow leads to the next one. The scroll wheel and dragging still move through the photos.
Names readable on every photo
In negative, the names took on the colours of the photo: measured contrast, 1:1. A darker veil and a calculated light grey give at least 4.5:1. The photos still change live behind.
The mosaic through a wide-angle lens
The centre photo dominates; the others shrink and darken towards the edges, as in a fisheye lens. Two visible tiles never show the same photo.
- The photo travels from one view to the otherWhen zooming, as between SERIES and ALL, it leaves from its exact place and returns to it: you never lose what you were looking at.
- A cross to leave the zoomEsc and the site name already closed it, but nothing on screen said so. The cross, drawn like the arrows, also works with the keyboard and by touch.
- A door at the end of the seriesBefore the series starts over, a tile shows the first photo of the next project and its name: one click goes in. Names placed at the edges of the screen, tried first, were ruled out.
- Focus pointsSeven focus frames, as in a viewfinder, show loading, the position in the series and the selected project.
Retrospective
What I learned
- No bounceI ruled out movements that overshoot their target: they drew the eye to the movement, not to the photo.
- The real phone has the last wordA black screen only appeared on iPhone. An error log displayed on the phone helped find the cause.
- Measure before decidingThe contrast under each name in the index, the time of each frame when pinching the mosaic: the settings followed measurements, not the eye alone.