Juneteenth Journey - A Celebration of Freedom
#devchallenge#frontendchallenge#css#javascript
Precious Kelvin Nwaogu

Precious Kelvin Nwaogu @kelvincode1234

About: Software Developer skilled in React, Nextjs, Nodejs, Java, HTML5, CSS3 & Material UI. I love building user-centered web applications and am always eager to learn 📚 and collaborate 🤝!

Location:
Lagos, Ikeja.
Joined:
Oct 3, 2024

Juneteenth Journey - A Celebration of Freedom

Publish Date: Jun 23
14 2

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

What I Built

I created "Juneteenth Journey" - an interactive, educational landing page celebrating Juneteenth (June 19th), which commemorates the end of slavery in the United States. This project highlights:

  • The historical significance of Juneteenth through an interactive timeline

  • Traditional celebration methods with visual examples

  • A local event finder (simulated)

  • Curated educational resources

  • Fully responsive and accessible design

I chose Juneteenth because it represents both an important historical milestone and a vibrant modern celebration of African American culture and resilience. As a federal holiday since 2021, it's crucial to educate people about its significance while making the information engaging and accessible.

Demo

kelvincode1234.github.io

View Source Code on GitHub

juneteenth-screenshot.png

Journey

Development Process

  1. Research First: I began by thoroughly researching Juneteenth's history and traditions to ensure accurate representation

  2. Mobile-First Design: Created wireframes focusing on mobile experience before scaling up

  3. Component Architecture: Built the page in semantic sections with clear visual hierarchy

  4. Interactive Elements: Added the timeline and resource selector to enhance engagement

  5. Accessibility Audit: Used WAVE and keyboard testing to ensure inclusivity

Technical Highlights

  • Pure CSS Timeline: Created without JavaScript for better performance

  • Responsive Grids: Used CSS Grid and Flexbox for adaptable layouts

  • Progressive Enhancement: Core content works without JavaScript

  • Performance Optimization: Achieved 95+ Lighthouse scores

Challenges & Solutions

The biggest challenge was making the historical timeline both informative and visually engaging. I solved this by:

  • Creating a responsive CSS-only timeline that transforms on mobile

  • Adding subtle animations triggered on scroll

  • Including concise but impactful historical details

What I'm Proud Of

Accessibility Implementation:

  • Full keyboard navigation

  • ARIA attributes where needed

  • Proper color contrast ratios

  • Reduced motion options

Interactive Resource Section:

  • Clean highlight-and-expand pattern

  • Curated quality educational links

  • Smooth transitions between states

Visual Design:

  • Color scheme reflecting traditional Juneteenth colors

  • Balanced information density

  • Mobile-friendly touch targets

Next Steps

I'd love to:

  1. Add real event data through an API integration.
  2. Implement user accounts for saving favorite resources.
  3. Create a companion educator's guide PDF.
  4. Translate content to other languages for broader accessibility.

This project is licensed under MIT.

GitHub logo KelvinCode1234 / Juneteenth-Journey

I created "Juneteenth Journey" - an interactive, educational landing page celebrating Juneteenth (June 19th), which commemorates the end of slavery in the United States.

Juneteenth Journey 🌅

An interactive landing page celebrating Juneteenth - Freedom Day

Live Demo License: MIT

Features

✨ Interactive Timeline - Explore Juneteenth's history through animated milestones
🎉 Event Finder - Discover celebrations across the U.S.
📚 Educational Resources - Curated books, films, and organizations
🎨 Vibrant Design - Color scheme inspired by traditional Juneteenth symbolism
♿ Fully Accessible - WCAG compliant with keyboard navigation

Tech Stack

🛠️ Frontend: HTML5, CSS3, Vanilla JavaScript
🌈 Design: CSS Grid/Flexbox, SVG icons, responsive layouts
⚡ Performance: 95+ Lighthouse score

Usage

  1. Clone repo:
git clone https://github.com/KelvinCode1234/Juneteenth-Journey.git
Enter fullscreen mode Exit fullscreen mode
  1. Open index.html in browser

Why Juneteenth?

Juneteenth (June 19th) commemorates the end of slavery in the United States. This project honors:

  • Historical significance of emancipation

  • African American cultural resilience

  • Modern celebrations of freedom

License

MIT © Precious Kelvin 2025

Created for DEV's Frontend Challenge


View on GitHub


Comments 2 total

Add comment