beeeeg update

src/routes/projects/+page.svelte

@@ -2,45 +2,57 @@
 	import { resolve } from '$app/paths';
 
 	const projects = [
-		{
-			name: 'Animaldex',
-			href: '/projects/animaldex',
-			description: 'World map with pets & other animals around the neighborhood'
-		},
-		{
-			name: 'CatchEmAll',
-			href: '/projects/catch-em-all',
-			description: 'Table of all 1025 pokemon across 38 games with checkboxes for catching them all'
-		},
-		{
-			name: 'Derby Lens',
-			href: '/projects/derby',
-			description: 'Experimental win-probability model for the Duindigt Derby R 2026 with scenario sliders'
-		},
-		{
-			name: 'CS Prices',
-			href: '/projects/cs-prices',
-			description: 'Dashboard for CS2 skin price histories, trends and predictions'
-		},
-		{
-			name: 'Spotify Beatmap Finder',
-			href: '/projects/spotify-beatmap-finder',
-			description: 'Search for osu! beatmaps with Spotify songs/albums/playlists'
-		}
+		{ name: 'catchemall', href: '/projects/catch-em-all', external: false },
+		{ name: 'animaldex', href: '/projects/animaldex', external: false },
+		{ name: 'derby lens', href: '/projects/derby', external: false },
+		{ name: 'cs prices', href: '/projects/cs-prices', external: false },
+		{ name: 'osu! map finder', href: '/projects/spotify-beatmap-finder', external: false },
+		{ name: 'game tracker', href: '/projects/game-tracker', external: false },
+		{ name: 'money tracker', href: '/projects/money-tracker', external: false },
+		{ name: 'vash esports', href: 'https://esports.vash.software', external: true },
+		{ name: 'beerio kart', href: 'https://beeriokart.stanrunge.dev', external: true }
+	] as const;
+	const earlier = [
+		'distributor',
+		'realtime editing',
+		'eIDAS auth module for WooCommerce + Magento 2'
 	];
 </script>
 
-<div class="text-center">
-	<h1 class="text-2xl font-bold underline py-8">Projects ({projects.length})</h1>
-
-	<ul class="flex flex-col gap-4 items-center">
+<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
+	<h1 class="mb-10 text-4xl font-semibold tracking-tight sm:text-5xl">projects</h1>
+	<ul>
 		{#each projects as project (project.name)}
-			<a class="border min-w-160 py-2 text-center rounded-lg" href={resolve(project.href)}>
-				<h1 class="font-bold text-xl">
-					{project.name}
-				</h1>
-				<p>{project.description}</p>
-			</a>
+			<li class="border-t border-[var(--site-border)] text-lg">
+				{#if project.external}
+					<a
+						href={project.href}
+						rel="external"
+						class="flex items-center justify-between gap-4 py-5 hover:text-[var(--site-muted)]"
+					>
+						<span>{project.name}</span><span aria-hidden="true" class="text-[var(--site-muted)]"
+							>↗</span
+						>
+					</a>
+				{:else}
+					<a
+						href={resolve(project.href)}
+						class="flex items-center justify-between gap-4 py-5 hover:text-[var(--site-muted)]"
+					>
+						<span>{project.name}</span><span aria-hidden="true" class="text-[var(--site-muted)]"
+							>↗</span
+						>
+					</a>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+	<h2 class="mt-14 mb-3 text-2xl font-semibold">other</h2>
+	<ul>
+		{#each earlier as name (name)}
+			<li class="border-t border-[var(--site-border)] py-5 text-lg text-[var(--site-muted)]">
+				{name}
+			</li>
 		{/each}
 	</ul>
 </div>