Koutian Wu

Koutian Wu

AI4Sci PhD @ UT-Austin. ex-Undergrad @ USTC.

Juan Santiago Chronicle — SOTA Design Review

Juan Santiago Chronicle — SOTA Design Review

Goal: build a premium professor-chronicle page by borrowing proven patterns from open-source timeline, map-story, and editorial storytelling systems instead of inventing a bespoke interaction model too early.

1) Top 5 open-source references

1. TimelineJS3

  • Repo: https://github.com/NUKnightLab/TimelineJS3
  • Demo: https://timeline.knightlab.com/
  • Why it matters:
    • Best-known open-source editorial timeline pattern.
    • Strong slide-by-slide chronology with date precision, media support, and narrative pacing.
    • Good reminder that the timeline should be story-first, not just a dense data table.

2. StoryMapJS

  • Repo: https://github.com/NUKnightLab/StoryMapJS
  • Demo: https://storymap.knightlab.com/
  • Why it matters:
    • Canonical open-source “map + narrative card” reference.
    • Useful for the academic-journey / geography layer: place, caption, image, transition.
    • Especially relevant because Santiago’s biography has clear location chapters (Florida -> Illinois -> Stanford).

3. Odyssey.js

  • Repo: https://github.com/CartoDB/odyssey.js
  • Demo: https://cartodb.github.io/odyssey.js/
  • Why it matters:
    • Strong precedent for scroll-driven map storytelling.
    • More editorial than StoryMapJS: narrative blocks can drive map state, not just simple slides.
    • Helpful pattern for tying chronology and geography into a single reading flow.

4. vis-timeline

  • Repo: https://github.com/visjs/vis-timeline
  • Demo: https://visjs.github.io/vis-timeline/examples/timeline/
  • Why it matters:
    • Not as editorial out of the box, but excellent for dense professional timelines.
    • Strong zooming, grouped items, ranges, and interaction model.
    • Useful when the page needs a second, more “reference-grade” timeline view beyond the hero narrative.

5. Pageflow

  • Repo: https://github.com/codevise/pageflow
  • Why it matters:
    • Open-source multimedia storytelling system with a more museum / magazine sensibility.
    • Valuable less for direct adoption and more for structure: chaptering, full-bleed media, pacing, transitions, and premium editorial framing.
    • Good reminder that the site should feel like a curated exhibition, not a generic academic CV.

2) What we should directly adopt vs avoid

Directly adopt

  • From TimelineJS3:
    • One clear chronological spine.
    • Each milestone as a self-contained story card with headline, date, short narrative, and optional media.
    • Horizontal/sectional pacing principle: one important beat at a time.
  • From StoryMapJS:
    • A chaptered geography layer.
    • One location per academic phase, with concise explanatory copy.
    • Camera transitions that move only when the story changes.
  • From Odyssey.js:
    • Scroll or chapter progression driving map/timeline state.
    • Sticky visual pane + narrative pane layout.
    • Treat map movement as narrative punctuation, not constant motion.
  • From vis-timeline:
    • Secondary “archive/reference” mode for power users.
    • Grouping milestones into phases: Education, Postdoc, Faculty, Recognition, Leadership, Academies.
    • Range bars for long eras, points for pivotal moments.
  • From Pageflow:
    • Full-bleed chapter breaks.
    • Strong rhythm: intro -> formation -> faculty appointment -> recognition -> leadership -> legacy.
    • High production-value feeling through spacing, restraint, and media hierarchy.

Avoid

  • Do not ship raw TimelineJS3 or StoryMapJS embeds as the main experience.
    • They are useful references, but the default styling feels educational / newsroom / template-like, not premium-professor-editorial.
  • Do not over-animate the map.
    • Constant camera movement makes biography pages feel gimmicky.
  • Do not make every award a milestone.
    • Too many badges turns the story into a CV wall.
  • Do not force users into a single giant scrollytelling path with no quick navigation.
    • Professor pages also need a skimmable mode.
  • Do not use glossy “toy” sci-fi styling without evidence.
    • The final version should feel more archival, elegant, and source-backed.

3) Recommended information architecture for the Juan Santiago page

