Building a portfolio in 2026 means balancing two competing priorities: creating something that feels alive and interactive, while ensuring it loads in under a second and works perfectly on mobile. Astro 5 solves this tension elegantly. Unlike traditional React or Next.js setups that ship the entire framework to every visitor, Astro defaults to zero JavaScript at runtime — you get HTML, CSS, and nothing else until you explicitly opt in.
Content collections were the feature that sold me on Astro for this project. Instead of wrestling with GraphQL layers or bespoke CMS integrations, you define a schema in content.config.ts, drop markdown or MDX files into a folder, and get fully typed, validated content at build time. The DX is exceptional: TypeScript autocomplete for your frontmatter, automatic slug generation, and the ability to filter and sort posts with simple collection queries. For a portfolio with a blog section, this is exactly the level of structure you need without the overhead of a headless CMS.
The Islands Architecture in Practice
The islands approach means your portfolio can be static by default. Hero sections, about pages, project showcases — they all render as plain HTML. Only the components that need interactivity — a dark mode toggle, a search box, an animated counter — get hydrated with their respective frameworks. You might use a React island for a complex form and a vanilla web component for a simple toggle. Astro doesn’t care; it slots each island where it belongs and sends only the JavaScript for that island.
Performance metrics tell the story. A typical Astro portfolio can achieve Lighthouse scores in the high 90s or 100s without aggressive optimization. The combination of zero-JS-by-default, built-in image optimization, and View Transitions (for those smooth page-to-page animations) creates sites that feel premium without the weight. If you’re building a portfolio to showcase your work, there’s no better advertisement than a site that loads instantly and scrolls like butter.
If you’re coming from Next.js or a similar framework, the mental shift is small. You’ll feel at home with file-based routing, layout components, and the component syntax (which looks like a hybrid of HTML and JSX). The main difference: you’re thinking in terms of “what needs JavaScript?” rather than “everything is a component.” Start with zero islands, add them only when you hit a wall. Your future self — and your visitors — will thank you.