add blog, initial post

src/routes/+layout.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import './layout.css';
+	import favicon from '$lib/assets/favicon.svg';
+	import Nav from '$lib/components/Nav.svelte';
+	import Particles from '$lib/components/Particles.svelte';
+
+	let { children } = $props();
+</script>
+
+<svelte:head><link rel="icon" href={favicon} /></svelte:head>
+<Particles />
+<div class="fixed inset-0 -z-5 backdrop-blur-xs"></div>
+<Nav />
+{@render children()}

src/routes/+page.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+</script>
+
+<svelte:head>
+	<title>Blog</title>
+</svelte:head>
+
+<div class="mx-auto max-w-4xl px-4 py-12">
+	<h1 class="mb-8 text-4xl font-bold">Blog Posts</h1>
+
+	<div class="space-y-6">
+		{#each data.posts as post}
+			<article class="border-b pb-6">
+				<a href="/posts/{post.slug}" class="group">
+					<h2 class="mb-2 text-2xl font-semibold transition group-hover:text-electric-violet-800">
+						{post.title}
+					</h2>
+					<p class="mb-2 text-gray-600">{post.date}</p>
+					<p class="text-gray-700">{post.excerpt}</p>
+				</a>
+			</article>
+		{/each}
+	</div>
+</div>

src/routes/+page.ts

@@ -0,0 +1,23 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	const postFiles = import.meta.glob<{ metadata: { title: string; date: string; excerpt: string } }>(
+		'./posts/*.md',
+		{ eager: true }
+	);
+
+	const posts = Object.entries(postFiles).map(([path, post]) => {
+		const slug = path.replace('./posts/', '').replace('.md', '');
+
+		return {
+			slug,
+			title: post.metadata.title,
+			date: post.metadata.date,
+			excerpt: post.metadata.excerpt
+		};
+	});
+
+	posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+	return { posts };
+};

src/routes/about/+page.md

@@ -0,0 +1,15 @@
+---
+title: About
+---
+
+<svelte:head>
+	<title>About</title>
+</svelte:head>
+
+<div class="prose prose-lg mx-auto max-w-4xl px-4 py-12">
+
+# About Me
+
+This is the about page.
+
+</div>

src/routes/layout.css

@@ -0,0 +1,26 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+
+@theme{
+	--color-electric-violet-50: #fbf3ff;
+	--color-electric-violet-100: #f4e3ff;
+	--color-electric-violet-200: #eccdff;
+	--color-electric-violet-300: #dda5ff;
+	--color-electric-violet-400: #c86cff;
+	--color-electric-violet-500: #b435ff;
+	--color-electric-violet-600: #a20fff;
+	--color-electric-violet-700: #9000f5;
+	--color-electric-violet-800: #7806c3;
+	--color-electric-violet-900: #63079c;
+	--color-electric-violet-950: #430076;
+}
+
+body {
+  font-family: "Work Sans", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+}
+
+h1, h2, h3, h4, h5{
+	font-family: 'Space Mono', monospace;
+}

src/routes/music/+page.md

@@ -0,0 +1,15 @@
+---
+title: Music
+---
+
+<svelte:head>
+	<title>Music</title>
+</svelte:head>
+
+<div class="prose prose-lg mx-auto max-w-4xl px-4 py-12">
+
+# Music
+
+This is the music page.
+
+</div>

src/routes/posts/[slug]/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+</script>
+
+<svelte:head>
+	<title>{data.metadata.title}</title>
+</svelte:head>
+
+<article class="mx-auto prose prose-lg max-w-4xl px-4 py-12">
+	<header class="mb-8">
+		<h1 class="mb-2 text-4xl font-bold">{data.metadata.title}</h1>
+		<p class="text-gray-600">{data.metadata.date}</p>
+	</header>
+
+	<div
+		class="prose-headings:font-semibold prose-a:text-electric-violet-800 prose-a:no-underline hover:prose-a:underline"
+	>
+		<data.content />
+	</div>
+</article>

src/routes/posts/[slug]/+page.ts

@@ -0,0 +1,15 @@
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ params }) => {
+	try {
+		const post = await import(`../${params.slug}.md`);
+
+		return {
+			content: post.default,
+			metadata: post.metadata
+		};
+	} catch (e) {
+		throw error(404, `Post not found: ${params.slug}. Error: ${e}`);
+	}
+};

src/routes/posts/how-this-site-was-made.md

@@ -0,0 +1,52 @@
+---
+title: "How This Site Was Made (And Why You Probably Don't Care)"
+date: "2025-12-22"
+excerpt: "A cynical walkthrough of building a blog with SvelteKit, particles.js that doesn't work, and enough utility classes to make you question your life choices."
+---
+
+Everybody's dying. Some people are just doing it faster than others by choosing the wrong JavaScript framework.
+
+## The Tech Stack
+
+Here's what powers this monument to narcissism you're currently reading:
+
+- **SvelteKit** - Because apparently React wasn't complicated enough, and Vue was too mainstream. At least Svelte 5 has runes now, which sound mystical but are really just state management with a rebrand.
+- **MDsveX** - For simple markdown and then maybe a component when you don't want to keep things simple.
+- **Tailwind CSS v4** - Utility classes everywhere. My HTML looks like someone had a seizure on the keyboard, but hey, at least I don't have to name things.
+- **TypeScript** - Strict mode enabled, naturally. Because nothing says "I hate myself" quite like adding type annotations to everything.
+
+## The Font Situation
+
+I spent more time picking fonts than actually building this blog. By a lot.
+
+## The Particles Background (A Tragedy in Three Acts)
+
+**Act 1:** "My last blog used particles.js. It's been 11 years since its last update but how bad could it be?"
+
+**Act 2:** `Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode`
+
+**Act 3:** Install tsparticles. Realize the Svelte wrapper expects Svelte 4. Remove wrapper. Import engine directly. Finally works. Question choices.
+
+The particles are approximately what I felt to be my favorite color on that day (`#9000f5` to be exact). There's a subtle blur overlay so they don't distract from the profound thoughts I'm sharing with the world.
+
+## The Routing Architecture
+
+Blog posts live at `/posts/[slug]` because that's what civilized people do. The homepage is the blog listing because if you came here expecting anything else, you're lost. At some point these posts could become too many (right...) so I might have to add pagination. 
+
+There's also an About page and a Music page. Both are markdown files. Both are probably empty. I'll get to it ...eventually.
+
+## Key Learnings
+
+1. **Old libraries don't work with modern tooling** - Shocking, I know. It's almost like maintaining software requires effort.
+
+2. **The most important file is CLAUDE.md** - Because six months from now, Future Me will have no idea how any of this works. Documentation is self-care.
+
+## The Build Process
+
+It's using `@sveltejs/adapter-static` because this gets deployed to static hosting. No server-side rendering, no edge functions, no complexity. Just HTML, CSS, and JavaScript being served like it's 2005.
+
+## Conclusion
+
+This site was built in a couple hours with SvelteKit, some questionable design choices, and the crushing realization that web development in 2025 is somehow both easier and more complicated than it was 5 years ago.
+
+Will I maintain it? Probably not. Will I write actual content? Maybe. Will I spend more time tweaking the particle configuration than writing posts? Absolutely.