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
- Demo: https://menard-codes.github.io/starwars-outer-space/
- Source Code (Github Repo): https://github.com/menard-codes/starwars-outer-space
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:
- AI Image generation: https://firefly.adobe.com/
- AI-Generated 8-bit Pictures of the Planets, moons, and other heavenly bodies: Imagen 3 by Google Gemini https://gemini.google.com/
- Death Star in 8-bit by FanManDan16: https://www.newgrounds.com/art/view/fanmandan16/pixel-death-star
- Star Destroyer pixel art: https://www.pngwing.com/en/free-png-tzcob#google_vignette
- Star Wars Font by Boba Fonts: https://www.dafont.com/star-jedi.font
- The ITC Serif Gothic Font uploaded by Eladio Simonis: https://font.download/font/itc-serif-gothic-2
And this online tool:
- To remove the background of images: https://www.remove.bg/upload
Top comments (2)
UPDATE: Replaced the pixelized images of heavenly bodies with AI generated 8-bit pixel art images by Imagen 3 of Google Gemini
UPDATE 2: Replaced the hero image