- I left school, my job, and moved to Austin in 2022 to write
- code full time. That was definitely one of the best and
- most life changing decisions I've ever made. I've learned
- a lot since then and still have much more to learn.
+ {{
+ project.title
+ }}:
+ {{ project.description }}
-
- These days I build things because I find joy in making something
- someone else really enjoys using. I get excited about reaching a
- level of polish that users don't even notice.
-
-
- In a time where code is cheap I pride myself in taste and execution.
- The best sticking point — in my limited opinion so far — is the
- way using your product feels. So I want everything I make to
- simply feel the best to use.
-
-
- If you want to build something cool or connect
- hit me up
- — we'll grab a coffee or beer if you're in Austin! I
- still dont know enough people to form a band yet ;)
-
-
-
-
-
-
+
+
+
+
About
+
+ I left school, my job, and moved to Austin in 2022 to write code
+ full time. That was definitely one of the best and most life
+ changing decisions I've ever made. I've learned a lot since then
+ and still have much more to learn.
+
+
+ These days I build things because I find joy in making something
+ someone else really enjoys using. I get excited about reaching a
+ level of polish that users don't even notice.
+
+
+ In a time where code is cheap I pride myself in taste and
+ execution. The best sticking point (in my limited opinion so far)
+ is the way using your product feels. So I want
+ everything I make to simply feel the best to use.
+
+
+ If you want to build something cool or connect
+ hit me up — we'll grab a coffee or
+ beer if you're in Austin! I still dont know enough people to form
+ a band yet ;)
+
+
+
+
+
+
-
-
diff --git a/app/plugins/gsap.client.ts b/app/plugins/gsap.client.ts
deleted file mode 100644
index 5cdb712..0000000
--- a/app/plugins/gsap.client.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { gsap } from 'gsap';
-import { ScrollTrigger } from 'gsap/ScrollTrigger';
-
-export default defineNuxtPlugin(() => {
- gsap.registerPlugin(ScrollTrigger);
-
- return {
- provide: {
- gsap,
- ScrollTrigger,
- },
- };
-});
diff --git a/app/utils/fonts.ts b/app/utils/fonts.ts
new file mode 100644
index 0000000..b2ac797
--- /dev/null
+++ b/app/utils/fonts.ts
@@ -0,0 +1,44 @@
+export const BODY_FONTS = [
+ { id: 'plantin', label: 'Plantin' },
+ { id: 'palatino', label: 'Palatino' },
+ { id: 'redaction', label: 'Redaction' },
+ // These are to be used by components or other styles
+ // { id: 'redaction-10', label: 'Redaction 10' },
+ // { id: 'redaction-20', label: 'Redaction 20' },
+ // { id: 'redaction-35', label: 'Redaction 35' },
+ // { id: 'redaction-50', label: 'Redaction 50' },
+ // { id: 'redaction-70', label: 'Redaction 70' },
+ // { id: 'redaction-100', label: 'Redaction 100' },
+ { id: 'sohne', label: 'Sohne' },
+ { id: 'georgia', label: 'Georgia' },
+ { id: 'system', label: 'System Sans' },
+ { id: 'space', label: 'Space Mono' },
+] as const;
+
+export type BodyFontId = (typeof BODY_FONTS)[number]['id'];
+
+export const DEFAULT_BODY_FONT: BodyFontId = 'plantin';
+export const BODY_FONT_STORAGE_KEY = 'body-font';
+
+export function isBodyFontId(value: string | null): value is BodyFontId {
+ return BODY_FONTS.some((font) => font.id === value);
+}
+
+export const REDACTION_STRENGTHS = [0, 10, 20, 35, 50, 70, 100] as const;
+
+export type RedactionStrength = (typeof REDACTION_STRENGTHS)[number];
+
+export function redactionFamily(strength: RedactionStrength): string {
+ return strength === 0 ? 'Redaction' : `Redaction ${strength}`;
+}
+
+export function resolveRedactionStrength(value: unknown): RedactionStrength {
+ const n = Number(value);
+ if (REDACTION_STRENGTHS.includes(n as RedactionStrength)) {
+ return n as RedactionStrength;
+ }
+ if (!Number.isFinite(n)) return 35;
+ return REDACTION_STRENGTHS.reduce((best, grade) =>
+ Math.abs(grade - n) < Math.abs(best - n) ? grade : best,
+ );
+}
diff --git a/app/utils/stackMarginNotes.ts b/app/utils/stackMarginNotes.ts
new file mode 100644
index 0000000..ab07d59
--- /dev/null
+++ b/app/utils/stackMarginNotes.ts
@@ -0,0 +1,57 @@
+const WIDE = '(min-width: 1200px)';
+const GAP = 8;
+
+export function stackMarginNotes() {
+ if (!import.meta.client) return;
+
+ const notes = Array.from(
+ document.querySelectorAll('.margin-note'),
+ );
+
+ if (!window.matchMedia(WIDE).matches) {
+ for (const note of notes) note.style.top = '';
+ return;
+ }
+
+ for (const note of notes) note.style.top = '';
+
+ let previousBottom = Number.NEGATIVE_INFINITY;
+
+ for (const note of notes) {
+ const article = note.closest('article');
+ const mark = note
+ .closest('.margin-note-root')
+ ?.querySelector('.margin-note-mark');
+ if (!article || !mark) continue;
+
+ const articleTop = article.getBoundingClientRect().top;
+ let top = mark.getBoundingClientRect().top - articleTop;
+ if (top < previousBottom + GAP) {
+ top = previousBottom + GAP;
+ }
+
+ note.style.top = `${Math.max(0, top)}px`;
+ previousBottom = top + note.offsetHeight;
+ }
+}
+
+let listening = false;
+
+export function watchMarginNotes() {
+ if (!import.meta.client || listening) {
+ stackMarginNotes();
+ return;
+ }
+
+ listening = true;
+ const run = () => stackMarginNotes();
+
+ window.addEventListener('resize', run);
+ document.fonts?.ready.then(run);
+ new ResizeObserver(run).observe(document.documentElement);
+ new MutationObserver(run).observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ['class'],
+ });
+ run();
+}
diff --git a/app/utils/themes.ts b/app/utils/themes.ts
new file mode 100644
index 0000000..e0dacbc
--- /dev/null
+++ b/app/utils/themes.ts
@@ -0,0 +1,22 @@
+export const BG_THEMES = [
+ { id: 'dusk', label: 'Dusk' },
+ { id: 'navy', label: 'Navy' },
+ { id: 'midnight', label: 'Midnight' },
+ { id: 'indigo', label: 'Indigo' },
+ { id: 'storm', label: 'Storm' },
+ { id: 'slate', label: 'Slate' },
+ { id: 'ink', label: 'Ink' },
+ { id: 'pine', label: 'Pine' },
+ { id: 'wine', label: 'Wine' },
+ { id: 'cocoa', label: 'Cocoa' },
+ { id: 'paper', label: 'Paper' },
+] as const;
+
+export type BgThemeId = (typeof BG_THEMES)[number]['id'];
+
+export const DEFAULT_BG_THEME: BgThemeId = 'dusk';
+export const BG_THEME_STORAGE_KEY = 'bg-theme';
+
+export function isBgThemeId(value: string | null): value is BgThemeId {
+ return BG_THEMES.some((theme) => theme.id === value);
+}
diff --git a/content.config.ts b/content.config.ts
index 95b9a98..246a2ed 100644
--- a/content.config.ts
+++ b/content.config.ts
@@ -12,6 +12,7 @@ export default defineContentConfig({
title: z.string(),
date: z.coerce.date(),
description: z.string(),
+ demo: z.boolean().optional(),
}),
}),
},
diff --git a/content/writing/frontend_developers_are_underpaid.md b/content/writing/2026/frontend_developers_are_underpaid.md
similarity index 86%
rename from content/writing/frontend_developers_are_underpaid.md
rename to content/writing/2026/frontend_developers_are_underpaid.md
index 8c01f32..3630991 100644
--- a/content/writing/frontend_developers_are_underpaid.md
+++ b/content/writing/2026/frontend_developers_are_underpaid.md
@@ -1,6 +1,6 @@
---
title: 'hot take: frontend developers are underpaid.'
-date: 2026-05-03
+date: 2026-09-22
description: that shit is hard
---
diff --git a/content/writing/demo.md b/content/writing/demo.md
new file mode 100644
index 0000000..8236acd
--- /dev/null
+++ b/content/writing/demo.md
@@ -0,0 +1,117 @@
+---
+title: Notes in the margin
+date: 2026-08-22
+description: Every mark this site knows how to make — body type, asides, notices, redaction, quotes, lists, code, and images.
+demo: true
+---
+
+This page is a working sample, not an essay. Walk it when you change type, color, or a content component. The **description** above is the article lead — bold, then the body.
+
+Ordinary copy sits in the column. You can *emphasize*, **stress**, or [link out](https://jaronpate.com). A thought that does not belong in the sentence can sit beside it. :margin-note[(A margin note. Wide screens put it in the right gutter. Narrow screens drop it under the paragraph.)] Parentheticals you can actually skip.
+
+## Headings
+
+`h2` and `h3` share one italic, muted style. Use them as section marks, not display type.
+
+### A third-level mark
+
+Still the same size and color. Hierarchy is the word, not the weight.
+
+## Margin notes
+
+Two notes in one stretch of text, so you can see them stack.
+
+The first is a mutter. :margin-note[(First note — should sit next to this sentence.)] A little later, a second one arrives. :margin-note[(Second note. On a wide screen these should not collide with the column.)] Between them the column keeps moving.
+
+```md
+:margin-note[(like this)]
+```
+
+## Notices
+
+A notice interrupts on purpose. It stays in the column.
+
+::notice
+**In-column.** Use this when the aside *is* the point for a minute. Navy, hard to miss, still inside the measure.
+::
+
+```md
+::notice
+**In-column.**
+::
+```
+
+And when it needs to break the column:
+
+::notice{bleed}
+**Bleed.** Same idea, edge to edge. Save it for the one time in a piece you actually want to shout.
+::
+
+```md
+::notice{bleed}
+**Bleed.**
+::
+```
+
+## Redaction
+
+A span can be set in Redaction. `strength` is a grade: `0` is the clean face, `100` is almost gone. Other numbers snap to `0`, `10`, `20`, `35`, `50`, `70`, or `100`. Default is `100`.
+
+```md
+:redacted[these words]{strength="50"}
+```
+
+Same phrase, every grade:
+
+- 0 — :redacted[the record is still intact]{strength="0"}
+- 10 — :redacted[the record is still intact]{strength="10"}
+- 20 — :redacted[the record is still intact]{strength="20"}
+- 35 — :redacted[the record is still intact]{strength="35"}
+- 50 — :redacted[the record is still intact]{strength="50"}
+- 70 — :redacted[the record is still intact]{strength="70"}
+- 100 — :redacted[the record is still intact]{strength="100"}
+
+Inline, mixed into a sentence: the filing names :redacted[a person we will not repeat]{strength="20"}, then later :redacted[almost nothing remains]{strength="100"}.
+
+**Bold around** :redacted[a redacted span]{strength="50"} should pick Redaction Bold.
+
+## Blockquote
+
+The pointing hand sits in the gutter. Use it for a quote, or a line you want pointed at.
+
+> The best sticking point is the way using the thing *feels*. Everything else is infrastructure.
+
+## Lists
+
+Unordered, for a pile of equals:
+
+- Plantin for reading
+- Space Mono for the wordmark, footer, and code
+- Redaction only where you ask for it
+
+Ordered, when sequence matters:
+
+1. Write the sentence
+2. Park the mutter in a margin note
+3. Redact what should stay almost-said
+
+## Code
+
+Inline: the helper is `resolveRedactionStrength`, and the shortcode is `:redacted`.
+
+A block:
+
+```ts
+const grade = resolveRedactionStrength(strength);
+const family = redactionFamily(grade);
+```
+
+## Image
+
+A figure in the column. This is an old Edlink shot, just to see the matte and radius.
+
+
+
+---
+
+That’s the set. Margin for a mutter. Notice for a point. Redaction when the words should still be there, barely. Everything else is ordinary prose.
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1f3085a..99d228e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -27,10 +27,22 @@ export default defineNuxtConfig({
type: 'd1',
bindingName: 'DB',
},
+ build: {
+ markdown: {
+ highlight: {
+ theme: {
+ default: 'github-light',
+ 'light-mode': 'github-light',
+ 'dark-mode': 'github-dark',
+ },
+ },
+ },
+ },
},
+ css: ['~/assets/css/main.css'],
+
app: {
- pageTransition: { name: 'page', mode: 'out-in' },
head: {
htmlAttrs: { lang: 'en' },
charset: 'utf-8',
@@ -44,17 +56,21 @@ export default defineNuxtConfig({
},
],
link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }],
+ script: [
+ {
+ innerHTML: `(function(){try{var t=localStorage.getItem('bg-theme')||'dusk';var f=localStorage.getItem('body-font')||'plantin';document.documentElement.classList.add('theme-'+t,'font-'+f);}catch(e){document.documentElement.classList.add('theme-dusk','font-plantin');}})();`,
+ tagPosition: 'head',
+ },
+ ],
},
},
modules: ['@nuxt/content', '@nuxtjs/color-mode'],
colorMode: {
- preference: 'system', // default value of $colorMode.preference
- fallback: 'light', // fallback value if not system preference found
- globalName: '__NUXT_COLOR_MODE__',
- componentName: 'ColorScheme',
+ preference: 'dark',
+ fallback: 'dark',
classPrefix: '',
- classSuffix: '-mode', // Results in .dark-mode or .light-mode
+ classSuffix: '-mode',
storageKey: 'color-mode',
},
});