Back to Projects 
arucaden.my.id is my personal portfolio website, built to showcase my projects, skills, experiences and sometimes share my opinions.
Executive Summary
As a Frontend Engineer & UI/UX Designer, I designed this platform as an upgrade from my old portfolio (which using slides). It functions as a fast static site while injecting javascript reactivity when needed using Astro Islands and Svelte Runes.
The Problem & The Solution
The Problem:
- Typical developer portfolios often feel like highly static corporate templates.
- Heavy client-side frameworks (like React) that bloat loading times and destroy SEO (Using High Tech for FOMO).
- Complicated animations (Like my name animation).
The Solution:
- I built this website using Astro for fast server-side HTML generation, Svelte 5 for precise, reactive “Islands” (like modals and overlays), and UnoCSS to completely eliminate CSS stylesheet bloat.
- I used vanilla JavaScript to make complicated animation, because it will never achieved with Svelte or Astro.
Technical Details
- Fast Performance: Powered entirely by Astro’s static site generation and island architecture.
- Reactive Components: Leveraged Svelte 5’s new $state Runes to drive high-performance overlays and reactive data bindings.
- Utility-first Styling: Completely custom-themed using UnoCSS for on-demand optimized CSS output.
- Complicated Animations: Using vanilla JavaScript, CSS transitions, and completely custom glitch effects.
- Responsive Design: Designed to be good looking website in all platform
Challenges & Learnings
Merging Astro routing with Svelte’s component hydration was extremely tricky at first. I need to learn more about partial hydration concepts (figuring out when to use client:idle or client:visible). Furthermore, adapting to Svelte’s explicit Runes forced me to understand exactly how reactivity flows, making robust interactive components. Also Always design with the end-user’s experience over personal taste, in the end its the user who visits the website.
Read the full Devlog ➔There is a story behind this website, check out below to know more!
arucaden.my.id is my personal portfolio website, built to showcase my projects, skills, experiences and sometimes share my opinions.
Executive Summary
As a Frontend Engineer & UI/UX Designer, I designed this platform as an upgrade from my old portfolio (which using slides). It functions as a fast static site while injecting javascript reactivity when needed using Astro Islands and Svelte Runes.
The Problem & The Solution
The Problem:
- Typical developer portfolios often feel like highly static corporate templates.
- Heavy client-side frameworks (like React) that bloat loading times and destroy SEO (Using High Tech for FOMO).
- Complicated animations (Like my name animation).
The Solution:
- I built this website using Astro for fast server-side HTML generation, Svelte 5 for precise, reactive “Islands” (like modals and overlays), and UnoCSS to completely eliminate CSS stylesheet bloat.
- I used vanilla JavaScript to make complicated animation, because it will never achieved with Svelte or Astro.
Technical Details
- Fast Performance: Powered entirely by Astro’s static site generation and island architecture.
- Reactive Components: Leveraged Svelte 5’s new $state Runes to drive high-performance overlays and reactive data bindings.
- Utility-first Styling: Completely custom-themed using UnoCSS for on-demand optimized CSS output.
- Complicated Animations: Using vanilla JavaScript, CSS transitions, and completely custom glitch effects.
- Responsive Design: Designed to be good looking website in all platform
Challenges & Learnings
Merging Astro routing with Svelte’s component hydration was extremely tricky at first. I need to learn more about partial hydration concepts (figuring out when to use client:idle or client:visible). Furthermore, adapting to Svelte’s explicit Runes forced me to understand exactly how reactivity flows, making robust interactive components. Also Always design with the end-user’s experience over personal taste, in the end its the user who visits the website.
Read the full Devlog ➔There is a story behind this website, check out below to know more!