The New Website
2 min read
- astro
- tailwindcss
- web-development
- portfolio
I’ve rebuilt my personal website from the ground up using Astro and Tailwind CSS v4, embracing a terminal-inspired aesthetic with the Catppuccin theme.
Why Astro?
After years of working with React-based frameworks, I wanted something simpler for a content-focused site. Astro was the obvious choice: it ships zero JavaScript by default, generates static HTML, and has first-class support for Markdown content.
The result? A blazing-fast site with near-instant page loads and a perfect Lighthouse score.
The Design
I went for a monospace-first approach using JetBrains Mono throughout the entire site. Combined with the Catppuccin theme, it creates a cozy, developer-friendly aesthetic that feels like home.
The site features automatic light and dark mode support, switching seamlessly based on your system preferences. It uses the Catppuccin Latte color palette for light mode and the Catppuccin Mocha color palette for dark mode. Both palettes share the same color relationships, ensuring a consistent experience regardless of your preference.
In dark mode, the color scheme uses deep purples, soft blues, and muted accents that are easy on the eyes during those late-night coding sessions. Light mode offers warm, creamy tones that are equally pleasant during the day.
Technical Highlights
- Tailwind CSS v4: Using the new CSS-first configuration with
@themeblocks for a cleaner setup - OG Image Generation: Dynamic social images generated at build time using Satori
- Automatic Sitemap: SEO-friendly sitemap generation with
@astrojs/sitemap - Syntax Highlighting: Code blocks styled with the Catppuccin Mocha color palette via Shiki
What’s Next
I’ll be using this blog to share insights about front-end development, open-source projects, and the occasional deep dive into web performance.
Thanks for stopping by! Feel free to connect with me on any of the social links.