← Back to Blog

Building My Portfolio with Astro.js

A journey of creating a modern, performant portfolio website using Astro.js and TypeScript

AstroTypeScriptWeb DevelopmentPortfolio

Why I Chose Astro.js

After exploring various frameworks and static site generators, I decided to build my portfolio using Astro.js. Here’s why:

Performance First

Astro’s approach to shipping zero JavaScript by default was a game-changer. My portfolio loads incredibly fast, with minimal JavaScript being sent to the browser.

TypeScript Support

Built-in TypeScript support with strict mode enabled helps catch errors early and provides excellent developer experience with autocomplete and type checking.

Component Islands

Astro’s island architecture allows me to use interactive components only where needed, like my AI chatbot, while keeping the rest of the site static.

Key Features Implemented

  1. Dark Mode Toggle - Smooth theme switching with localStorage persistence
  2. AI Chatbot - RAG-based assistant powered by Groq API
  3. Contact Form - Functional email integration with EmailJS
  4. Responsive Design - Mobile-first approach with modern CSS

Lessons Learned

Building this portfolio taught me the importance of:

  • Clean Architecture - Separating data, components, and layouts
  • Performance Optimization - Using static site generation for speed
  • User Experience - Implementing smooth animations and transitions
  • Accessibility - Semantic HTML and ARIA labels

What’s Next?

I’m planning to add more features:

  • Blog section with MDX support (currently implementing!)
  • Advanced animations with View Transitions
  • PWA capabilities for offline support
  • Analytics integration

Stay tuned for more updates!