Museum Timeline — Case Study

At a Glance

3

Core Pages

Timeline, Era Detail, and Compare — three distinct interaction modes covering discovery, depth, and analysis.

Live

Deployed on GitHub Pages

Static front-end served at dhruvi0805.github.io/museum — zero build step to run locally.

~1700

Lines of CSS

Unified dark-mode stylesheet with smooth scrolling via Lenis and image carousels for artwork display.

Overview

What it is

Museum Timeline is a static web application that guides visitors through major art movements chronologically. Each era features curated artworks, artist biographies, and historical context — presented in an elegant dark-mode UI with smooth scrolling and image carousels.

Why it exists

Art history resources online are dense, poorly structured, and rarely designed for casual exploration. Museum Timeline makes art history discoverable — letting visitors browse chronologically, dive into a single movement, or compare two eras side-by-side.

Pages & Features

Page · index.html

Timeline

Scrollable overview of all art eras with a sticky sidebar navigation — the primary discovery surface.

Chronological scroll from ancient history to the modern era
Sidebar navigation synced to scroll position
Era cards with thumbnail artwork and movement name
Smooth scroll powered by Lenis

Page · detail.html?era={slug}

Era Detail

Deep dive into a single movement — artworks, artist biographies, and historical context in one layout.

Dynamic URL routing via query parameter (?era=slug)
Image carousel for curated artwork display
Artist biography cards with timeline context
Historical and cultural framing for each movement

Page · compare.html

Compare

Side-by-side comparison of any two movements — letting visitors see contrasts in style, period, and influence at a glance.

Dual-panel layout for direct visual comparison
Select any two eras from the full dataset
Parallel display of artworks, dates, and characteristics

Data · content/eras.json

Single Source of Truth

All era and artwork data lives in one JSON file — edited directly, then compiled into a static data module for the site.

content/eras.json — master data for all eras and artworks
npm run build:data regenerates src/data/data.js
npm run check-images validates all artwork image URLs via Axios
Artwork images sourced from Wikimedia Commons (public domain)

Technology Stack

HTML CSS (~1,700 lines) Vanilla JS Lenis — Smooth Scroll Axios — Image Validation

Static front-end pages with a unified stylesheet — no build step required to run locally. Open index.html directly in a browser or serve with npx serve .

React TypeScript Next.js (detail page)

Component layer lives in src/components/movements/ — React components for the carousel, timeline nav, and movement cards. The era detail page uses a Next.js component at src/app/detail/.

GitHub Pages main branch deploy

Deployed to GitHub Pages from the main branch. Pushing to main updates the live site automatically. Live at: dhruvi0805.github.io/museum

Content Workflow

All era and artwork data lives in content/eras.json — the single source of truth. The static pages consume a generated copy at src/data/data.js.

I

Edit the Source

Edit content/eras.json directly with updated era metadata, artworks, or artist info. Never edit src/data/data.js by hand — it is overwritten on every build.

eras.json

II

Regenerate Data

Run npm run build:data to regenerate src/data/data.js from the master JSON. This syncs all static pages to the latest content automatically.

npm run build:data

III

Validate Images

Run npm run check-images to validate all artwork image URLs using Axios — catching broken Wikimedia Commons links before they reach production.

npm run check-imagesAxios

IV

Deploy

Commit both content/eras.json and src/data/data.js and push to main. GitHub Pages automatically deploys the updated site.

GitHub PagesAuto-deploy

Project Structure

Static Pages

index.html — Timeline landing page
detail.html — Era detail page template
compare.html — Compare two movements
style.css — Unified stylesheet

Source & Scripts

content/eras.json — Master data source
src/js/ — Page logic (app, detail, compare)
src/components/movements/ — React components
scripts/ — sync-data & check-image-urls