Creating an Astro Site Utilizing Astro Islands

The first thing that drew me to Astro for my personal site was View Transitions. At the time, it was a relatively new API gaining solid browser support — and Astro baked it in. The idea of animating transitions between pages on a multi-page site just seemed cool. So I dove into the docs and started building.

What surprised me was how much more Astro offered beyond View Transitions. The feature that really sold me? Astro Islands.

“An island is an enhanced UI component on an otherwise static page of HTML.” – Astro Docs

This concept builds on Island Architecture — an approach that lets you minimize heavy JavaScript frameworks and only hydrate the components that truly need interactivity. Think of it as building mini-apps within your site. This technique is called partial hydration, and it’s a core performance feature of Astro.

You can choose to render these islands either client-side or server-side. I opted for client-side rendering — a bit more expensive, but manageable for a personal site.

Currently, I’m running two React islands:

• The Skills Page – This one displays a 3D icon cloud of technologies I’ve used. The data is scraped from my GitHub, ranked, and rendered with Three.js and React Fiber. A simple Node script creates a JSON file, which is then used to size the icons based on usage. I also built a dumb React component for the legend. These components are imported and added just like any other React component — and they coexist seamlessly with static HTML like the certifications section below.

• The Contact Page – This island is a basic React form that emails me when submitted. It works — not flashy, just functional.

Astro lets me write these islands in React, but I’m free to use other frameworks for future features. That’s the power of Island Architecture: use the right tool for the right UI job without bloating the entire site.

The result? A fast, modern site with interactive elements where they matter — and static HTML where they don’t. Pretty cool.