Building a Personal Site with Astro and Bento Grid

After years of using various portfolio templates, I finally decided to build something I was truly happy with. Here’s what I learned.

Why Astro?

Astro has become my go-to framework for content-heavy sites. Its key strengths:

• Islands Architecture – Ship zero JavaScript by default, hydrate only what you need
• Multi-framework support – Mix React, Svelte, Vue in one project
• Content Collections – Type-safe Markdown/MDX with Zod schemas
• Built-in optimizations – Image optimization, CSS scoping, View Transitions API

The Bento Grid Layout

Bento Grid (inspired by Apple’s product pages) creates an asymmetric, magazine-like grid that’s both beautiful and information-dense. The trick is using CSS Grid with carefully planned column/row spans.

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

Each card gets a col-span and row-span to create the mosaic effect.

Lessons Learned

1. Keep it static – SSR adds complexity. For a portfolio, static generation is almost always better.
2. Design tokens first – Setting up CSS variables before writing components saves significant time.
3. Progressive enhancement – Animations should enhance, not block. Use IntersectionObserver for scroll animations.

The full source is on GitHub.