Glam Up My Markup : Système solaire sur le thème de Star Wars

Ceci est une soumission pour Frontend Challenge v24.09.04, Glam Up My Markup : Space

Ce que j'ai construit

Explorez le système solaire : un voyage galactique inspiré de Star Wars

Imaginez tomber sur une brochure de voyage légendaire provenant d'une galaxie lointaine, très lointaine : un guide d'un mystérieux système stellaire connu sous le nom de système solaire. Dans l'esprit de l'univers Star Wars, ce projet transforme notre propre quartier céleste en une destination intergalactique pour les voyageurs aventureux. Des orbites chatoyantes des planètes à l’énigmatique ceinture d’astéroïdes et à la ceinture glacée de Kuiper, ce guide est votre compagnon de voyage approuvé par les Jedi. Rempli de connaissances sur les corps célestes, les planètes, les lunes et les merveilles cosmiques, c'est comme une carte holographique vous guidant dans un voyage stellaire à travers un système aussi exotique que Tatooine, mais aussi familier que chez vous.

Démo

• Démo : https://menard-codes.github.io/starwars-outer-space/
• Code source (Github Repo) : https://github.com/menard-codes/starwars-outer-space

Voyage

Venant du domaine des frameworks frontend et des composants Web, c'était la première fois que je plongeais dans Vanilla CSS et JavaScript sans altérer le balisage HTML - un véritable défi qui m'a poussé à améliorer mes compétences en manipulation JS DOM et à explorer des fonctionnalités intéressantes. Fonctionnalités CSS. J'ai hacké cela ensemble pendant un week-end, donc c'est loin d'être parfait et présente quelques bizarreries d'interface utilisateur. Si j’avais plus de temps (j’aurais aimé !), j’atténuerais toutes les aspérités.

J'ai également quelques grandes idées pour de futures améliorations. Imaginez des lunes en orbite, des effets de parallaxe et une expérience interactive qui vous plonge véritablement dans le système solaire, à la manière de Star Wars, mais dans une gloire 8 bits. Avec seulement deux jours pour travailler dessus, c'était un projet rapide, mais si j'avais des mois, je pourrais l'amener à un tout nouveau niveau de génialité.

Références

Je tiens également à créditer ces sources où j'ai obtenu les atouts pour ce projet :

• Génération d'images IA : https://firefly.adobe.com/
• Photos des planètes, lunes et autres corps célestes par la NASA : https://www.nasa.gov/
• Étoile de la mort en 8 bits par FanManDan16 : https://www.newgrounds.com/art/view/fanmandan16/pixel-death-star
• Pixel art Star Destroyer : https://www.pngwing.com/en/free-png-tzcob#google_vignette
• Police Star Wars par Boba Fonts : https://www.dafont.com/star-jedi.font
• La police gothique ITC Serif téléchargée par Eladio Simonis : https://font.download/font/itc-serif-gothic-2

Et ces outils en ligne :

• Pour supprimer l'arrière-plan des images : https://www.remove.bg/upload
• Pixelisation d'images : https://photo2pixel.co/ (J'alimente ici les images de corps célestes que je reçois de la NASA pour les pixeliser)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!