Colophon
A short note on how rather than what — the design choices, the knowledge graph, and the pipeline that keeps everything in sync.
This site is a small experiment in making an academic personal page that behaves like the work it represents — interconnected concepts, mechanisms visible underneath the surface, room for the reader to wander. It's hand-rolled HTML, CSS, and a bit of JavaScript: no framework, no build step, no tracking. The source lives on GitHub.
The most distinctive feature is the research graph — a force-directed visualization where each node is a concept extracted from one of my publications and each edge encodes a theoretical relationship. The contour lines under the nodes are a topographic rendering of spreading activation — a computational model of how concepts in memory illuminate each other along associative pathways (Collins & Loftus, 1975). The same field also drives the small animation on the home page.
Nodes are extracted from full paper text using a small Node CLI that
asks Claude for a structured set of {id, label, weight, cluster,
level} tuples per paper. A separate pass classifies every node by
abstraction level — theory, construct, method,
mechanism, or domain — so that the rendered graph can
show only the mid-level theoretical scaffolding by default and hide
specific brain regions or instruments unless explicitly requested.
Clusters correspond to my seven research areas. Their highlighter colors (slate, heliotrope, violet, ultra red, laser lemon, mac & cheese, mint) carry meaning only inside graph and publication contexts — elsewhere on the site the same palette is purely decorative.
My CV lives in a separate LaTeX
repository built with the awesome-cv template. The bib files
in that repo are the source of truth for publications. A small Node
script (data/sync-bib.js) parses them into a structured
publications.json and updates the graph's
meta.papers entries. A GitHub Actions workflow runs the
sync nightly so this site stays current as new papers are added, with
no manual step. The published CV PDF is itself a release artifact —
the viewer fetches shabnam-hakimi-cv.pdf from the CV repo's
latest release on each visit.
The visual language is graph paper — paper-warm background, fine grid in two scales, and ink-blue accents — chosen because most of my early research notes still live in physical notebooks of the same kind. The typefaces are DM Sans for display and Space Mono for everything else; together they're meant to read as "researcher's draft" rather than "polished portfolio."
Small details: a custom + crosshair cursor that scales on interactive elements, animated Eulerian path doodles in the page backgrounds, a section-marker palette drawn from Crayola highlighter colors, and structural borders snapped to the 16-pixel grid so the typography lines up with the paper underneath.
If anything here doesn't render right, or you notice something broken, I'd love to hear about it — contact info is on the home page.