Building Portfolio With Astro

Last updated on
4 min read
Abstract representation of software architecture layers and decision making

Creating a portfolio website today means more than just showcasing your work – it’s about crafting an experience that demonstrates your technical expertise while maintaining excellent performance and accessibility. In this post, I’ll share my journey of building a modern portfolio website using Astro.js and React, focusing on key architectural decisions and implementations that made it stand out.

Why Astro for a Portfolio Website?

When I started planning my portfolio, I had a clear vision: I wanted a blazing-fast website that could handle both static content and dynamic interactions without compromising performance. After exploring various options, Astro.js emerged as the perfect solution for several reasons.

First, Astro’s “static-first” approach aligned perfectly with my portfolio’s content-heavy nature. Most of my content – from the home page to blog posts – is primarily static, making Astro’s default behavior of shipping zero JavaScript to the client an ideal starting point. This approach ensures that visitors get the content as quickly as possible, without waiting for unnecessary JavaScript to load.

However, I also needed some dynamic features. This is where Astro’s islands architecture proved invaluable. For instance, my portfolio includes interactive elements like a stack game, a Twitter feed, and a Spotify “Now Playing” widget. Instead of making the entire site dynamic, Astro allowed me to hydrate only these specific components, keeping the rest of the site lean and fast.

Architecture and Core Features

The architecture of my portfolio follows a simple yet effective pattern. The main content is built using Astro components, which compile to highly optimized HTML and CSS. For interactive features, I use React components wrapped in Astro islands, ensuring JavaScript is only loaded where absolutely necessary.

Here’s how I structured the main elements:

Content Management: Blog posts and portfolio content are managed through Astro’s content collections, providing type safety and easy content organization. Each post includes metadata like reading time, view counts, and gradient colors for visual interest.

Database Integration: For dynamic features like post view counting, I integrated AstroDB. This lightweight solution provides just enough database functionality without overcomplicating the architecture.

Image Handling: Images are served through Cloudinary, with different strategies for development and production environments. This ensures optimal image delivery while maintaining a smooth development experience.

Performance At The Core

Performance wasn’t an afterthought – it was a fundamental requirement. My approach focused on three key areas:

  1. Image Optimization: Using Cloudinary for automatic format selection, resizing, and delivery optimization.

  2. JavaScript Management: Implementing partial hydration through Astro islands, ensuring JavaScript is only loaded for interactive components.

  3. Font Optimization: Implementing subsetting for custom fonts and optimizing loading strategies to prevent layout shifts.

Bringing Life to Static Content

While performance was crucial, I wanted the site to feel alive and engaging. This meant carefully implementing interactive elements without compromising the site’s speed.

The theme system provides seamless dark/light mode switching with smooth transitions. Interactive elements like the stack game and Twitter feed are loaded only when needed, and animations are kept subtle and performance-friendly.

Accessibility wasn’t an afterthought either. The site includes proper ARIA labels, keyboard navigation support, and audio feedback for interactions, ensuring a good experience for all users.

Beyond The Basics

To make the site more professional and maintainable, I implemented several advanced features:

  1. Analytics: A custom analytics service using Mixpanel tracks user interactions and page views while respecting user privacy.

  2. SEO: Dynamic OG images are generated using edge functions, providing attractive social media previews for all content.

  3. Developer Experience: Type safety, proper error handling, and comprehensive logging make the codebase maintainable and debuggable.

Looking Forward

Building this portfolio has been a journey of balancing modern web capabilities with performance and user experience. While the current implementation serves its purpose well, I’m already planning improvements:

Stay tuned for more detailed posts about specific implementations, including:

The web keeps evolving, and so should our portfolios. The key is finding the right balance between features and performance, between showing off and serving users effectively.

You can explore these concepts in action on my portfolio website or check out the upcoming posts for deep dives into specific implementations.

Go back to the previous page