This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice(https://dev.to/challenges/frontend-2024-12-04)
What I Built
For the Frontend Challenge - December Edition: Glam Up My Markup, I designed and implemented an interactive landing page that explores the science and culture surrounding the Winter Solstice. My goal was to create a visually engaging, educational, and accessible experience for users to learn about this fascinating phenomenon while celebrating its cultural significance across the world.
Demo
Live Demo : https://devgajjar28.github.io/frontend-challenge/
GitHub Repository: https://github.com/DevGajjar28/frontend-challenge.git
Journey
Design and Aesthetics
I started by thinking about the feel I wanted for the page. The Winter Solstice brings to mind starry nights, snowflakes, and the shift from darkness to light. So, I chose:
A calm color palette with shades of blue, white, and gold to capture the wintry, celestial vibe.
Serif fonts for the headers to give it a cultural feel, and simple sans-serif for easy reading.
Animations to make the background come alive, with twinkling stars and a soft snowfall effect using CSS and JavaScript.
Interactivity and Features
I wanted the page to be engaging, so I added:
An interactive timeline that lets users click on markers to learn about the science and cultural traditions of the Winter Solstice from around the world.
A countdown timer to keep things timely and remind users when the next Winter Solstice is approaching.
A fun facts carousel that rotates through interesting facts about the solstice.
A responsive design to make sure it looks great on any device, whether it’s a phone or desktop.
Technical Highlights
I used:
CSS animations for smooth transitions and hover effects.
JavaScript event listeners to make the timeline, countdown, and carousel interactive.
I also made sure the page is accessible, with proper ARIA roles and alt text for images.
Challenges and Learnings
The biggest challenge was creating the dynamic timeline with JavaScript. It taught me a lot about structuring data and using DOM manipulation. I’m really proud of how the animations and interactive features give depth to the page without overwhelming the user.
Future Plans
I want to add more cultural references and maybe even some multimedia like videos and audio narrations.
I’m also planning to add a dark mode option to make it more immersive.
I’d love to expand the countdown timer to include solstices and equinoxes for both hemispheres.
Conclusion
This challenge was a wonderful opportunity to flex my CSS and JavaScript skills while diving into the captivating history and science of the Winter Solstice. I hope this page inspires others to learn more about this special time of year!
Thank you for checking out my submission. 🌟
Top comments (0)