This is a submission for Frontend Challenge – June Celebrations, CSS Art: June Celebrations.

Inspiration

This project was built to honour and visually celebrate Juneteenth, a pivotal moment in American history marking the emancipation of the last enslaved African Americans. The goal was to create an interactive and aesthetically pleasing experience that not only serves as a reminder of this significant day but also as a symbol of ongoing progress and the enduring spirit of freedom. Through dynamic animations and thoughtful design, I aimed to capture the essence of liberation and hope, making history accessible and engaging for everyone.

Demo

Experience the Juneteenth Freedom Clock live:

• Live Demo: https://juneteenth-freedom-clock.vercel.app/

• GitHub Repository: https://github.com/Boweii22/Juneteenth-Freedom-Clock

Journey

The journey of building the Juneteenth Freedom Clock was an exciting exploration into modern web development and creative CSS. Starting with a basic React and TypeScript setup using Vite, the core challenge was to bring a static clock concept to life with intricate animations and a meaningful theme.

A significant part of this process involved crafting the detailed CSS for the various animated elements:

• The "Freedom Clock" itself, with its precisely positioned hour and minute markers, required careful calculation and transformation.
• Implementing the celestial bodies (sun and moon) involved mastering CSS transform properties for smooth orbital animations and dynamic visibility based on the time.
• The sky background, stars, shooting stars, and aurora effects were created entirely with CSS gradients and keyframe animations, aiming for a magical and immersive atmosphere.
• Animated typography for "FREEDOM", "Celebrating Juneteenth", and "1865" was achieved using individual letter animations, creating a revealing and impactful effect.
• Integrating subtle details like floating clouds, flying birds, and glowing fireflies added layers of visual interest and life to the scene.

Then, the addition of the interactive info modal with its "glassmorphism" effect presented a fun challenge in combining React state management with advanced CSS properties like backdrop-filter to create a modern, transparent UI element.

I'm particularly proud of how the various animations seamlessly integrate to create a cohesive and inspiring visual narrative. It was a rewarding experience to blend technical implementation with a meaningful historical celebration. Next, I hope to explore adding more interactive elements