Building a Modern Portfolio with SvelteKit

This is an example project post showcasing how markdown content works with mdsvex in SvelteKit.

The Stack

I chose SvelteKit for this project because of its:

• Performance: Lightning-fast page loads and seamless navigation
• Developer Experience: Svelte 5’s new runes API makes state management intuitive
• Flexibility: Easy to deploy anywhere, including Cloudflare Pages

Key Features

1. Markdown-Based Content

Using mdsvex allows me to write content in markdown while maintaining full access to Svelte components when needed.

export async function load() {
	const posts = import.meta.glob('./*.md');
	// Load and parse markdown files
	return { posts };
}

2. Modern Design System

The design uses OKLCH color space for perceptually uniform colors and supports both light and dark modes seamlessly.

3. Responsive Layout

Every page is mobile-first and scales beautifully from phone to desktop.

What’s Next?

Future improvements include:

• Adding more interactive components
• Implementing a search feature
• Creating case studies for major projects
• Adding a contact form

Built with SvelteKit • Tailwind CSS • TypeScript