🌌 SolarExplorer — Interactive 3D Cosmic Orrery & Astronomy Platform

A production-grade, zero-JS interactive 3D Solar System Orrery and educational space platform built with semantic HTML5 and advanced CSS3. Features 14 distinct pages, custom orbital physics animations, responsive mobile navigation drawers, pure CSS data visualization widgets, and native scroll-driven reveals.

---

🌐 Live Demo & Repository

• 🚀 Live Production Site: https://solarexplorers.netlify.app/
• 💻 Source Code: https://github.com/Divyansh3105/SolarExplorer

---

📌 Project Overview & Engineering Highlights

SolarExplorer is designed to demonstrate front-end engineering excellence, modular CSS architecture, and advanced web standard capabilities without relying on heavy JavaScript frameworks or bundlers.

🌟 Key Technical Features

• Zero-JS Interactive Orrery Engine: Complex multi-body 3D planetary orbits, texture spins, and planet detail modals powered exclusively by CSS keyframe animations, CSS 3D transforms, and :has() / checkbox state toggles.
• Modular CSS Architecture (shared.css): Engineered a centralized design token system (shared.css) that eliminated over 2,800 lines of redundant CSS code, reducing per-subpage CSS bundle sizes by 80%+ (~430 lines down to ~70 lines).
• 14 Dedicated Pages: Complete coverage of all 8 major planets, the Sun, plus 4 specialized explorer pages:
  • 🪐 Dwarf Planets (Pluto, Ceres, Eris, Haumea, Makemake)
  • 🛰️ Space Missions Timeline (Sputnik to JWST & Artemis)
  • 🌕 Major Moons (Titan, Europa, Io, Enceladus, Triton, Phobos/Deimos)
  • ☄️ Asteroids & Comets (Main Belt, 16 Psyche, Halley's Comet, Oort Cloud)
• Pure CSS Data Visualizations: Custom percentage progress bars for atmospheric gas compositions and interactive Cosmic Weight & Age Matrix conversion cards on every planet page.
• Fluid & Accessible Responsive UI: Mobile-first design featuring fluid min() viewport-based globe sizing, zero-JS hamburger navigation drawers, and WCAG 2.1 AA accessible semantic markup.
• Scroll-Driven Animations: Leveraged native modern CSS @supports (animation-timeline: view()) for ultra-smooth 60 FPS scroll reveals.
• SEO & Social Open Graph Ready: Integrated Open Graph and Twitter Card metadata across all 14 pages, along with sitemap.xml, robots.txt, and Web App Manifest (site.webmanifest).

---

🛠️ Tech Stack & Technical Architecture

• Markup & Structure: HTML5 (Semantic elements, Aria accessibility attributes, Open Graph metadata)
• Styling & Layout: CSS3 (CSS Variables, Flexbox, CSS Grid, 3D Transforms, Keyframe Animations, @supports, Backdrop Filters)
• Fonts & Graphics: Google Fonts (Orbitron & Inter), Remix Icon CDN, Font Awesome 6.5.0
• Hosting & Deployment: Netlify / GitHub Pages

---

📁 Repository Structure

SolarExplorer/
│── index.html              # Main Orrery homepage & size comparison
│── Styles.css               # Homepage & solar system simulation styles
│── shared.css               # Global design system & centralized UI tokens
│── sitemap.xml              # Search engine XML sitemap
│── robots.txt               # Crawler directives
│── site.webmanifest         # PWA / Mobile Web App manifest
│── LICENSE                  # MIT License
│
├── Sun/                     # Sun deep-dive page & styles
├── Mercury/                 # Mercury deep-dive page & styles
├── Venus/                   # Venus deep-dive page & styles
├── Earth/                   # Earth deep-dive page & styles
├── Mars/                    # Mars deep-dive page & styles
├── Jupiter/                 # Jupiter deep-dive page & styles
├── Saturn/                  # Saturn deep-dive page & styles
├── Uranus/                  # Uranus deep-dive page & styles
├── Neptune/                 # Neptune deep-dive page & styles
│
├── DwarfPlanets/            # Dwarf Planets Explorer (Pluto, Ceres, Eris, etc.)
├── Missions/                # Space Exploration Missions Vertical Timeline
├── Moons/                   # Major Moons Guide (Titan, Europa, Io, etc.)
├── Asteroids/               # Asteroids, 16 Psyche & Comets Guide
└── Media/                   # Planet textures, banners, and favicons

---

🚀 Local Development Setup

1. Clone the repository:

   git clone https://github.com/Divyansh3105/SolarExplorer.git

2. Navigate to the workspace directory:

   cd SolarExplorer

3. Launch local dev server:
   • Open index.html directly in any web browser, or run via VS Code Live Server / npx serve .

---

📊 Performance & Optimization Summary

Metric	Achievement
JS Runtime Overhead	0 KB (100% CSS logic)
CSS Refactoring Impact	~2,800+ lines removed
Page Load Speed	< 0.5s (Preconnected CDNs & light bundles)
Mobile Responsiveness	Fluid min(px, 80vmin) scaling & CSS drawers
Page Count	14 fully styled pages

---

📜 License

This project is open-source under the MIT License.

---

👨‍💻 Author

Divyansh Garg

• 🌐 Portfolio: divyansh3105.github.io/Portfolio
• 💼 LinkedIn: linkedin.com/in/divyanshgarg3105
• 💻 GitHub: @Divyansh3105

⭐ If you find this project impressive, please consider giving it a star on GitHub!