Back to Home
Celeste
Interactive visual catalog of the solar system built as one of my earliest projects, highlighting CSS animations and pure JavaScript interactions.
HTMLCSSJavaScriptStatic SiteEducation
Project Overview
Celeste is an educational, interactive website dedicated to the solar system. Serving as one of my initial steps in web development, it maps out the planets and orbital details using custom CSS animations and Vanilla JavaScript mechanics.
Key Features
- Orbital Scale Visualization: A dynamic layout simulating planet orbit movements around the sun using pure CSS transitions and keyframes.
- Planetary Info Cards: Clicking on individual planets displays card summaries containing details like mass, distance, gravity, and orbital speed.
- Responsive Layouts: Uses clean flexbox and media queries to adapt visual graphs to smaller screen constraints.
Tech Stack & Architecture
- Core Technologies: HTML5, CSS3, JavaScript (ES6)
- Styling Method: Custom CSS grid, flexbox, and
@keyframesanimations - Libraries: None — deliberately built raw to fully grasp DOM manipulation and native styles