DEV Community

Cover image for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice
Adam Gazdiev
Adam Gazdiev

Posted on

5 3 3 3 2

Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice

What I Built

I created an interactive and visually captivating landing page for the Winter Solstice. My goal was to enhance the user experience by incorporating modern design elements such as smooth animations, interactive buttons, and dynamic visuals. I also focused on accessibility and responsiveness to ensure a seamless experience across devices.

Key features include:

  • Smooth scrolling and animations for an engaging visual experience.
  • A fully interactive "Back to Top" button that appears dynamically as the user scrolls.
  • A carousel for showcasing multiple images in one section without overwhelming the page.
  • Subtle snowflake animations for a seasonal touch, creating a cozy atmosphere.
  • Polished typography and layout adjustments to make the content more readable and organized.

Live: here.
GitHub: here.

Image description

Journey

This project was a rewarding challenge that allowed me to experiment with various frontend techniques. My process involved:

Planning and Design:

I reviewed the provided markup and brainstormed ideas for improving its aesthetics and functionality. The goal was to elevate the user experience while adhering to the competition rules.

Development:

  • Added animations and hover effects to make the page dynamic and engaging.
  • Implemented a responsive design to ensure compatibility across devices.
  • Introduced a carousel feature for one of the sections to organize visual elements better.
  • Built the "Back to Top" button with smooth visibility toggling based on the scroll position.

Challenges and Solutions:

  • One major challenge was ensuring animations performed smoothly across all devices. By optimizing CSS animations and JavaScript, I was able to achieve this.
  • Another challenge was maintaining accessibility while enhancing visuals. This involved careful use of color contrasts and semantic HTML.

Reflection and Next Steps:

  • I’m proud of the polished animations and the seamless scrolling functionality. These elements added life to the page and made it more interactive.
  • Next, I aim to explore adding more advanced interactivity, such as user-triggered events or customizable themes.

The code is available under the MIT License.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (5)

Collapse
 
plutonium239 profile image
plutonium239

I liked the snow built up on top of the sections!

Collapse
 
sergo profile image
Sergo • Edited

Hey Adam. Great job! I liked it.
Is it okay if I take the text from you README file?
I've never filled it out before. And I find it a little difficult to fill it out without knowing the structure.

Collapse
 
adamgazdiev profile image
Adam Gazdiev

Thank you so much for your kind words and feedback—I really appreciate it! Of course, feel free to copy the text from my README file. If you have any questions or need any assistance with it, don’t hesitate to reach out—I’d be happy to help!

Collapse
 
prazial profile image
Robert Prazial • Edited

It's a wonderful work! I like it!
I wanted to ask this
How do you add that snowfall effect?

Collapse
 
adamgazdiev profile image
Adam Gazdiev

Thank you for your kind words! The snowfall effect is done using JavaScript. Here's the code snippet for it:

// Create a container for snowflakes
const snowContainer = document.createElement('div');
snowContainer.style.position = 'fixed';
snowContainer.style.top = '0';
snowContainer.style.left = '0';
snowContainer.style.width = '100vw';
snowContainer.style.height = '100vh';
snowContainer.style.pointerEvents = 'none';
snowContainer.style.overflow = 'hidden';
document.body.appendChild(snowContainer);

// Falling snow
const createSnowflake = () => {
    const snowflake = document.createElement('div');
    snowflake.classList.add('snowflake');
    snowflake.style.left = Math.random() * 100 + 'vw'; // Random horizontal position
    snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // 2-5 seconds
    snowflake.style.opacity = Math.random(); // Snowflake opacity
    snowflake.style.fontSize = Math.random() * 10 + 10 + 'px'; // Snowflake size
    snowflake.innerText = '❄'; // Snowflake character
    snowContainer.appendChild(snowflake);

    setTimeout(() => {
        snowflake.remove(); // Remove snowflake after animation ends
    }, 5000); // Snowflake lifespan
};

// Create snowflakes every 100 ms
setInterval(createSnowflake, 100);

Enter fullscreen mode Exit fullscreen mode

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more