DEV Community

uknowWho
uknowWho

Posted on

1 2 1 1

Glam Up My Markup: Winter Solstice Submission

This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice

What I Built

This project is a dynamic and visually engaging landing page titled "Winter Solstice: Celestial Rhythms", celebrating the winter solstice and its global significance. The page is crafted with a focus on:

Adaptive design: A light and dark mode that responds to the user's system preferences.

Interactive content: A custom-built canvas-based solstice visualization.

Accessibility: Enhanced keyboard focus styles and thoughtful tooltip interactions.

Global storytelling: Sections highlight solstice-related science, traditions, and cultural celebrations worldwide.

My goal was to create a landing page that blends aesthetic appeal, educational content, and seamless user interaction.

Demo
Here’s the live demo: Winter Solstice: Celestial Rhythms
πŸ‘‰

Screenshots:

Desktop Dark Mode:

Image description

Image description

Image description

Mobile Light Mode:

Journey Process

I approached this challenge with a focus on both aesthetics and functionality. My process involved:

Designing the structure: Starting with semantic HTML for clarity and accessibility.

Theming: Utilizing CSS custom properties (--variables) to implement a responsive, adaptive color palette.

Dynamic interactions: Adding hover effects and a smooth animation for the solstice visualization using the element.

Responsive design: Ensuring the layout adapts elegantly to various screen sizes.

Enhancing accessibility: Including tooltips, focus-visible styles, and keyboard-friendly navigation.
What I Learned

  1. How to create a dynamic visualization using the API.
  2. Advanced usage of CSS custom properties for theming and light/dark mode adaptations.
  3. Techniques for building accessible tooltips and smooth-scroll navigation.

Proud Moments

The solstice visualization: Animating Earth's orbit and tilt in real-time gave life to the page.

Accessibility improvements: The project is not only visually appealing but also keyboard and screen-reader-friendly.

Next Steps

Expand interactivity: Add more celestial events to the visualization (e.g., equinoxes).

Localization: Translate content into multiple languages for broader accessibility.

Open collaboration: Make this project open source for contributions and education.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here β†’

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay