Work

Astro-Svelte Portfolio

Svelte
Astro
Web Development
Frontend

A showcase of how Svelte and Astro can be combined to create a high-performance, modern web blog.

Soft pink and baby blue water ripples together in a subtle texture.

Hello everyone! I’m thrilled to introduce you to my latest project, this site! The Astro-Svelte Portfolio. This project is unique because it leverages the power of both Svelte and Astro, two cutting-edge tools in the world of web development.

What Makes This Project Special?

The Astro-Svelte Portfolio is not just another portfolio. It’s a showcase of how Svelte and Astro can be combined to create a high-performance, modern web application.

Why Astro?

Astro is a front-end framework that allows you to build faster, optimized websites with less client-side JavaScript. It enables you to write components using your favorite JavaScript framework (or no framework at all) and then renders them to static HTML and CSS at build time. This results in a faster, SEO-friendly site.

Why Svelte?

Svelte is a radical new approach to building user interfaces. While traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. This means you’re able to write components in a highly expressive, reactive way, and yet your users aren’t paying the cost of a framework’s runtime.

How Did I Utilize Svelte and Astro?

Astro offers ready-to-start templates, eliminating the need to design the UI and overall look of the website, which is not my strongest suit. This saved a significant amount of time and allowed me to focus on the development process.

However, the template was composed of Astro components, which I chose to convert mostly to Svelte components, as I find Svelte much easier to write and maintain, especially for programming components. This switch allows for better maintainability and future updates.

Tech Stack

Astro | Svelte | Vercel