Introduction

arucaden.my.id is my personal portfolio website, showcasing my projects, skills, and experiences also my yapping skills.

It’s built with modern web technologies (at the time of development) like Astro, Svelte, and UnoCSS. This web also deployed on Firebase.

Key Highlights

• Built with astro, svelte, and UnoCSS for modern and fast website.
• Fully responsive with mobile-friendly layout.
• Interactive project viewer with dynamic markdown content rendering.
• Some cool animations.

My Role: Frontend & UI/UX Developer

I designed and developed this website to showcase my work and skills. I wanted a platform that reflects my style and allows me to share my projects effectively. previosly, I always use slides to showcase my projects, but somehow, its bad, i mean it’s not interactive.

It begun in 2024, I was looking for a way to present my projects in different way, I also wanted to make my own style to showcase my projects, ofc using slides could work, but I wanted something more interactive and engaging, so I decided to design it first, this was the initial design:

I knew it was bad, because my idea was to make game-themed website, but at the time my knowledge about UI/UX design was very limited, luckyly because I was too busy with my college stuff and other projects, I didn’t have time to implement it, so I just left it there.

Then in 2025, after I learned more about UI/UX design and finally having time, I decided to redesign it, and the result is this website you’re looking at now (that’s why i said luckyly before, if i weren’t dropped this project for a while, it could be worst web ever). Here are some of the inspirations I used:

After that I started to implementing the design, here is why I chose the technologies I used:

• Astro: For its fast performance and ability to build static sites with dynamic content.
• Svelte 5: For its simplicity and reactivity, making it easy to create interactive components.
• UnoCSS: For its utility-first approach to styling.
• Firebase: For hosting and deploying the website, providing a reliable and scalable solution.

• why Astro? Dynamic Content Collection. Like, i dont want to make CMS just for portfolio website, do you think so?
• why Svelte? at first i used react, but I found it too overkill complex for my needs, so I switched to svelte, which is more simpler.
• why UnoCSS? I wanted to use Tailwind, but I found it too overkill heavy for my needs, UnoCSS generates styles on-demand, meaning it only includes the styles you actually use, making it more efficient and lightweight.
• why Firebase? i personally dont really know, I just like it, and its free for my usage.

Challenges

Well this is my first time building a website alone using svelte and astro, so I faced some challenges along the way, such as:

• Design: I need to create a web design that mimic a game interface, which was a bit challenging since I had to balance aesthetics and functionality.
• Learning curve: I had to learn how to use Astro, Svelte in one time!.
• Responsive design: Making the website look good on different screen sizes.
• Performance optimization: Ensuring the website loads quickly and efficiently (i had to research every step i made).
• SEO optimization: Making sure the website is optimized for search engines.
• Animation : I wanted to add some animations to make the website more engaging, but I had to learn how to do it especially in my headline that changed into japanese name, it was so complicated.

What I Learned

Designing this website improve my UI/UX design skill alot, like:

• Color theory: How to choose colors that work well together and create a better overall look.
• Typography: How to pick fonts that are readable and match the the design.
• Layout: How to arrange elements on the page for optimal user experience.
• Responsive design: How to make the website look good on different screen sizes.
• User experience: How to create a website that is easy to navigate and enjoyable to use.

I also learned how to make a website that reflects my personality and style. But most importantly, I learned that we can’t force our ego into design, we have to consider how others will use and feel about the product.

This site isn’t just for me, it’s for others to explore my projects too.

In technical side, I learned a lot about Astro, Svelte, and UnoCSS, such as:

• Astro
  How to use its features like partial hydration and server-side rendering.It was confusing at firs because I never really cared about rendering methods before.But now I finally understand how they work, and how to use them (still improving tho, especially the part where Astro and Svelte meet it’s kinda chaotic sometimes).

  One thing that makes me fall in love with Astro is its ability to make blog posts and projects pages easily, I can just write my content in markdown and Astro will handle the rest. It also supports dynamic routes, so I can create a project page for each of my projects without having to write a lot of code.

• Svelte 5
  How to create reactive components, manage state, and use Svelte’s features like stores and transitions. But here’s the thing: most tutorials are still for legacy Svelte, so I had to adapt to the new version with runes.

  In runes mode, reactive state is explicitly declared with the $state rune. While in legacy mode, variables declared at the top level of a component are automatically considered as reactive (kinda confusing at first but I managed to understand it anyway).

• UnoCSS
  I learned how to use utility-first CSS to create a clean and consistent design quickly. It’s similar to Tailwind, so thankfully I didn’t have to struggle too much.

• Complicated animation
  I used vanilla JavaScript to create complex animations, especially for the headline (the one that my name changes into japanese). It was so time-consuming that I kinda regret not using a template, but hey, it works, and I’m proud of it.

Final Thoughts

This website is a reflection of my journey as a developer and designer. It’s a platform where I can showcase my work, share my experiences, and connect with others in the tech community.

I hope you find it interesting and inspiring. If you have any feedback or suggestions, feel free to reach out!

Oh, I forgot. So, is it worth using Astro, Svelte, and UnoCSS?

Yes, it is. Reason? read this page again :)

Thanks for reading