Problem
Nearly eight centuries of one dynasty is hard to hold in your head from a wall of prose. I wanted the map and the cast to move with the timeline instead of sitting in a static figure you scroll past.
An interactive history of the Abbasid Caliphate
A scroll-driven history of the Abbasid Caliphate, 750 to 1517, with a map that reshades as the empire grows and shrinks. Static HTML and a little Alpine, hosted free on Pages with no build step.
Stack
HTMLAlpine.jsSVGGitLab Pages
Approach
One static page. Alpine drives the interactions, and the territory map is SVG path data generated offline then reshaded era by era. The whole thing ships to Pages on push, with nothing to build in between.
Outcome
A history you scroll through in a few minutes, the map redrawing beside you as the borders move. It loads at once and costs nothing to host, with no pipeline to babysit.
What shipped
Five pieces, one page
- 01Six chronological eras with expandable event cards
- 02A territory map that reshades as control shifts, era to era
- 03A Who's Who panel that tracks the event currently in view
- 04Glossary tooltips and a source reference on every event
- 05One static page, deployed free to GitLab Pages on push
See it live
Scroll from 750 to 1517, watch the map redraw.
It is live and free to open, no sign-up and nothing to install.
Similar shape of problem? The first conversation is a call, not a proposal.
Start a conversation