This is my first hackathon project!
- Core Engine: HTML5 & Vanilla JavaScript (ES6+)
- Styling & UI: Tailwind CSS v4 (Modern Utility-First Framework)
- Motion Design: GSAP (GreenSock Animation Platform) + ScrollTrigger
- Visual Effects: Custom CSS3 (Glassmorphism, Cinematic Parallax, 3D CSS Transforms)
- Typography: Google Fonts (Cinzel for cinematic titles, Montserrat for technical data)
- Assets: Optimized SVG iconography & Dynamic Media Overlays
The Journey to Mars is more than just a landing page—it is a cinematic digital portal designed to transport users 140 million miles across the solar system. Built with a focus on high-fidelity user experience and immersive storytelling, this project serves as a technical showcase of modern web capabilities. From the moment the "warp drive" kicks in, users are guided through a carefully choreographed narrative that blends scientific history with futuristic design.
At the heart of the experience is the Global Achievements grid, a statically-rendered terminal of planetary discovery. It highlights the monumental breakthroughs of NASA, ISRO, ESA, and CNSA, stripping away traditional web clutter in favor of a clean, glassmorphic interface that emphasizes human ingenuity. Following the data is the Astronaut Perspectives section—a parallax-driven carousel that pins and cycles through the moving quotes of legends like Buzz Aldrin. By utilizing GSAP ScrollTrigger, the site creates a tactile sense of depth and weight, mirroring the physical challenges of interplanetary travel.
Every pixel is intentional: the custom magnetic cursors act as a digital HUD, the subtle film-grain overlays provide a documentary-like texture, and the responsive typography ensures readability from the largest desktop monitors down to mobile handsets. This project represents the intersection of science and art, proving that technical documentation can be as breathtaking as the galaxies it describes.