Building a Modern Portfolio with Astro and TailwindCSS

In today’s competitive tech landscape, having a standout portfolio is crucial for developers. After exploring various frameworks, I chose Astro combined with TailwindCSS to build my personal portfolio. Here’s why this combination is perfect for modern web development and how I implemented it.

Why Astro? 🚀

Astro has quickly become my favorite framework for content-heavy websites. Here’s what makes it special:

TIP

If you’re building a content-heavy website like a blog or portfolio, Astro’s performance benefits are immediately noticeable. The zero-JavaScript approach means lightning-fast load times!

Performance by Default

• Zero JavaScript by default: Astro ships HTML and CSS, adding JavaScript only when needed
• Island Architecture: Interactive components are loaded independently
• Build-time optimization: Most rendering happens at build time, not runtime

Developer Experience

• Framework agnostic: Use React, Vue, Svelte, or vanilla JavaScript
• File-based routing: Simple and intuitive routing system
• Built-in optimizations: Image optimization, CSS bundling, and more

IMPORTANT

The framework-agnostic approach means you’re not locked into any specific UI library. You can mix and match components from different frameworks in the same project!

Project Structure 📁

src/
├── components/          # Reusable UI components
│   ├── includes/       # Header, footer, sidebar
│   ├── project/        # Project-specific components
│   └── about/          # About page components
├── data/               # MDX blog posts and project data
├── layouts/            # Page layouts
├── pages/              # File-based routing
├── styles/             # Global styles and themes
└── utils/              # Utility functions

Key Features Implemented 🛠️

NOTE

The following features showcase the power of combining Astro with modern web technologies to create a fast, accessible, and beautiful portfolio.

1. Dynamic Theme System

I implemented a custom theme system that goes beyond basic light/dark mode:

// Theme color picker with HSL color space
function setHue(hue) {
  document.documentElement.style.setProperty("--theme-hue", hue.toString());
  document.documentElement.style.setProperty("--theme-primary", `hsl(${hue}, 70%, 60%)`);
  // ... more color variables
}

Benefits:

• Users can customize the primary color
• Maintains accessibility contrast ratios
• Smooth color transitions across the site

2. MDX-Powered Blog System

Using MDX allows me to write rich, interactive blog posts:

// astro.config.mjs
remarkPlugins: [
  remarkGfm,        // GitHub Flavored Markdown
  remarkBreaks,     // Line break support
  remarkEmoji,      // Emoji support
  remarkReadingTime // Reading time estimation
]

Features:

• ✅ GitHub Flavored Markdown support
• ✅ Syntax highlighting with rehype-pretty-code
• ✅ Automatic heading anchors
• ✅ External link handling
• ✅ Reading time estimation

3. Responsive Design with TailwindCSS

TailwindCSS provides the perfect balance of utility and maintainability:

<div class="w-full flex flex-col lg:flex-row gap-8 items-start">
  <aside class="w-full lg:w-80 lg:sticky lg:top-8">
    <!-- Sidebar content -->
  </aside>
  <main class="flex-1 min-w-0">
    <!-- Main content -->
  </main>
</div>

Key Benefits:

• Mobile-first responsive design
• Consistent spacing and typography
• Easy dark mode implementation
• Minimal CSS bundle size

Performance Optimizations 🔧

Image Optimization

Astro’s built-in image optimization automatically:

• Converts images to modern formats (WebP, AVIF)
• Generates responsive image sets
• Lazy loads images below the fold

<Image 
  src={projectImage} 
  alt="Project screenshot"
  width={600}
  height={400}
  format="webp"
/>

CSS Optimization

• CSS-in-JS elimination: Pure CSS with TailwindCSS
• Critical CSS inlining: Above-the-fold styles are inlined
• Unused CSS removal: TailwindCSS purges unused styles

JavaScript Optimization

• Selective hydration: Only interactive components load JavaScript
• Code splitting: Automatic splitting by route and component
• Tree shaking: Unused code is eliminated

Development Workflow 🔄

1. Local Development

pnpm dev  # Hot reload with instant updates

2. Content Creation

Writing blog posts is as simple as creating .mdx files:

---
title: "My Blog Post"
date: "2025-01-17"
tags: ["Web Development", "Astro"]
---
 
# My Blog Post
Content goes here...

3. Deployment

pnpm build  # Generates optimized static files

Lessons Learned 💡

What Worked Well

1. Astro’s simplicity: Learning curve was minimal
2. TailwindCSS productivity: Rapid UI development
3. MDX flexibility: Rich content creation
4. Performance: Lighthouse scores consistently 95+

Challenges Faced

1. Component hydration: Understanding when to use client:* directives
2. Theme system complexity: Balancing customization with maintainability
3. TypeScript integration: Setting up proper types for content collections

Future Improvements

• Add search functionality
• Implement view transitions
• Add comment system
• Create RSS feed
• Add analytics

Technical Specifications 📊

Conclusion 🎯

Building a portfolio with Astro and TailwindCSS has been an incredibly rewarding experience. The combination provides:

• Exceptional performance with minimal JavaScript
• Great developer experience with modern tooling
• Scalable architecture that grows with your needs
• Beautiful, responsive design that works everywhere

CAUTION

Remember that while Astro is excellent for content-heavy sites, it might not be the best choice for highly interactive applications. Choose your tools based on your specific needs!

GitHub Repository

Want to explore the code? Check out the source code for this portfolio:

TIP

The Astro repository is a great place to learn about modern web development practices and contribute to open source!

The modern web development landscape is constantly evolving, but with tools like Astro and TailwindCSS, we can build fast, maintainable, and beautiful websites that stand the test of time.

Building this portfolio with Astro and TailwindCSS has been an excellent learning experience. The combination provides:

• Exceptional performance with minimal JavaScript
• Developer-friendly workflow and tooling
• Modern features like dynamic theming and rich content
• Scalable architecture for future enhancements

The result is a fast, accessible, and visually appealing portfolio that showcases both technical skills and attention to user experience.

Try it yourself! The source code is available on my GitHub, and I’d love to hear about your experience building with Astro.

What’s your experience with modern web frameworks? Have you tried Astro yet? Let me know your thoughts! 💭