Project Overview
For my passion project, I embarked on a journey to enhance my skills across various disciplines, particularly in design and coding. Recognizing the importance of versatility in today's rapidly evolving world, I aimed to merge my creative instincts with technical proficiency. By undertaking a project that involved designing assets and coding, I sought to deepen my understanding of User Experience, User Interface Design, and Front-End Development. This project not only allowed me to explore my interests but also empowered me to synthesize diverse skill sets into a cohesive and impactful final piece.
This project involves utilizing HTML, CSS, JavaScript, and an external JavaScript library called Fullpage.js. All assets were created using Figma and Adobe Illustrator, primarily as SVGs.
I initially planned to implement a parallax effect, where the background would shift slower than the assets in the foreground. However, after encountering numerous issues, I opted to use Fullpage.js instead. This JavaScript library enables users to create a PowerPoint-style website by organizing each page into a 'slide.' I found this approach to be the most effective way to showcase each planet. Additionally, the backgrounds were designed to seamlessly transition between each planet, creating a sensation of floating through space.
With some extra time on my hands, I decided to expand this project. I added additional elements to the universe, including black holes, stars, Voyager 1, and galaxies.
The meteors and astronaut on the website float using animation keyframes in the CSS, which change the TranslateX and TranslateY properties. Overall, I am very passionate about this project and hope to eventually make it live so that people can learn and expand their knowledge of the vast and endless universe.