July 12, 2026 · 4 min read
Hello, world: the new site
A living rendering guide for the notebook: typography, mathematics, code, images, and the ideas behind the redesign.
Welcome to the new notebook. This note still begins with a hello, but it also doubles as a living guide to everything an essay can contain here.
Hello, world. I rebuilt this site as a place where research, visual explanation, teaching, and public conversation can meet without becoming four different identities. The constellations are not decoration alone: they are a way of thinking about relationships, structure, and what becomes visible when enough points are connected.
This page is deliberately more varied than an ordinary post. It lets me check the rhythm of headings, links, lists, mathematics, images, tables, quotes, and code in both themes before I publish something more serious.
Rendering note. If this paragraph feels clearly separate from the essay without becoming a floating card, the callout component is doing its job.
A hierarchy for ideas
Good long-form pages need more than a large title. They need a hierarchy that makes scanning possible without flattening every thought into a bullet point.
A third-level heading
Body copy should remain comfortable at this width. A paragraph may include strong emphasis, quiet emphasis, a discarded idea, and inline_code() without breaking the reading rhythm. It can also link to the selected projects or to an external reference such as Observable.
A fourth-level heading
Smaller headings are useful inside a technical section, but they should not compete with the central argument. The visual difference between this line and the heading above should be obvious even when read quickly.
Lists, sequences, and progress
An unordered list is useful when order does not carry meaning:
- Ask a precise question.
- Inspect the structure of the data.
- Choose a visual form that reveals that structure.
- Annotate the exception.
- Keep uncertainty visible.
- Explain what the reader can conclude.
An ordered list is better when the sequence matters:
- Reproduce the result.
- Challenge the assumptions.
- Refine the explanation.
- Publish the method with the conclusion.
A task list should make state legible without relying on color alone:
- Build the notebook.
- Add mathematics and syntax highlighting.
- Test light and dark themes.
- Write the next field note.
A compact comparison
Tables work best when they support comparison rather than imitate a spreadsheet.
| Form | Best for | Main risk |
|---|---|---|
| Scatterplot | Relationships between two measures | Overplotting |
| Small multiples | Comparing repeated structures | Weak shared scales |
| Network | Connections and communities | Treating proximity as proof |
| Annotation | Directing attention | Explaining too much |
A visualization is not the data made visible. It is an argument about what deserves attention.
That is why design decisions belong in the method, not at the end of it.
Mathematics in the browser
This notebook supports inline mathematics such as Euler's identity, , without forcing it onto a separate line. Longer expressions can breathe in a display block:
The Lorenz system behind the homepage field is described by three coupled differential equations:
The equations are compact; their trajectories are not. That tension is part of what makes the system such a good hello.
Code as part of the essay
Code blocks should feel like editorial evidence, not screenshots pasted into an article. A filename is optional, and long lines should scroll inside the block rather than widen the page.
library(tidyverse)
set.seed(42)
stars <- tibble(
x = runif(120),
y = runif(120),
brightness = rbeta(120, 2, 5)
)
ggplot(stars, aes(x, y, alpha = brightness)) +
geom_point(color = "#A78BFA", size = 2.4) +
coord_equal() +
theme_void()Here is the same hello in TypeScript, with a line long enough to verify horizontal scrolling on a narrow screen:
const domains = [
"research",
"visualization",
"education",
"public communication",
];
const greeting = domains
.map((domain, index) => `${index + 1}. Hello from ${domain}`)
.join("\n");
console.log(greeting);A command-line block should remain readable without pretending to be an operating-system window:
npm run lint
npm run buildAnd plain structured data should keep punctuation and nesting easy to parse:
{
"message": "Hello, world",
"seed": 42,
"reproducible": true,
"themes": ["systems", "evidence", "clarity"]
}A useful warning. Syntax highlighting helps orientation, but color is not meaning. The code must remain understandable in monochrome and readable with horizontal scrolling.
An image in context
Images should carry information or presence. They should not appear merely because an article grid expects a rectangle.

The person behind the notebook, photographed rather than illustrated.
Closing the first note
Every constellation on this site is generated from a deterministic seed: the same seed produces the same sky. Like any good experiment, it is reproducible. Unlike a finished diagram, it can still invite another reading.
So this is both a test page and a small statement of intent: make complex systems legible, keep the method visible, and leave room for wonder.
Hello again. The notebook is ready.