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

View Source Code on GitHub

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.

git clone https://github.com/KelvinCode1234/Juneteenth-Journey.git