DEV Community

Cover image for Star Wars Themed Solar System Guide - Glam Up My Markup
Menard Maranan
Menard Maranan

Posted on • Updated on

Star Wars Themed Solar System Guide - Glam Up My Markup

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

What I Built

Explore the Solar System: A Star Wars-Inspired Galactic Journey

Imagine stumbling upon a legendary travel brochure from a galaxy far, far away—a guide to a mysterious star system known as the Solar System. In the spirit of the Star Wars universe, this project transforms our own celestial neighborhood into an intergalactic destination for adventurous travelers. From the shimmering orbits of the planets to the enigmatic asteroid belt and icy Kuiper Belt, this guide serves as your Jedi-approved travel companion. Packed with knowledge on the heavenly bodies, planets, moons, and cosmic wonders, it's like a holographic map leading you on a stellar tour through a system that feels as exotic as Tatooine, yet as familiar as home.

Demo

Journey

Coming from the realm of frontend frameworks and web components, this was my first time diving into vanilla CSS and JavaScript without altering the HTML markup—a real challenge that pushed me to level up my skills in JS DOM manipulation and explore some cool CSS features. I hacked this together over a weekend, so it’s far from perfect and has a few UI quirks. If I had more time (I wish I did!), I’d smooth out all the rough edges.

I also have some big ideas for future enhancements. Imagine orbiting moons, parallax effects, and an interactive experience that truly immerses you in the Solar System, Star Wars-style, but in 8-bit glory. With just two days to work on it, this was a quick project, but if I had months, I could take it to a whole new level of awesomeness.

References

I also want to credit these sources where I got the assets for this project:

And this online tool:

Top comments (2)

Collapse
 
menard_codes profile image
Menard Maranan • Edited

UPDATE: Replaced the pixelized images of heavenly bodies with AI generated 8-bit pixel art images by Imagen 3 of Google Gemini

Collapse
 
menard_codes profile image
Menard Maranan

UPDATE 2: Replaced the hero image