Project gallery with lightbox
A tradesperson's portfolio: a grid of jobs filtered by type of work, with place, year and duration, and a full-screen lightbox with captions and keyboard navigation.
- Tailwind
- React
- CSS
- WordPress
Description
Each job shows its type, town, year, duration and a short description. Filters (bathroom, kitchen, outdoor) narrow the grid and the lightbox only steps through the jobs on display. The lightbox uses the native dialog element: large photo, counter, full caption, previous and next buttons, swipe on mobile and click on the backdrop to close. Accessibility: filters are toggle buttons (aria-pressed) with an announced result count; the modal lightbox keeps focus, closes with Escape and returns focus to the original thumbnail; left and right arrows, Home and End navigate; the counter is announced (aria-live); 44 px buttons with visible focus; AA contrast in light and dark modes; hover zoom and opening animation are turned off with prefers-reduced-motion. Without JavaScript the grid stays a list of captioned photos, with no inert button. Gradients are replaced by your photos while keeping the alternative text.
Code
Loading the code…
Archive contents
galerie-realisations-grille-html-tailwind.zip3 files · 8 Ko
- index.html27 Ko
- README.md4 Ko
- LICENSE.md1 Ko
Tags
Updated on October 16, 2026.
In the same spirit

Two stacked photos and a draggable handle to show your renovations, haircuts or gardens before and after.
- Tailwind
- React
- CSS
- WordPress

A photo grid filtered by theme, with toggle buttons and an announcement of how many photos are shown.
- Tailwind
- React
- CSS
- WordPress

Image carousel
FreeA photo carousel with previous, next, dots and a pause button, which never advances on its own when the user reduces motion.
- Tailwind
- React
- CSS
- WordPress

A studio or school's weekly timetable, filterable by discipline and level, with remaining places and a day-by-day view on mobile.
- Tailwind
- React
- CSS
- WordPress