Galleria slideshow site using React 19, TypeScript, Vite & CSS Modules

What are you most proud of, and what would you do differently next time?

I'm most proud of the CSS column-count masonry grid — achieving a 4-column Pinterest-style layout with zero JavaScript and no external library felt elegant. The responsive breakpoints (1-col / 2-col / 3-col / 4-col) all work purely through a single CSS property change at each breakpoint.

Next time I'd add smooth slide-transition animations between gallery items and a keyboard-only navigation mode for better accessibility when browsing the slideshow.

What challenges did you encounter, and how did you overcome them?

Two main challenges:

1. Asset paths with React Router — data.json uses ./assets/... paths that resolve relative to the URL path, not the domain root. At /gallery/0 the browser requested /gallery/assets/... causing 404s. I fixed this with a path normalizer in paintings.ts that strips the leading ./.

2. Pixel-perfect detail layout — the Figma spec called for an image overlapping the info panel. I achieved this using a two-column CSS Grid (848px 1fr) with position: relative on the left column and absolutely-positioned children, which matched the design exactly without any margin-top hacks.

What specific areas of your project would you like help with?

I'd welcome feedback on:

• Accessibility of the lightbox modal — I used role="dialog" with aria-modal="true" and trap focus on open. Is there anything missing for full WCAG 2.1 AA compliance?
• Progress bar semantics — I used role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax. Any improvements for screen reader announcements as the slide changes?
• CSS column-count vs CSS Grid masonry — The spec uses column-count but the newer grid-template-rows: masonry is coming to CSS. Was column-count the right call for today's browser support?