Skip to main content
Hulash Chand
homeprojectslocus
Hulash Chand

Star Wars: Timeline of the Galaxy

←

Star Wars: Timeline of the Galaxy

↗

An interactive 3D rolodex for browsing Star Wars comics in chronological order, across both the Legends and Canon continuities: from the Dawn of the Jedi (25,793 BBY) to Marvel's Star Wars (0 ABY). No framework, no build step: just HTML, CSS 3D transforms, and vanilla JavaScript.

51Curated Comic Issues
2Continuities (Legends + Canon)
3DCSS Rolodex UI
0Frameworks / Build Steps

The embed below is the actual live build, not a screenshot. Scroll the mouse wheel or use the arrow keys to rotate through the stack, and click any cover for its full issue details.

How It Works

The dataset lives in a single JavaScript file, comics.js, split into two arrays (legends and canon) with each entry carrying year, era, age, title, issue number, publisher, format, release date, and a short synopsis.

Each comic renders as a card in a 3D stack using CSS perspective and transform-style: preserve-3d. Scrolling the mouse wheel or pressing the arrow keys drives a momentum-based rotation through the stack; there is no scroll-snap and no animation library behind it. Issues without cover art fall back to a styled title card instead of a broken image.

Clicking a card opens a modal with the full issue metadata pulled straight from the dataset.

Skills & Technologies

Vanilla JavaScriptCSS 3D TransformsData Curation & ModelingDual-Continuity DatasetResponsive Web DesignGitHub Pages

Architecture & Data Model

Rolodex Renderer

CSS perspective and transform-style: preserve-3d render each comic cover as a card in a rotating stack. Wheel and arrow-key input drive momentum-based scroll physics, with no scroll-snap or animation library involved.

CSS 3D TransformsVanilla JavaScript

Dual-Continuity Dataset

51 hand-curated comic issues split into legends and canon arrays, each entry carrying year, era, age, title, issue, publisher, format, release date, and a synopsis note.

JavaScript Data Modeling

Detail Modal

Clicking a card opens a modal with the full issue metadata (publisher, format, release year, and synopsis), sourced directly from the dataset.

Vanilla JavaScriptHTML5

Explore the comic dataset and rolodex renderer source:

↗ View on GitHub
← Back to all projects

Let's build something.

Now Playing

Utopia

Horacio Pagani