Most developer portfolios are either over-engineered React SPAs that ship 500kb of JavaScript to display a bio and three blog posts, or static HTML templates that look like they were last updated in 2019. I wanted something in between — a site that’s fast and static by default but can host genuinely interactive features without paying the SPA tax everywhere.
Astro’s island architecture is exactly that model.
What I’m Building
This site is more than a portfolio. The plan is to build:
- A terminal mode (full keyboard-driven CLI interface over the content)
- An architecture mode (interactive system diagrams for each project)
- A layered complexity system (different views for different levels of technical depth)
- A news intelligence feed (AI-summarized content from RSS sources I follow)
None of these are simple static HTML. But most of the site — the blog, the project listings, the homepage — should be zero-JS HTML that loads instantly.
Why Not Next.js / Remix
I considered both. The problem: the moment you’re in a React framework, you’re making a choice about how everything renders. Even pages that are purely static get pulled into the hydration model. You pay for the abstraction everywhere.
With Next.js App Router and React Server Components, this has improved — but the mental model is complex, and you still ship a nontrivial runtime for even the simplest pages.
Astro’s Island Model
Astro renders everything to static HTML at build time by default. When you need client-side JavaScript, you opt in with client:* directives on specific components — “islands” of interactivity in a sea of static HTML.
The key insight: the islands are independent. Each hydrates separately. A slow or large island doesn’t block the rest of the page from rendering and being interactive.
For this site, that means:
- The homepage hero, about section, blog preview, project preview — pure HTML, zero JS
- The search component — a SolidJS island, hydrates
client:load - The terminal mode overlay — a SolidJS island, hydrates lazily
client:idle - The architecture diagrams — SolidJS islands, hydrated on demand
The performance profile: the homepage loads as static HTML with under 5kb of JavaScript (the theme toggle and background animations). The terminal mode loads its ~20kb SolidJS bundle only when triggered.
Why SolidJS Over React for Islands
Astro supports React, Vue, Svelte, SolidJS, and others for islands. I chose SolidJS because:
- Fine-grained reactivity without a virtual DOM. SolidJS compiles to direct DOM operations. For a terminal emulator that needs to update the cursor every 500ms, this matters.
- Small bundle size. The SolidJS runtime is ~7kb minified+gzipped vs React’s ~42kb.
- Familiar JSX syntax. The learning curve from React is minimal.
The TypeScript integration is excellent, and it plays well with Astro’s component model.
Content Collections
Astro’s content collections give you a typed, schema-validated content layer on top of Markdown and MDX files. Every blog post and project entry has a Zod schema — if I forget a required field or put the wrong type, astro check catches it at build time rather than at runtime.
This is the kind of constraint that makes a codebase maintainable over years rather than months.
The Build
The build pipeline runs astro check (TypeScript + content validation) then astro build. Output is a static site that deploys anywhere — Cloudflare Pages, Vercel, Netlify, or an S3 bucket with CloudFront. No server required unless I add SSR for dynamic features later.
For a personal intelligence hub, this is the right foundation: everything that can be static is static, everything that needs to be interactive is islands, and the whole thing is typed end-to-end.