Building this portfolio with SvelteKit

I rebuilt my portfolio from scratch this year. The goal was simple: fast, easy to maintain, and pleasant to write content for. Here’s the stack I landed on and why.

The stack

• SvelteKit 2 + Svelte 5 — runes ($state, $derived, $effect) make local reactivity explicit without the ceremony.
• Tailwind CSS v4 — the new engine is fast and the @theme block keeps brand tokens in one place.
• Vercel — zero-config deploys via @sveltejs/adapter-vercel, and the whole site prerenders to static HTML.

Reactivity that reads like the data flow

Runes keep state declarations close to where they’re used:

<script lang="ts">
	let count = $state(0);
	let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
	{count} × 2 = {doubled}
</button>

No stores, no boilerplate — just values and the derivations that depend on them.

Prerendering everything

Every route opts into prerendering at the root layout, so the site ships as static files. Fast first paint, trivial hosting, and no cold starts.

That’s the foundation. The next post digs into why Svelte 5 runes changed how I think about component state.