Sri Ram's Memory Thread

A single-page personal memory timeline — a vertical "thread" running down the page with memory cards branching left and right, newest at the top, travelling backwards to the beginning.

React + Vite. Lenis for smooth scrolling, Framer Motion for the scroll-triggered reveals.

Run it

npm install
npm run dev        # http://localhost:5173
npm run build      # → dist/
npm run preview    # serve the build locally

Deploy (Vercel)

Import the repo — Vercel detects Vite. Otherwise: framework Vite, build npm run build, output directory dist.

Your date of birth

src/data/memories.js opens with:

export const BORN = "2002-11-04";

Every "Age N" on the page — and the "Born Monday, 4 November 2002" line in the header — is worked out from it, so ages are never typed by hand and never drift.

Editing your memories

Same file, the MEMORIES array:

{
  id: "m3",
  title: "First Solo Journey",
  when:  "",                // leave empty — the age is calculated. Text here overrides it
  date:  "2019-06-21",      // YYYY-MM-DD; weekday and age are derived from it
  dateEnd: "",              // optional second day — stamp reads "Sat–Sun · 2–3 May 2026"
  location: "Kochi",        // optional subtitle under the title; omit and the line vanishes
  category: "travel",       // milestone · travel · tech · career · people
  art:   "journey",         // which animated illustration to draw (list below)
  photo: null,              // or "/images/first-journey.jpg"
  story: "One bag, a ticket I booked myself…"
}

Order doesn't matter — the thread sorts itself newest-first by date; an entry with no date sits at the top until you give it one. The card shows the first three lines of story; clicking it opens the whole thing.

Illustrations

Thirteen animated scenes in src/illustrations.js, each drawn in the same style and tinted by the memory's accent colour:

desk · trophy · journey · laptop · imax · phone · bicycle · cinema · school · home · festival · train · sea

For a photo instead, drop the file in public/images/ and set photo: "/images/your-file.jpg". It replaces the illustration on both the card and the expanded view.

Categories

milestone · travel · tech · career · people — each sets the accent hue and the chip on the picture. Accents run vibrant near "today" and fade toward sepia at the earliest memories, so the whole thread ages as you scroll.

Layout of the code

index.html              Vite entry — meta tags, fonts, #root
src/main.jsx            mounts <App />
src/App.jsx             masthead, thread, cards, expanded view
src/data/memories.js    BORN, MEMORIES, CATEGORIES  ← the file you edit
src/illustrations.js    the 13 animated SVG scenes
src/lib/dates.js        weekday, long date, age from BORN, sorting
src/lib/accent.js       category hue aged toward sepia down the thread
src/styles.css          the whole design system, light and dark

All motion stops under prefers-reduced-motion.