Glam Up My Markup: Sistem Suria Bertemakan Star Wars

Ini adalah penyerahan untuk Frontend Challenge v24.09.04, Glam Up My Markup: Space

Apa yang Saya Bina

Terokai Sistem Suria: Perjalanan Galaksi Berinspirasikan Star Wars

Bayangkan terjumpa brosur perjalanan legenda dari galaksi yang jauh, jauh—panduan kepada sistem bintang misteri yang dikenali sebagai Sistem Suria. Dalam semangat alam semesta Star Wars, projek ini mengubah kejiranan cakerawala kita sendiri menjadi destinasi antara galaksi untuk pengembara yang mencabar. Daripada orbit planet yang berkilauan kepada tali pinggang asteroid yang penuh teka-teki dan Tali Pinggang Kuiper yang berais, panduan ini berfungsi sebagai teman perjalanan anda yang diluluskan oleh Jedi. Penuh dengan pengetahuan tentang benda-benda langit, planet, bulan dan keajaiban kosmik, ia seperti peta holografik yang membawa anda dalam pengembaraan cemerlang melalui sistem yang terasa eksotik seperti Tatooine, namun begitu akrab seperti rumah.

Demo

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

Perjalanan

Berasal dari bidang rangka kerja bahagian hadapan dan komponen web, ini merupakan kali pertama saya menyelami CSS dan JavaScript vanila tanpa mengubah penanda HTML—cabaran sebenar yang mendorong saya untuk meningkatkan kemahiran saya dalam manipulasi DOM JS dan meneroka beberapa yang menarik Ciri CSS. Saya menggodam ini bersama-sama pada hujung minggu, jadi ia jauh dari sempurna dan mempunyai beberapa ciri UI. Jika saya mempunyai lebih banyak masa (saya harap saya lakukan!), saya akan merapikan semua bahagian tepi yang kasar.

Saya juga mempunyai beberapa idea besar untuk penambahbaikan pada masa hadapan. Bayangkan bulan mengorbit, kesan paralaks dan pengalaman interaktif yang benar-benar membenamkan anda dalam Sistem Suria, gaya Star Wars, tetapi dalam kegemilangan 8-bit. Dengan hanya dua hari untuk menyelesaikannya, ini adalah projek yang pantas, tetapi jika saya mempunyai masa berbulan-bulan, saya boleh membawanya ke tahap kehebatan yang baharu.

Rujukan

Saya juga ingin menghargai sumber ini di mana saya mendapat aset untuk projek ini:

• Penjanaan imej AI: https://firefly.adobe.com/
• Gambar Planet, bulan dan benda langit yang lain oleh NASA: https://www.nasa.gov/
• Death Star dalam 8-bit oleh FanManDan16: https://www.newgrounds.com/art/view/fanmandan16/pixel-death-star
• Seni piksel Pemusnah Bintang: https://www.pngwing.com/ms/free-png-tzcob#google_vignette
• Fon Star Wars oleh Boba Font: https://www.dafont.com/star-jedi.font
• Fon ITC Serif Gothic yang dimuat naik oleh Eladio Simonis: https://font.download/font/itc-serif-gothic-2

Dan alatan dalam talian ini:

• Untuk mengalih keluar latar belakang imej: https://www.remove.bg/upload
• Pixelisasi Imej: https://photo2pixel.co/ (Saya suapkan di sini gambar badan syurga yang saya dapat daripada NASA untuk mengpikselkannya)

Atas ialah kandungan terperinci Glam Up My Markup: Sistem Suria Bertemakan Star Wars. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!