✨ A Tribute to Juneteenth – A Scroll Through History

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

What I Built

For the June Frontend Challenge, I created a dynamic landing page commemorating Juneteenth — the powerful celebration of freedom in the United States. Rather than a static site, I wanted to take users on a scrolling timeline journey, visualizing key milestones in Juneteenth’s history through a blend of historic artwork and modern UI animations.

The concept was simple: let the years roll by, and let the story unfold.

Demo

You can find the Github Repository here: https://github.com/SoorajSNBlaze333/juneteenth-2025-landing

Tech Stack used
• ⚡ Vite — for blazing fast dev server
• ⚛️ React — UI rendering
• 🎨 Tailwind CSS — utility-first styling
• 🌀 Framer Motion — animations and transitions

The Live version is deployed here: https://juneteenth-2025-landing.vercel.app/

Journey

This challenge was my playground for deep-diving into Framer Motion — its ability to animate layouts and transitions is truly next level.

I didn’t want just a “nice layout.” I wanted it to feel like history was scrolling past you — smooth, respectful, and elegant. So I layered in a few small but impactful touches:

Thoughtful Details:
• 🎞️ Rolling year digits that flip as you scroll — adding rhythm to the timeline.
• 🔲 Grid-aligned sections with matching borders for a continuous visual thread.
• 🎯 Snap-to-center scrolling so each historical moment gets its spotlight.
• 🎹 Keyboard navigation support for accessibility and a smoother UX.
• 📸 Image hover reveals for historical documents and figures.
• 📦 Scroll-triggered animations to keep the experience lively and flowing.

What's next

Although I’m proud of the final result, there’s always room to improve:
• 📈 Lighthouse Score: I’ve optimized most areas, but I’m aiming for a perfect 100.
• 📱 Mobile Responsiveness: With this much interactivity, a responsive mobile layout needs thoughtful re-architecture — I’m actively exploring this.

❤️ Final Thoughts

This project means more than just code. Juneteenth is a story of struggle and celebration, and I wanted to reflect that with carefully chosen visuals and deliberate design. It’s a tribute through UI, and I hope it both informs and inspires.

Let me know your thoughts — feedback is welcome! 🙌