update homepage draft and other pages

src/routes/+page.svelte

@@ -1,10 +1,97 @@
-<h1 class="my-8 text-4xl font-bold text-center">Stan Runge</h1>
-<img src="/moon.jpg" alt="Moon" />
-
-<div class="flex flex-col">
-	<div>Vash Software</div>
-
-	<div>Hogeschool Inholland</div>
-
-	<div>Junior</div>
+<div class="text-center py-4 font-bold text-l">
+	<a href="/blog">Blog</a>
 </div>
+
+<div class="flex justify-around py-8">
+	<div class="max-w-100">
+		<h2 class="font-bold text-2xl underline text-center">experience</h2>
+		<div class="flex gap-2">
+			<p class="min-w-24 text-right">2026 - ???</p>
+			<p class="font-bold">???</p>
+		</div>
+		<div class="flex gap-2">
+			<p class="min-w-24 text-right">2021 - 2026</p>
+			<div>
+				<p class="font-bold">BSc. Computer Science (Software Engineering)</p>
+				<p>The Hague University of Applied Sciences</p>
+			</div>
+		</div>
+		<div class="flex gap-2">
+			<p class="min-w-24 text-right">2026</p>
+			<p class="font-bold">internship at 3webapps</p>
+		</div>
+		<div class="flex gap-2">
+			<p class="min-w-24 text-right">2023</p>
+			<p class="font-bold">internship at h5mag</p>
+		</div>
+		<div class="flex gap-2">
+			<p class="min-w-24 text-right">2021 - 2023</p>
+			<p class="font-bold">junior IT specialist at Finance Plus</p>
+		</div>
+		<div class="flex gap-2">
+			<p class="min-w-24 text-right">2020 - current</p>
+			<p class="font-bold">300+ IT problems solved in Netherlands</p>
+		</div>
+	</div>
+
+	<div class="pt-32">
+		<h1 class="font-black text-center text-4xl">Stan Runge</h1>
+		<img src="./quantum-chair.png" alt="stan runge" />
+		<p class="italic text-sm text-center">
+			me preparing for my presentation about <a href="https://arxiv.org/abs/2209.08167"
+				>quantum vision transformers</a
+			>
+		</p>
+	</div>
+
+	<div class="max-w-100">
+		<div>
+			<h2 class="font-bold text-2xl underline text-center">projects</h2>
+		</div>
+
+		<div class="flex flex-col gap-4">
+			<a href="https://esports.vash.software">
+				<p class="font-bold text-xl">vash esports</p>
+				<p>automated osu! matchmaking/tournament platform</p>
+			</a>
+			<div>
+				<p class="font-bold text-xl">eudi-auth for 3webapps</p>
+				<p>
+					plugin for WooCommerce/Magento2 that adds authentication with the European Digital
+					Identity (EUDI) wallet
+				</p>
+			</div>
+			<div>
+				<p class="font-bold text-xl">realtime collaboration for h5mag</p>
+				<p>
+					socket.io server for h5mag (magazine web editor) that broadcasts user actions to other
+					editors, similar to writing a Google Doc together
+				</p>
+			</div>
+			<div>
+				<p class="font-bold text-xl">infra</p>
+				<p>server, project deployments and dev config as code with setup script</p>
+			</div>
+			<a href="/projects/animaldex">
+				<p class="font-bold text-xl">animaldex</p>
+				<p>world map with pets & other animals around the neighborhood 😼</p>
+			</a>
+			<a href="/projects/catch-em-all">
+				<p class="font-bold text-xl">catch em all</p>
+				<p>table of all 1025 pokemon across 38 games with checkboxes for catching them all</p>
+			</a>
+			<a href="/projects/spotify-beatmap-finder">
+				<p class="font-bold text-xl">spotify osu! map finder</p>
+				<p>small tool for finding osu! maps using a spotify url of a song or playlist</p>
+			</a>
+			<a href="https://beeriokart.stanrunge.dev">
+				<p class="font-bold text-xl">beerio kart</p>
+				<div>Go</div>
+				<p>webserver in go with a double-elim bracket for a one-time mario kart tournament</p>
+			</a>
+
+			<p>+ a lot more planned (soon™)</p>
+		</div>
+	</div>
+</div>
+