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
Journey
Development Process
Research First: I began by thoroughly researching Juneteenth's history and traditions to ensure accurate representation
Mobile-First Design: Created wireframes focusing on mobile experience before scaling up
Component Architecture: Built the page in semantic sections with clear visual hierarchy
Interactive Elements: Added the timeline and resource selector to enhance engagement
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:
- Add real event data through an API integration.
- Implement user accounts for saving favorite resources.
- Create a companion educator's guide PDF.
- Translate content to other languages for broader accessibility.
This project is licensed under MIT.
Top comments (2)
Man, the attention to accessibility is unreal - makes me want to step my game up too.
That's real! - Appreciate your feedback @nevodavid