Eleventy
Tailwind CSS
Catppuccin
mohamud.me
This very site. Built with Eleventy and Tailwind CSS, designed to feel like a code editor.
Goals
- Fast static site with zero client-side JavaScript framework overhead
- IDE aesthetic with Catppuccin Mocha/Latte themes
- Easy to write — Markdown for all content
- Syntax highlighting for code snippets in posts
Design decisions
The design is intentionally editor-like: tab navigation, a file explorer sidebar on post pages, a status bar at the bottom, and monospace typography throughout.
Color theming is done entirely with CSS custom properties, making it trivial to swap palettes. The dark/light toggle writes to localStorage and applies a .dark class to <html>.
Stack
| Layer | Choice |
|---|---|
| SSG | Eleventy 2.x |
| CSS | Tailwind CSS |
| Highlighting | Prism.js |
| Fonts | JetBrains Mono, Inter |
| Palette | Catppuccin |
Syntax highlighting
Code blocks are handled by @11ty/eleventy-plugin-syntaxhighlight (Prism.js), with a custom Catppuccin theme written in CSS using the same custom properties as the rest of the site — so highlighting automatically adapts to light and dark mode.
.token.keyword { color: var(--ctp-mauve); }
.token.string { color: var(--ctp-green); }
.token.function { color: var(--ctp-blue); }