auto: 2026-03-23T14:54:44Z
This commit is contained in:
parent
5cfbfbc0ef
commit
c8bc7d65c2
|
|
@ -0,0 +1,206 @@
|
|||
---
|
||||
title: Colophon
|
||||
date: 2026-03-21
|
||||
modified: 2026-03-21
|
||||
status: "Draft"
|
||||
tags: [meta]
|
||||
abstract: On the design, tools, and philosophy of this site — and by extension, its author.
|
||||
---
|
||||
|
||||
::: dropcap
|
||||
A personal website is not a publication. It is a position. A publication presents work
|
||||
finished and sealed; a position is something you inhabit, argue from, and occasionally
|
||||
revise in public. Every design decision on this site — the typeface, the build system,
|
||||
the absence of tracking, the presence of confidence scores — encodes a value. This page
|
||||
explains those values, and why they took the form they did.
|
||||
:::
|
||||
|
||||
What follows is a colophon in the old sense: a printer's note at the end of the book
|
||||
recording how it was made, who made it, and with what. The difference is that here the
|
||||
printer and the author are the same person, and the process of making is itself a form
|
||||
of argument.
|
||||
|
||||
---
|
||||
|
||||
## Typography
|
||||
|
||||
::: dropcap
|
||||
[TODO: Spectral as body typeface. Open with the observation the reader is already
|
||||
inside — they are reading Spectral right now. History: Production Type, 2017, designed
|
||||
for screen. Why a humanist serif rather than a geometric or transitional. The optical
|
||||
size range and why it matters at small sizes.]
|
||||
:::
|
||||
|
||||
[TODO: The [OpenType]{.smallcaps} features — `smcp`, `onum`, `liga`, `calt` — and why
|
||||
self-hosting is required to use them.]^[Google Fonts strips OpenType features during
|
||||
subsetting for bandwidth. Self-hosting with `pyftsubset` preserves `smcp` (small
|
||||
capitals), `onum` (old-style figures), `liga` (common ligatures), and the full optical
|
||||
size range. The difference is visible: old-style figures sit on the baseline rather
|
||||
than hanging above it, small capitals are drawn to match the x-height rather than being
|
||||
shrunken full caps, and ligatures prevent collisions in letter pairs like *fi* and *fl*.]
|
||||
|
||||
[TODO: Fira Sans for [UI]{.smallcaps} and headers. What humanist warmth means in a
|
||||
sans-serif and why it pairs well with Spectral. JetBrains Mono for code — code should
|
||||
look like code.]
|
||||
|
||||
The monochrome palette is a discipline. Color is often used to do work that typography
|
||||
should do: distinguishing hierarchy, marking emphasis, signaling state. When those
|
||||
functions are handled by weight, size, and spacing instead, color becomes available
|
||||
for the things it cannot be substituted for — and on a site with no data visualizations
|
||||
requiring color encoding, those things turn out to be very few.^[The one exception is
|
||||
the heatmap on the statistics page, which uses a four-step greyscale scale. Even there,
|
||||
the encoding is luminance rather than hue.]
|
||||
|
||||
---
|
||||
|
||||
## The Build
|
||||
|
||||
::: dropcap
|
||||
[TODO: Hakyll and Pandoc. Why Haskell. The compile step as philosophy — this site is
|
||||
a program and the content is the source code. The analogy to compiled software: readers
|
||||
receive a deterministic artifact, not a runtime rendering decision.]
|
||||
:::
|
||||
|
||||
[TODO: What Pandoc [AST]{.smallcaps} filters do. The filter chain: wikilinks →
|
||||
preprocessor, then sidenotes, smallcaps, dropcaps, links, images, math. All
|
||||
transformation before the reader arrives.]^[The full pipeline: Markdown source →
|
||||
Pandoc [AST]{.smallcaps} → citeproc → filter chain (sidenotes, smallcaps, dropcaps,
|
||||
wikilinks, external link classification, responsive images) → HTML. Complex math goes
|
||||
through a second pass: KaTeX renders server-side at build time, producing static
|
||||
[HTML]{.smallcaps}+MathML. No math rendering happens in the browser.]
|
||||
|
||||
[TODO: The semantic search model — self-hosted [ONNX]{.smallcaps} weights served
|
||||
same-origin, no external [API]{.smallcaps} calls. Why this matters for the site's
|
||||
privacy posture.]
|
||||
|
||||
[TODO: Build telemetry — pointer to `/build/` and `/stats/` for the empirical picture.
|
||||
This section covers intent; those pages cover state.]
|
||||
|
||||
---
|
||||
|
||||
## The Computing Environment
|
||||
|
||||
::: dropcap
|
||||
[TODO: The organizing principle for this section: configuration is code, privacy is
|
||||
a first principle, tools should be earned rather than merely used. These are not
|
||||
preferences but positions, and this site is downstream of them.]
|
||||
:::
|
||||
|
||||
### Desktop
|
||||
|
||||
[TODO: Gentoo Linux, Hyprland, Levshell (custom shell via Quickshell). Why Gentoo:
|
||||
compilation for performance, fine-grained [USE]{.smallcaps} flag control, the
|
||||
community. Why Hyprland: tiling window management as a productivity commitment.
|
||||
[AMD]{.smallcaps} hardware throughout.]^[The personal computing setup is documented
|
||||
in greater depth on the [[Me]] page. This section focuses on what is directly
|
||||
relevant to how this site is built and maintained.]
|
||||
|
||||
### Laptop
|
||||
|
||||
[TODO: Arch Linux on ThinkPad P-series. Why Arch rather than Gentoo on battery-
|
||||
constrained hardware. The continuity of the Hyprland environment across machines —
|
||||
the same keybindings, the same visual language, the same muscle memory.]
|
||||
|
||||
### Editor
|
||||
|
||||
[TODO: Emacs. Everything written and coded in Emacs. The relationship between the
|
||||
editor and the content — writing Markdown in Emacs with a Hakyll watcher running is
|
||||
as close to a [WYSIWYG]{.smallcaps} experience as the workflow gets.]
|
||||
|
||||
### Privacy-First Computing
|
||||
|
||||
[TODO: Self-hosted email and [VPN]{.smallcaps}. LibreWolf over Firefox (the Chromium
|
||||
monopoly and Mozilla's drift). GrapheneOS. The principle: privacy as a first principle
|
||||
means building the infrastructure first, not bolting on settings after. The same
|
||||
principle applies to this site — no tracking is not a policy decision, it is an
|
||||
architectural one.]
|
||||
|
||||
---
|
||||
|
||||
## [AI]{.smallcaps} and This Site
|
||||
|
||||
::: dropcap
|
||||
This site was built in collaboration with Claude. The Pandoc filters, the [CSS]{.smallcaps},
|
||||
the JavaScript, the Hakyll build system — much of the infrastructure emerged from an
|
||||
iterative dialogue between author and model. This is worth stating plainly, because
|
||||
the site's content argues for a specific position on [AI]{.smallcaps} use, and that
|
||||
position is most legible when the colophon is honest about where it was and was not applied.
|
||||
:::
|
||||
|
||||
[TODO: The augmentation/automation distinction made concrete. Building the
|
||||
infrastructure that hosts original thought is different from generating the thought.
|
||||
The Pandoc filter that transforms footnotes into sidenotes was written with Claude;
|
||||
the footnotes themselves were not. The CSS that sets the typeface was written with
|
||||
Claude; the prose set in that typeface was not. The distinction is the point.]
|
||||
|
||||
[TODO: What this means for the site's claims to originality. The content — the essays,
|
||||
the compositions, the poetry, the research — is entirely Levi's. The medium was built
|
||||
collaboratively. This is the same relationship a writer has with an editor, a compositor,
|
||||
or a press operator: the vehicle is shared work; the voice is not.]^[The model used
|
||||
throughout is Claude (Anthropic). The full git history is publicly available and
|
||||
records what was changed when, which is a more honest account than any prose summary.]
|
||||
|
||||
---
|
||||
|
||||
## Design Decisions
|
||||
|
||||
### Sidenotes
|
||||
|
||||
[TODO: The Tufte influence — *Envisioning Information*, the three-column layout, the
|
||||
argument that footnotes interrupt reading in a way that marginalia does not. The
|
||||
sidenote as a first-class typographic element rather than a concession to citation
|
||||
convention. Credit: Said Achmiz for the sidenote positioning [JS]{.smallcaps} (the
|
||||
implementation used here is a simplified fork).]
|
||||
|
||||
### No Tracking
|
||||
|
||||
The site has no analytics, no visit counters, no fingerprinting, and no third-party
|
||||
scripts.^[This is enforced at the nginx level via [CSP]{.smallcaps} headers, not just
|
||||
by omission. The Content Security Policy prevents any script not explicitly whitelisted
|
||||
from executing. The whitelist is short.] The reason is not only privacy, though privacy
|
||||
is sufficient. The deeper reason is that knowing your readership changes what you write
|
||||
for it — gradually, invisibly, in the direction of whatever the metrics reward. A site
|
||||
without metrics cannot optimize for them. This is a feature.
|
||||
|
||||
### Living Documents
|
||||
|
||||
[TODO: The epistemic metadata system — `status`, `confidence`, `modified`, `importance`.
|
||||
What each field means. Why marking `status: Ongoing` on a document matters: it is an
|
||||
honest claim about the document's relationship to the author's current thinking, rather
|
||||
than the implicit permanence that publication usually signals. The modified date is
|
||||
not decorative; it is the reader's primary signal for whether to treat a document as
|
||||
settled or in flux.]
|
||||
|
||||
---
|
||||
|
||||
## Influences
|
||||
|
||||
[TODO: gwern.net — the primary architectural and philosophical ancestor. What was
|
||||
taken (sidenotes, living documents, epistemic metadata, semantic zoom, the long-form
|
||||
personal essay as the primary unit). What was changed (visual register — gwern's
|
||||
monochrome is denser; this site is more spacious — and scope).]
|
||||
|
||||
[TODO: Tufte — *Envisioning Information* and *The Visual Display of Quantitative
|
||||
Information*. The three-column layout, the sidenote tradition, the principle that
|
||||
good typography is invisible.]
|
||||
|
||||
[TODO: The personal website tradition more broadly — the early web's culture of
|
||||
idiosyncratic personal pages before social media collapsed everyone into the same
|
||||
templates. This site is partly an argument that that culture was worth having.]
|
||||
|
||||
---
|
||||
|
||||
## The Future
|
||||
|
||||
This site is unfinished. Several portals have no content yet. The annotated bibliography
|
||||
is sparse. Some pages are marked `status: Stub` for good reason. This is acknowledged
|
||||
rather than concealed, because a site that presents itself as complete when it is not
|
||||
is making a false claim about the relationship between the author and the work.
|
||||
|
||||
[TODO: Specific things that are in progress — content migration, the library portal,
|
||||
the fiction and research portals as the corpus grows. The Recently section on the
|
||||
homepage, deferred until the corpus supports it.]
|
||||
|
||||
The colophon itself is a living document. When the site changes substantially, this
|
||||
page will change with it. The git history is the authoritative record; this page is
|
||||
the annotated summary.
|
||||
|
|
@ -5,22 +5,6 @@ home: true
|
|||
|
||||
You have reached the website of **Levi Neuwirth**, computer scientist, composer, mathematician, researcher, etc. - but first and perennially foremost, a humble STUDENT [OF]{.smallcaps} THE UNIVERSE. This website is a curated space of living documents that not only contains but constitutes the medium for much of my work. Through it I hope to convey the juxtapositions of rigor and elegance, breadth and depth, and curiosity with determined focus that have broadly come to define who I am. *Te accipio, hospes benignus*.
|
||||
|
||||
<details class="site-guide">
|
||||
<summary>How to navigate this site</summary>
|
||||
<div class="site-guide-body">
|
||||
This website is organized broadly by **Portals** and **Tags**. The concept of a Portal is one I have taken from [Wikipedia](https://en.wikipedia.org/wiki/Wikipedia:Contents/Portals). Autogenerated indices for all tags exist. Portals are also automatically populated, but cover a broader area than mere tags, and thus there is additional commentary on such pages. When these mechanisms fail, one can search pages by keyword or by semantic embeddings. There are many novel features of this website, inspired by many wise folks and incredible developers. Rather than comment on them at length, I leave it to you to explore!
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="contact-row">
|
||||
<a href="/about.html" data-contact-icon="person">Biography</a>
|
||||
<a href="/cv.pdf" data-contact-icon="document">CV</a>
|
||||
<a href="mailto:ln@levineuwirth.org" data-contact-icon="email">Email</a>
|
||||
<a href="https://github.com/levineuwirth" data-contact-icon="github">GitHub</a>
|
||||
<a href="/gpg.html" data-contact-icon="key">GPG</a>
|
||||
<a href="https://orcid.org/0009-0002-0162-3587" data-contact-icon="orcid">ORCID</a>
|
||||
</div>
|
||||
|
||||
<div class="curated-grid">
|
||||
|
||||
<a class="curated-card" href="/me.html">
|
||||
|
|
@ -60,3 +44,12 @@ You have reached the website of **Levi Neuwirth**, computer scientist, composer,
|
|||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="contact-row">
|
||||
<a href="/about.html" data-contact-icon="person">Biography</a>
|
||||
<a href="/cv.pdf" data-contact-icon="document">CV</a>
|
||||
<a href="mailto:ln@levineuwirth.org" data-contact-icon="email">Email</a>
|
||||
<a href="https://github.com/levineuwirth" data-contact-icon="github">GitHub</a>
|
||||
<a href="/gpg.html" data-contact-icon="key">GPG</a>
|
||||
<a href="https://orcid.org/0009-0002-0162-3587" data-contact-icon="orcid">ORCID</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,5 +3,17 @@ title: Search
|
|||
search: true
|
||||
---
|
||||
|
||||
<div id="search"></div>
|
||||
<div class="search-tabs" role="tablist">
|
||||
<button class="search-tab is-active" data-tab="keyword" role="tab" aria-selected="true">Keyword</button>
|
||||
<button class="search-tab" data-tab="semantic" role="tab" aria-selected="false">Semantic</button>
|
||||
</div>
|
||||
|
||||
<div id="search" class="search-panel is-active" data-panel="keyword"></div>
|
||||
<p id="search-timing" aria-live="polite"></p>
|
||||
|
||||
<div class="search-panel" data-panel="semantic">
|
||||
<input id="semantic-query" class="semantic-query-input" type="search"
|
||||
placeholder="Describe what you're looking for…" autocomplete="off" spellcheck="false">
|
||||
<p id="semantic-status" class="semantic-status" aria-live="polite"></p>
|
||||
<div id="semantic-results"></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue