Building My Portfolio with Astro
How I used Astro's island architecture to create a fast, dark-themed portfolio website with React islands and Markdown blog support.
Building My Portfolio with Astro
When I set out to build my portfolio, I wanted something that felt intentional — minimal JavaScript, fast load times, and a design that lets the work speak for itself.
Why Astro?
Astro’s island architecture was the perfect fit. Most of my portfolio is static content — text, images, and CSS animations. Only a few components need JavaScript:
- A contact form with validation
- A live clock showing my local time in Bali
- A mobile menu overlay
Everything else ships as zero-JS HTML. This means the portfolio loads instantly, even on slow connections.
The Design System
I built the entire site around a dark-only theme:
--color-bg-primary: #0A0A0A;
--color-text-primary: #F5F3EB;Sharp corners, monospace labels, and generous white space create an editorial feel. The typography uses Manrope for display headings and Inter for body text.
What’s Next
I’m planning to add:
- Case studies for each project
- A
/usespage with my setup - Dark-themed code snippets in blog posts
Stay tuned.