Why Astro?

After evaluating several options for building my professional portfolio site, I chose Astro for several compelling reasons:

• Performance: Ships zero JavaScript by default, resulting in incredibly fast page loads
• Flexibility: Use any UI framework (React, Vue, Svelte) or none at all
• Markdown: Write content in simple, portable markdown with content collections
• No Database: Static files are secure and easy to deploy
• Component-Based: Build with reusable .astro components

Setting Up the Project

Getting started with Astro is straightforward:

# Create a new Astro project
npm create astro@latest my-portfolio

# Navigate to the project
cd my-portfolio

# Start the development server
npm run dev

The CLI wizard guides you through setup options. For more details, see the official installation guide.

Creating the Structure

I organized my content into three main sections:

1. About: Professional background and skills
2. Blog: Articles and insights from my journey
3. Projects: Portfolio of tools and applications I’ve built

Astro’s file-based routing makes this intuitive - just create folders in src/pages/.

Key Features Implemented

Custom Components

Astro’s .astro components let you build reusable UI pieces:

---
const { title } = Astro.props;
---
<header>
  <h1>{title}</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/blog">Blog</a>
  </nav>
</header>

Content Collections

Blog posts and projects are managed with content collections, providing type-safe frontmatter and easy querying.

Syntax Highlighting

Astro includes Shiki for syntax highlighting out of the box:

def secure_function(user_input):
    # Always validate and sanitize input
    sanitized = sanitize_input(user_input)
    return process_safely(sanitized)

Deployment

Astro generates static files, making deployment simple. Options include:

• Netlify
• Vercel
• GitHub Pages
• AWS S3 + CloudFront
• Any web server (just copy the dist/ folder)

See the deployment guides for platform-specific instructions.

Lessons Learned

Building this site taught me:

• The power of shipping less JavaScript
• How content collections simplify content management
• Value of owning your content and platform
• How component-based architecture improves maintainability

Resources

• Astro Documentation
• Astro Discord Community
• Astro Themes
• Astro Integrations

Conclusion

Astro has proven to be an excellent choice for my professional portfolio. The zero-JS-by-default approach delivers outstanding performance, while the developer experience remains smooth and intuitive.

If you’re considering building your own portfolio or blog, I highly recommend giving Astro a try!