Introduction

After months of learning web development, I finally decided to build a personal website that reflects who I am and what I'm passionate about. This site isn't just a portfolio. It's a space for reflection, documentation, and experimentation with modern web technologies.

I chose Astro and Tailwind CSS as my primary tools. Here's why, and what I learned in the process.

Why Astro?

Astro is a modern static site builder that focuses on delivering fast, content-rich websites. What attracted me:

• Minimal JavaScript by default only sends what's needed to the browser
• Framework-friendly: I can use HTML, React, Vue, or other components
• Excellent developer experience with hot reloading
• Built-in support for markdown, making blogging intuitive
• Easy deployment to platforms like GitHub Pages

For a personal site focused on writing and reflection, Astro feels like the right choice. It respects both performance and creative flexibility.

Tailwind CSS: Styling with Purpose

Tailwind CSS is a utility-first CSS framework that lets you build designs directly in your HTML. Coming from traditional CSS, it took a mindset shift, but the benefits are clear:

• Consistency through a design system (spacing, colors, typography)
• Fast iteration (no context switching between HTML and CSS files)
• Small bundle size (only the classes you use are included)
• Dark/Light mode support built-in
• Responsive design made simple with mobile-first breakpoints

I created a custom color palette reflecting my design sensibilities: charcoal background, gray text, with teal and blue accents for interactive elements. This consistency carries throughout the entire site.

Key Challenges & Solutions

Challenge 1: CSS Color Variables

Initially, Tailwind wasn't recognizing my custom color variables defined in CSS. The solution was using Tailwind v4's @theme directive instead of relying on a config file, which ensured consistency between CSS variables and utility classes.

Challenge 2: Layout Patterns

Creating a consistent, minimalistic layout across multiple pages required thoughtful use of:

• max-w-* classes for content containers
• mx-auto for centering
• grid & flex for alternating layouts
• space-y-* for consistent vertical spacing

Challenge 3: Reusable Components

Astro's layout system made it easy to create a base Layout.astro component that all pages inherit. This ensures consistent headers, footers, and styling across the site.

What I Learned

Building this site taught me more than just syntax. Here are the key takeaways:

• Design systems matter Using consistent colors, spacing, and typography creates a professional, cohesive feel
• Performance is a feature Astro's approach to minimal JavaScript is refreshing and respects user experience
• Static doesn't mean simple You can build rich, interactive experiences with static site generators
• Iterative refinement Good design comes from multiple passes and intentional choices
• The tools should work for you Astro and Tailwind's flexibility allows creativity without sacrificing productivity

The Future

This site is a foundation for ongoing experimentation. Future plans include:

• Expanding the blog with posts on research, learning, and technical explorations
• Building a project showcase section
• Implementing dark/light mode toggle (Tailwind supports this natively)
• Adding search functionality for blog posts
• Exploring Astro Islands for interactive components where needed

Conclusion

Building this site with Astro and Tailwind CSS has been a rewarding experience. It's given me a platform to share my journey while also deepening my understanding of modern web development practices.

If you're considering building a personal site or blog, I'd recommend exploring both tools. They complement each other beautifully and prioritize both developer experience and user experience.

Stay tuned for more posts. Happy exploring! 🌱