This site had a major visual and structural reset in July 2026.

The main direction:

  • More academic.
  • More editorial.
  • Cleaner, easier to scan.
  • Still personal enough

I wanted the site to sit somewhere between:

  • a portfolio
  • a notebook
  • a CV
  • a talk archive

What changed

  • Rebuilt the homepage around a clearer editorial structure:
    • identity
    • current affiliations
    • current focus
    • recent talks
    • selected work
    • personal links
  • Added a stronger talks section:
    • recent talks appear on the homepage
    • the full talks page now works as a conference record
    • talk links are sharp text links instead of rounded buttons
    • images and video are attached directly to talk entries
  • Updated the main navigation:
    • added Talks
    • removed the old mobile hamburger style
    • made the navigation align better with the editorial look
  • Reworked the About, Resume, Weblog, and Now pages:
    • cleaner hierarchy
    • fewer components
    • more consistent spacing
    • more intentional writing
  • Cleaned up project structure:
    • added a Makefile
    • added a .ruby-version
    • refreshed the README
    • fixed broken talk image formats
    • improved build compatibility

Added sitemap.

Design principles

  • Academic first
    • It should foreground work, talks, writing, and context.
  • Editorial, not corporate
    • Typography and spacing carry most of the personality.
    • Lines, rules, and white space do more work than cards or panels.
    • The design should feel like a journal page.

Palette

The color system is intentionally small. The main idea is: warm paper, dark text, baby blue structure, and two secondary colors kept mostly in reserve.

  • Warm paper #fffefd

    The background. Almost white, but a little softer than pure white.

  • Ink #23201b

    The main text color. Dark, warm, and less harsh than black.

  • Muted text #5f6970

    Used for metadata, dates, secondary descriptions, and quiet context.

  • Baby blue accent #56B4E9

    The main identity color: section rules, active navigation, focus lines, and small structural accents.

  • Blue rule #dceff8

    A softer version of the blue for dividers and low-emphasis structure.

  • Accessible blue ink #247fae

    A darker blue reserved for cases where baby blue needs better contrast as text.

  • Gold reserve #F6AA00

    A secondary accent, intentionally used sparingly so the site does not become too colorful.

  • Green reserve #00A785

    Another secondary accent, available for future diagrams, status notes, or special emphasis.

Usage notes:

  • #56B4E9 should appear often enough to feel like the site identity.
  • It should not be used for long body text because the contrast is too light.
  • Thin blue rules are better than blue-filled blocks.
  • Gold and green are supporting colors, not primary colors.
  • The palette should leave the page mostly white.

Typography

Jaronchai Dilokkalayakul

Literata

Used for the main editorial title treatment. It gives the site an academic, bookish texture without making the whole interface feel old-fashioned.

Research data, talks, notes, and systems.

IBM Plex Sans

Used for body text, navigation, headings, and most interface elements. It keeps the site clear, technical, and readable across longer pages.

batch -> lakehouse -> monitoring -> evidence

IBM Plex Mono

Used for code, palette values, filenames, and technical snippets. It adds precision only where the content benefits from a more mechanical voice.