Building a Modern Website with SvelteKit

When it came time to rebuild my personal website, I had plenty of framework options. After evaluating Next.js, Nuxt, Astro, and others, I landed on SvelteKit — and I couldn’t be happier with the choice.

Why SvelteKit?

SvelteKit brings several things to the table that clicked with what I needed:

1. Svelte’s Reactivity Model

Svelte 5’s runes ($state, $derived, $effect) offer a clean, explicit reactivity model. No virtual DOM overhead, no hooks rules to memorize — just straightforward reactive code.

let count = $state(0);
let doubled = $derived(count * 2);

2. File-Based Routing That Makes Sense

SvelteKit’s route groups like (portfolio), (portal), and (admin) let me organize entirely different sections of the site with their own layouts, while sharing a root configuration.

3. Full-Stack in One Framework

Server-side rendering, API routes, form actions, and client-side interactivity — all in one framework with zero configuration. The +server.ts and +page.server.ts conventions are intuitive.

The Stack

Here’s what powers this site:

• SvelteKit — framework
• Tailwind CSS v4 — styling
• Convex — backend and real-time data
• mdsvex — Markdown blog posts as Svelte components
• Bun — runtime and package manager

Lessons Learned

A few things I picked up along the way:

1. Tailwind v4’s @theme directive is excellent for design tokens
2. mdsvex layout paths must be absolute — relative paths fail at build time
3. Convex’s real-time subscriptions integrate beautifully with Svelte’s reactivity
4. $derived is your friend in Svelte 5 — use it everywhere you’d use const with reactive values

What’s Next

I’ll continue iterating on this site, adding 3D effects with Threlte, scroll animations with GSAP, and a full software distribution portal. Stay tuned for more posts covering the journey.