Skip to content

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
Open in a new tab

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
    Component
  • A photo grid filtered by theme, with toggle buttons and an announcement of how many photos are shown.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A 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
    Component
  • 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
    Component