This garden of pixels is grown with Astro and styled with Tailwind CSS. It lives happily on Vercel.
I also tend to write about how this site is made in the Colophon tag.
Colour Palettes
The colour palette is inspired by nature, with soft, earthy tones complemented by vibrant accents.
🌿 Primary Palette
Garden Moss
A lush, vibrant green reminiscent of a thriving garden.
Sunlit Beige
A warm, neutral beige that evokes the feeling of sunlight.
Ink Black
A deep, rich black that provides strong contrast.
Blush Petal
A soft, delicate pink inspired by flower petals.
Coastal Blue
A calming blue inspired by the ocean.
✨ Accent Palette
Honeyburst Yellow
A bright, golden yellow that captures the essence of sunlight.
Ember Orange
A warm, fiery orange that adds a pop of energy.
Reef Glow Mint
A refreshing mint green that evokes tropical reefs.
Electric Wisteria
A vibrant purple that adds a touch of whimsy.
Zest Fern
A zesty green that adds a pop of freshness.
🧱 Utility Neutrals
Soft Charcoal
A soft, a muted gray, like soil after rain.
Fog Grey
A light, a misty veil that softens the edges of brighter blooms.
Garden White
A clean, crisp white with a subtle black border — the canvas everything else grows from.
Typography
The typography is a mix of modern clarity and classic roots — chosen to keep words readable while letting them bloom with character.
Inter
Inter is a free, open-source font by Rasmus Andersson.
Font Weights
font-light
The quick brown fox jumps over the lazy dog
font-normal
The quick brown fox jumps over the lazy dog
font-medium
The quick brown fox jumps over the lazy dog
font-bold
The quick brown fox jumps over the lazy dog
font-black
The quick brown fox jumps over the lazy dog
Text Sizes
text-sm
The quick brown fox jumps over the lazy dog
text-base
The quick brown fox jumps over the lazy dog
text-lg
The quick brown fox jumps over the lazy dog
text-xl
The quick brown fox jumps over the lazy dog
text-2xl
The quick brown fox jumps over the lazy dog
Bitter
Bitter is an open source font by Sol Matas.
Font Weights
font-light
The quick brown fox jumps over the lazy dog
font-normal
The quick brown fox jumps over the lazy dog
font-medium
The quick brown fox jumps over the lazy dog
font-bold
The quick brown fox jumps over the lazy dog
font-black
The quick brown fox jumps over the lazy dog
Text Sizes
text-sm
The quick brown fox jumps over the lazy dog
text-base
The quick brown fox jumps over the lazy dog
text-lg
The quick brown fox jumps over the lazy dog
text-xl
The quick brown fox jumps over the lazy dog
text-2xl
The quick brown fox jumps over the lazy dog
JetBrains Mono
JetBrains Mono is a free, open-source font by JetBrains.
Font Weights
font-light
The quick brown fox jumps over the lazy dog
font-normal
The quick brown fox jumps over the lazy dog
font-medium
The quick brown fox jumps over the lazy dog
font-bold
The quick brown fox jumps over the lazy dog
font-black
The quick brown fox jumps over the lazy dog
Text Sizes
text-sm
The quick brown fox jumps over the lazy dog
text-base
The quick brown fox jumps over the lazy dog
text-lg
The quick brown fox jumps over the lazy dog
text-xl
The quick brown fox jumps over the lazy dog
text-2xl
The quick brown fox jumps over the lazy dog
Architects Daughter
Architects Daughter is a free, open-source font by Kimberly Geswein.
Font Weights
font-light
The quick brown fox jumps over the lazy dog
font-normal
The quick brown fox jumps over the lazy dog
font-medium
The quick brown fox jumps over the lazy dog
font-bold
The quick brown fox jumps over the lazy dog
font-black
The quick brown fox jumps over the lazy dog
Text Sizes
text-sm
The quick brown fox jumps over the lazy dog
text-base
The quick brown fox jumps over the lazy dog
text-lg
The quick brown fox jumps over the lazy dog
text-xl
The quick brown fox jumps over the lazy dog
text-2xl
The quick brown fox jumps over the lazy dog
NPM Dependencies
These are the NPM packages I’m using to build, maintain, and serve this site.
| Package | Description | Version |
|---|---|---|
| Astro | The static site builder used to build this site | 5.13.2 |
| @astrojs/mdx | 4.3.1 | |
| @astrojs/rss | 4.0.12 | |
| @astrojs/sitemap | 3.4.2 | |
| @astrojs/vercel | 8.2.5 | |
| @astrojs/vue | 5.1.1 | |
| date-fns | 4.1.0 | |
| @date-fns/tz | 1.4.1 | |
| lite-youtube-embed | 0.3.3 | |
| p5.js | The JavaScript library for some of the creative coding on this site | 2.0.4 |
| sanitize-html | 2.17.0 | |
| @sentry/astro | 10.16.0 | |
| Tailwind CSS | The CSS framework used to style this site | 4.1.11 |
| @tailwindcss/typography | 0.5.16 | |
| @tailwindcss/vite | 4.1.11 | |
| unist-util-visit | 5.0.0 | |
| vue | 3.5.21 |
Consider this site a perennial rather than a finished bouquet, it will keep evolving over time.