Glam Up My Markup: Star Wars Themed Solar System

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/
• Pictures of the Planets, moons, and other heavenly bodies by NASA: https://www.nasa.gov/
• 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 these online tools:

• To remove the background of images: https://www.remove.bg/upload
• Image Pixelization: https://photo2pixel.co/ (I feed here the heavenly body pictures I get from NASA to pixelize them)

The above is the detailed content of Glam Up My Markup: Star Wars Themed Solar System. For more information, please follow other related articles on the PHP Chinese website!