About
Design
The design started with Frontend Mentor's Planets Fact Site challenge. I kept the core concept but built it differently.
Features
Achievement System
Tracks exploration with 13 achievements. Monitors visits, section views, and scrolling. Progress saves to localStorage.
Canvas Animations
Custom starfield with 1,500+ stars, shooting meteors, visible planets (Mars, Jupiter, Venus, Saturn). 3D parallax responds to mouse movement. ISS follows an orbital path. Milky Way band in the background. Performance mode available for slower devices.
Dashboard
Settings and achievements in one panel. Toggle between metric/imperial units. Control animations and effects. Requires explicit consent for localStorage. Opens on first visit, remembers preferences after that.
Planet Pages
Three information views per planet. Statistics convert based on unit preferences. Each planet gets its own color theme. SVG images scale properly.
Tech Stack
Next.js 15 & React 19: App Router, SSR, static generation.
TypeScript & Tailwind: Type safety and utility-first CSS.
Canvas API: Custom animations in vanilla JavaScript.
Netlify: Auto-deploy from main branch, CDN distribution.
GitHub: Source control and CI/CD.
Tools: Claude Code and Cursor IDE.
Developer
Mike Rojas. More work at mikerojas.com