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 HTML, Alpine.js, SVG, GitLab Pages

Live abbasids.org

A single-page, scroll-driven history of the Abbasid Caliphate, from the revolution in 750 to the last shadow-caliph in Cairo in 1517. Static HTML with a little Alpine for the interactive parts, and an SVG territory map that redraws itself era by era. No build step between the source and the live site. It is the same boring, durable stack this blog runs on, pointed at eight centuries of history instead of a services page.

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.

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

Six chronological eras with expandable event cards

A territory map that reshades as control shifts, era to era

A Who's Who panel that tracks the event currently in view

Glossary tooltips and a source reference on every event

One static page, deployed free to GitLab Pages on push

See it live

It is live and free to open, no sign-up and nothing to install. Scroll from 750 to 1517 and watch the map redraw.

Open the live site →

The Abbasid Caliphate interactive history hero screen

Similar shape of problem? The first conversation is a call, not a proposal.

Start a conversation