June 12: A Landing Page Tribute to Nigerian Democracy

#devchallenge #frontendchallenge #css #javascript

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

What I Built

For this challenge, I chose to highlight a celebration that is deeply resonant and significant here in Nigeria: Democracy Day, observed on June 12th. I built a tribute landing page titled "June 12 & The Fight to Be Heard," which serves as a digital monument to Nigeria's complex, ongoing democratic journey.

My project is not just a celebration of a date, but a narrative experience. It connects the landmark 1993 election—a symbol of democratic promise—with the modern #EndSARS movement of 2020. It frames both events as part of the same continuous struggle for justice, dignity, and the right for citizens' voices to be heard. The landing page walks the user through this powerful story, from hope and resistance to the modern echoes of that same spirit.

Demo

The live version of the site is hosted on GitHub Pages. You can experience the full narrative journey by visiting the link below.

Live Demo: June 12 Tribute
- GitHub Repo: Eztosin/June-12-Tribute

Here is a glimpse of the hero section:

Journey

The journey of building this project was both technical and emotional. When I saw the "June Celebrations" theme, I knew I wanted to do something that felt personal and urgent. As a Nigerian, June 12 is more than a public holiday; it's a symbol of a promise and the struggle to uphold it. Connecting that history to the recent #EndSARS protests felt like an important story to tell through design and code.

My process began with defining the narrative flow. I wanted to create a timeline that was not just informative but also evocative. The core challenge was to handle such a sensitive topic with the respect and gravity it deserves, while still creating a visually engaging front-end experience.

Tech Stack & Decisions:

I chose React and Vite for a fast, modern development environment.
Tailwind CSS was essential for rapidly styling the components and creating a clean, consistent design system based on the symbolic colors of the Nigerian flag, with black and red representing the struggle.
The most important library I used was Framer Motion. I am particularly proud of the animated vertical timeline. Using whileInView animations, I could make each historical event fade in as the user scrolls, creating a powerful sense of discovery and progression through the story.
I used react-scroll for the navigation to create a smooth, single-page application feel that guides the user seamlessly through each chapter of the narrative.

One of the things I learned was the importance of typography in setting a tone. I used a bold, impactful font-heading for titles to convey strength, and a clean font-mono for dates to give a sense of historical record.

For the future, I hope to expand this project by adding a "Stories" section where Nigerians can anonymously submit their own short stories related to activism and democracy. I would also like to add more links to educational resources and grassroots organizations that are working to strengthen Nigeria's democratic institutions.

This project is a tribute to the resilience of the Nigerian spirit. Thank you for the opportunity to share this story.