Building a Portfolio with Astro and SST

AstroSSTAWSServerlessPortfolio

Why Astro + SST?

When I decided to rebuild my portfolio, I wanted a stack that would give me the best of both worlds: blazing fast performance with the flexibility to add server-side features when needed.

Astro was the obvious choice for the frontend. Its island architecture means I ship zero JavaScript by default, only hydrating interactive components when necessary. The result? Sub-second page loads and perfect Lighthouse scores.

SST handles the infrastructure side. With a single sst.config.ts file, I can define my entire AWS deployment — CloudFront CDN, Lambda functions for SSR, S3 for static assets — all without touching a CloudFormation template.

The Stack

Here’s what powers this site:

  • Astro 6 — Static-first framework with SSR capabilities
  • SST v3 — Infrastructure-as-code for AWS
  • CloudFront — Global CDN for low-latency delivery
  • Lambda — Serverless functions for dynamic routes
  • S3 — Static asset storage

Key Design Decisions

Dark Glassmorphism

I chose a dark glassmorphism aesthetic because it feels modern and premium. The key to making it work is subtlety — the glass effect should enhance content, not distract from it.

.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

Performance First

Every design decision was filtered through a performance lens. CSS animations instead of JavaScript, system font stacks as fallbacks, and lazy-loaded images keep the site snappy.

What’s Next

I’m planning to add a few more features:

  1. Blog search — Full-text search powered by a Lambda function
  2. View counter — Track page views with DynamoDB
  3. Newsletter — Email subscriptions via SES

Stay tuned for more posts about the build process!