This site brings together my writing about software, web design, and AI. I want it to feel like a place where I build and experiment, while remaining comfortable to read.
The first version used neutral black surfaces and three fonts. In September 2026, I moved toward cool glass surfaces and simplified the typography. This is the current design; the original publication date reflects when the site began.
Color and Depth
The background is a deep blue-green, with slightly lighter surfaces for cards and controls. Fine borders separate regions without turning every section into a heavy box.
- Void
#080e11— the page background - Ink
#101b20— input backgrounds - Ash
#b1bfc0— body text - Cream
#e7eeec— headings - Flame
#f0845e— links, primary actions, and occasional emphasis - Ember
#ffa27d— a warmer hover state
Translucent gradients give cards a little depth. A faint blue glow on one side and a warm glow on the other add atmosphere to the public pages. The orange stays concentrated around actions and the headline, so it retains its purpose.
The colors live in shared Tailwind theme tokens. Page components and the style guide use those same values.
Two Fonts
Syne gives headings their geometric character. Its distinctive shapes do most of the work of making the site feel technical.
IBM Plex Sans handles paragraphs, articles, navigation, metadata, and controls. Moving the body copy and labels to one readable sans-serif made the page feel calmer and more consistent.
Normal body text is 18px with a 1.65 line height. Article text is 19px with a 1.7 line height. Introductions use 20px, while compact tools use 16px for working text and inputs, with smaller supporting labels.
Both font families are self-hosted. They use font-display: swap so text remains visible while the fonts load. Code uses the system monospace stack rather than downloading a third family.
Layout Follows the Task
Public pages share a centered container up to 1400px wide. Horizontal padding grows from 24px on small screens to 48px and then 64px on larger screens.
The homepage uses a wide headline beside a short introduction. Article cards follow it, giving visitors a direct route into the writing. About has a narrower narrative, and Contact puts the form beside the introduction on desktop.
Articles use a 720px reading column. That keeps lines manageable even on a wide monitor. Related articles and the newsletter sit outside that column after the main text.
The private tools use a more compact layout. Their status, inputs, and results matter more than a large introduction, but they share the same palette and typography.
A Header That Belongs to the Page
At the top of the homepage, the header is transparent and shares the background with the content. After a short scroll, it gains a glass surface and a fine border to keep navigation legible.
The outer vertical rails fade in instead of starting abruptly below the header. The newsletter and footer share a continuous surface and aligned container, keeping the bottom of the page connected to the rest.
Interaction and State
Primary buttons use solid orange with a warmer hover color. Secondary actions are underlined text links. Cards respond with a subtle border and surface change.
Keyboard focus has a visible orange outline. Motion stays restrained, and the header transition respects reduced-motion preferences.
A useful interface also explains what is happening. Empty tools should say what data is missing; loading states should name the work in progress; errors should offer a next step. Color supports those messages, but the words carry the meaning.
Keeping It Consistent
The style guide includes the shared colors, typography, components, and examples of reading and tool layouts. It is where I can check a new page against the decisions already made.
The goal is simple: enough character to make the site feel like mine, with enough restraint to let the writing and tools do their jobs.
Stay in the loop
The occasional email when there's something new worth sharing.