Glam Up My Markup: Sonnensystem im Star-Wars-Stil

Dies ist eine Einreichung für Frontend Challenge v24.09.04, Glam Up My Markup: Space

Was ich gebaut habe

Entdecken Sie das Sonnensystem: Eine von Star Wars inspirierte galaktische Reise

Stellen Sie sich vor, Sie stoßen auf eine legendäre Reisebroschüre aus einer weit, weit entfernten Galaxie – einen Führer zu einem mysteriösen Sternensystem, das als Sonnensystem bekannt ist. Im Geiste des Star Wars-Universums verwandelt dieses Projekt unsere eigene himmlische Nachbarschaft in ein intergalaktisches Ziel für abenteuerlustige Reisende. Von den schimmernden Umlaufbahnen der Planeten bis zum rätselhaften Asteroidengürtel und dem eisigen Kuipergürtel dient dieser Reiseführer als Ihr von den Jedi anerkannter Reisebegleiter. Vollgepackt mit Wissen über die Himmelskörper, Planeten, Monde und kosmischen Wunder, ist es wie eine holografische Karte, die Sie auf eine Sternentour durch ein System führt, das sich so exotisch anfühlt wie Tatooine und doch so vertraut wie zu Hause.

Demo

• Demo: https://menard-codes.github.io/starwars-outer-space/
• Quellcode (Github Repo): https://github.com/menard-codes/starwars-outer-space

Reise

Da ich aus dem Bereich der Frontend-Frameworks und Webkomponenten komme, war dies das erste Mal, dass ich mich mit Vanilla-CSS und JavaScript beschäftigte, ohne das HTML-Markup zu ändern – eine echte Herausforderung, die mich dazu drängte, meine Fähigkeiten in der JS-DOM-Manipulation zu verbessern und einige coole Dinge zu erkunden CSS-Funktionen. Ich habe das über ein Wochenende zusammengehackt, es ist also alles andere als perfekt und weist ein paar Macken in der Benutzeroberfläche auf. Wenn ich mehr Zeit hätte (ich wünschte, ich hätte es!), würde ich alle Ecken und Kanten glätten.

Ich habe auch einige große Ideen für zukünftige Verbesserungen. Stellen Sie sich umlaufende Monde, Parallaxeneffekte und ein interaktives Erlebnis vor, das Sie wirklich in das Sonnensystem eintauchen lässt, im Star Wars-Stil, aber in 8-Bit-Pracht. Mit nur zwei Arbeitstagen war dies ein schnelles Projekt, aber wenn ich Monate hätte, könnte ich es auf eine ganz neue Ebene der Großartigkeit bringen.

Referenzen

Ich möchte auch diese Quellen nennen, aus denen ich die Mittel für dieses Projekt bezogen habe:

• KI-Bildgenerierung: https://firefly.adobe.com/
• Bilder der Planeten, Monde und anderer Himmelskörper von der NASA: https://www.nasa.gov/
• Todesstern in 8-Bit von FanManDan16: https://www.newgrounds.com/art/view/fanmandan16/pixel-death-star
• Sternenzerstörer-Pixelkunst: https://www.pngwing.com/en/free-png-tzcob#google_vignette
• Star Wars-Schriftart von Boba Fonts: https://www.dafont.com/star-jedi.font
• Die ITC Serif Gothic-Schriftart, hochgeladen von Eladio Simonis: https://font.download/font/itc-serif-gothic-2

Und diese Online-Tools:

• So entfernen Sie den Hintergrund von Bildern: https://www.remove.bg/upload
• Bildpixelisierung: https://photo2pixel.co/ (Ich füge hier die Himmelskörperbilder ein, die ich von der NASA bekomme, um sie zu pixelieren)

Das obige ist der detaillierte Inhalt vonGlam Up My Markup: Sonnensystem im Star-Wars-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!