A. Hero / thesis

  • Name, one-sentence thesis, portrait or restrained abstract visual.
  • Short framing line: undergraduate foundation -> doctoral research -> Stanford faculty -> national academy member.
  • 3-5 proof chips only, not 10+.

B. At-a-glance chronology

  • Compact horizontal phase rail:
    • Undergraduate (Florida)
    • Graduate (UIUC)
    • Postdoc (Beckman)
    • Stanford faculty
    • Early recognition
    • Fellowships
    • Leadership
    • National academies
    • Research impact
    • Mentorship legacy
  • Clicking a phase jumps to that chapter.

C. Main narrative chapters

Each chapter should have:

  • date / time range
  • chapter title
  • 120-220 words of narrative
  • 1-3 key proof points
  • optional image / award / source link

Recommended chapters:

  1. Undergraduate foundation
  2. Graduate formation at Illinois
  3. Postdoctoral research
  4. Stanford faculty appointment
  5. Early federal recognition
  6. Professional society fellowships
  7. Academic and editorial leadership
  8. National academy elections
  9. Research productivity and impact
  10. Mentorship legacy

D. Geography module

  • A separate but integrated map section.
  • 3-4 key place markers only.
  • Each place corresponds to a chapter, not every event.
  • Map should answer: how did the journey move across institutions?

E. Recognition / honors section

  • Curated award timeline with context.
  • Better structure than a raw award list:
    • Federal awards
    • Professional society fellowships
    • National academy elections
  • Keep it evidence-driven and selective.

F. Archive / sources

  • Expandable source list or evidence drawer.
  • This is what upgrades the page from tribute-style to museum/editorial credibility.

4) Visual / UX principles to make it feel premium, not toy

  • Favor editorial elegance over academic-dashboard gloss.
    • More off-white, charcoal, muted blue/green accents.
    • Less neon, fewer decorative orbit effects.
  • Build around typography first.
    • Premium biography pages feel expensive because the text hierarchy is calm and deliberate.
  • Use motion sparingly.
    • Fade, parallax, and camera transitions only at chapter boundaries.
  • Give milestones breathing room.
    • Fewer cards, more substance per card.
  • Distinguish “major chapter” vs “minor proof point.”
    • Not everything deserves equal visual weight.
  • Use maps as orientation, not spectacle.
    • Clean basemap, limited markers, subtle routes.
  • Prefer real artifacts over abstract decoration.
    • Photos, award certificates, publication covers, conference visuals, citations.
  • Maintain dual reading modes:
    • skim mode for busy visitors
    • deep mode for readers who want the full chronology
  • Make source credibility visible.
    • Small citations and outbound references create trust fast.

5) Exact build recommendation: what stack to use now

Recommendation

Build this now as a lightweight custom site, not as an iframe composition of third-party tools.

Stack

  • Framework: Astro
  • UI islands: React (only where interaction is needed)
  • Styling: Tailwind CSS or plain CSS modules (either is fine; Tailwind is faster if the team wants speed)
  • Map: MapLibre GL JS
  • Scroll/chapter behavior: custom lightweight intersection-observer logic inspired by Odyssey.js / editorial scrollytelling patterns
  • Timeline rendering:
    • custom chapter timeline for the main narrative
    • optional vis-timeline secondary view for “full chronology / archive” mode
  • Content source: structured JSON or YAML in-repo for milestones, chapters, locations, awards, and sources
  • Deployment: static build on GitHub Pages / Vercel / Netlify

Why this stack now

  • Astro keeps the site mostly static, fast, and easy to ship.
  • React islands let us add only the interactive map/timeline pieces.
  • MapLibre avoids lock-in and is enough for a polished biography map.
  • A custom narrative timeline will look far better than raw TimelineJS styling.
  • vis-timeline can be added later only if a dense reference view becomes necessary.
  1. Define a clean content schema first:
    • chapters.json
    • locations.json
    • timeline-events.json
    • sources.json
  2. Build the page as 8-10 curated chapters, not dozens of equal cards.
  3. Sync chapter scroll state with the map.
  4. Add a compact phase rail for jumping.
  5. Add an archive drawer / sources panel last.

Bottom line

The right move is: borrow the information architecture of TimelineJS3 + StoryMapJS + Odyssey.js, but implement a custom editorial surface. That gives us proven storytelling structure without inheriting the dated visual language of off-the-shelf embeds.