Revetlla de Sant Joan

#devchallenge #frontendchallenge #css #javascript

This is a submission for Frontend Challenge - June Celebrations, Perfect Landing: June Celebrations

What I Built

I created an interactive landing page celebrating Revetlla de Sant Joan (St. John's Eve), the magical Catalan festival marking the summer solstice. The site features a real-time countdown to June 23rd and an immersive bento grid showcasing six key traditions: bonfires, midnight sea baths, fireworks, food gatherings, historical origins, and the spectacular Correfocs (fire runs).

Demo

Experience how we celebrate St. John's Eve
Check the code

Journey

This project was a perfect blend of technical challenges and cultural storytelling. I focused on creating an accessible, responsive experience using React, TypeScript, and Tailwind CSS.

The trickiest part was perfecting the bento grid animations - specifically fixing a subtle visual bug where white corners appeared during card tap animations. The solution required overriding component library styles with precise inline CSS.

I'm particularly proud of the accessibility features: full keyboard navigation, ARIA labels, focus management, and semantic HTML structure. The countdown hook automatically calculates the next Sant Joan date, making it evergreen.

Next, I'd love to add more interactive elements like a virtual bonfire or sound effects to make the cultural immersion even deeper.