DEV Community

Dennis Morello
Dennis Morello

Posted on • Originally published at morello.dev on

The New Website

I’ve rebuilt my personal website from the ground up with Astro and Tailwind CSS v4. The design is terminal-inspired: monospace type, tight 4px corners, and a color scheme you pick yourself.

Why Astro?

After years of React-based frameworks, I wanted something simpler for a content-focused site. Astro fit: it ships zero JavaScript by default, renders to static HTML, and treats Markdown as a first-class content source through its Content Layer.

The pages are plain static files served from a CDN. There’s very little to load and not much that can go wrong, so navigation feels close to instant.

The design

The type is monospace-first. JetBrains Mono handles the UI, headings, and code; Source Serif 4 takes over for the body of long-form posts, where a serif is easier to read at length. The pairing keeps the developer-tool feel without making articles a chore to read. The article styling is hand-written Tailwind wired to theme variables rather than a plugin, the same own-the-CSS instinct behind shadcn/typeset.

The part I had the most fun with is theming. Instead of following your system’s light or dark setting, the site lets you choose from 16 developer color schemes (Catppuccin, Tokyo Night, Dracula, Nord, Gruvbox, and more) from a command-palette-style switcher. Press t to open it, arrow through the palettes to preview them live, and hit Enter to commit. Your choice is saved in localStorage and reapplied before first paint, so there’s no flash and the site remembers it next time. It defaults to Catppuccin Mocha.

Technical highlights

  • Tailwind CSS v4 : CSS-first configuration with @theme blocks instead of a tailwind.config.js. Each palette is a set of CSS variables swapped by a data-theme attribute.
  • OG image generation : social cards generated at build time with Satori, which I broke down in how the OG images are generated.
  • Syntax highlighting : code blocks rendered with Shiki, wired to CSS variables so the token colors track whichever theme you’ve selected.
  • SEO plumbing : a generated sitemap via @astrojs/sitemap, an RSS feed, JSON-LD structured data, and raw Markdown mirrors of every post. I later wrote up the full AI-discoverability setup in its own post, covering llms.txt, Content-Signal, and the Cloudflare bits.

What’s next

I’ll be using this blog for notes on front-end development, open source, and the odd deep dive into web performance. Thanks for stopping by. The social links in the footer are the best way to reach me.

Top comments (0)