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

Kayla Otterness — Sun, 15 Sep 2024 23:35:52 +0000

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.