Winter Solstice

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

What I Built

For this challenge, I wanted to design an interactive and immersive experience that relates to the theme of Winter Solstice. So, I used Three.js to create a 3D scene with a dynamic background representing the astronomical event. The scene consists of Earth revolving around the Sun with a rotating orbit, set against a beautiful galaxy background. To create more atmosphere to the experience, I've put the full HTML content over the top of the 3D scene, and the sections of the page are made transparent, allowing the user to see the cosmic movements as they scroll through the content. The sections are styled with simple CSS, focusing on readability and interaction.

Demo

You can check out the live demo of my project here:

You can also view the full code on GitHub:

Journey

It was fun to create this project because I was able to combine frontend development with 3D graphics. The challenge was ensuring that the content remains readable and usable while still being visually interesting with the Three.js scene running in the background. I had to adjust the transparency of each section so the text and content would still be legible while showing the rotating Earth and Sun. This project also gave me the chance to improve my skills with Three.js and to implement some interactive features, such as the subtle movement of the celestial bodies.

Additionally, I made the project responsive so that the scene adjusts to any screen size, maintaining a seamless experience across devices, whether on desktop, tablet, or mobile.

I'm very proud of how the 3D background interacts with the HTML content without being obtrusive. The next thing that I would improve about this project is more interactivity, like user control of the Earth's rotation or orbit speed. More visual effects would also be included, such as gradual changes in lighting to simulate day and night cycles during the solstice.