Glam Up My Markup: Interactive Solar System with Light/Dark Mode & Retro Design

This is a submission for Frontend Challenge v24.09.04, Glam Up My Markup: Space

What I Built

The landing page features a retro, space-inspired design with modern usability considerations like light/dark mode toggling, smooth scrolling, and a fully responsive layout. Visitors can explore planets, moons, and celestial objects via an interactive carousel, and the content is designed to be educational yet fun to navigate.

Key features include:

• Light/Dark Mode Toggle: Users can switch between light and dark themes for a more personalized experience.
• Interactive Carousel: Dynamic carousels allow visitors to explore different planets, moons, and celestial objects.
• Smooth Scrolling: A "Begin Exploration" button triggers a smooth scroll to the solar system overview section.
• Fully Responsive Design: The site is designed to look great on both desktop and mobile devices.

Demo

You can view the code on GitHub: GitHub Repository

And check out the live demo here: Live Demo

Screenshots

Light Mode:

Dark Mode:

Carousel Example:

Mobile View:

Journey

I went into this without a design plan, and the plan changed as I worked through the project, which can mimic what happens in the real world. However, I wish I had spent more time wireframing my project and brainstorming aspects to bring everything together.

I originally went with a vintage terminal style. While fun, I felt as though the neon green was not giving me the professional look I was striving for.

So, I opted for a more minimalistic look in the end, while still keeping some fun elements. My new vision was inspired by a vintage textbook, which can be seen by the colors used and some of the design elements such as the ASCII divider and fonts.

The biggest challenge I faced aside from design was ensuring that the project looked great on mobile devices. I had to write specific mobile CSS for several sections to optimize the design. Flexbox helped with layout adjustments, but creating a truly seamless experience took some trial and error.

Overall, this project pushed me to think creatively, adapt on the fly, and balance design aesthetics with usability, which are valuable skills in frontend development.