How It's Made

Colophon

A look under the hood at how this digital garden was cultivated.

Philosophy

This site is built as a digital garden — not a blog with reverse-chronological posts, but a living collection of interconnected notes that grow and evolve over time. Ideas start as seeds, develop through cultivation, and eventually mature into evergreen content.

The garden metaphor extends to the design: organic shapes, natural movement, and a color palette inspired by earth and growth. Everything should feel alive without being distracting.

Technology

Astro

Static site generation with the Islands architecture — JavaScript only where it's needed. Content lives in Markdown with frontmatter, processed through content collections.

Svelte

Interactive components like search and the generative background. Svelte 5's runes make reactive state feel natural.

Tailwind CSS

Utility-first styling with a custom design system. Colors, typography, and spacing are all defined as design tokens for consistency.

GSAP

Scroll-triggered animations that respect prefers-reduced-motion. Subtle fade-ups and staggers add polish without overwhelming.

Features

  • * Wikilinks — Notes link to each other using [[double bracket]] syntax, creating a web of connections.
  • * Backlinks — Each note shows other notes that reference it, with context snippets showing how.
  • * Maturity indicators — Seeds, seedlings, and evergreens show how developed each idea is.
  • * Topic clusters — Notes organized by domain: systems thinking, hospitality, horticulture, AI, and play.
  • * Full-text search — Powered by Pagefind for fast, client-side search across all content.
  • * RSS feed — Subscribe to new notes at /feed.xml.

Design

The visual language draws from natural systems: earthy colors, organic shapes, and subtle movement. The generative background uses Poisson disk sampling for organic node distribution and simplex noise for natural motion — the same algorithms found in nature.

Amber

Sage

Terracotta

Slate

Hosting & Deployment

The site is hosted on Cloudflare Pages with automatic deployments from GitHub. Every push to main triggers a new build, making it easy to iterate and publish.

Source code is available on GitHub.

Typography

Headlines use Fraunces, a soft serif with optical sizing that feels warm and approachable. Body text uses the system font stack for optimal readability and fast loading.