From a57f126d6c0ef67810720feeb90c8464e93db175 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Mon, 29 Apr 2024 05:03:20 +0200
Subject: [PATCH] custom error page 404 travolta

---
 src/routes/+error.svelte | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/routes/+error.svelte

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..e7c3f2d
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,39 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+{#if $page.status === 404}
+	<div class="flex flex-col items-center m-4 py-8">
+		<div
+			class="relative mb-[3.33vh] flex h-24 w-24 md:h-64 md:w-64 items-center justify-center bg-surface-800"
+		>
+			<img
+				class="object-fill"
+				src="/assets/animations/travolta_confused.webp"
+				alt="Travolta Confused gif"
+			/>
+
+			<h1 class="h1 absolute leading-[5rem] text-white">404</h1>
+		</div>
+		<h2 class="h4 mb-2">
+			? My God, what are you doing here, this page doesn't exist and so on and so on.
+		</h2>
+		<p>
+			This site either never existed or just suddenly committed disappearance from this
+			universe.
+		</p>
+	</div>
+{:else}
+	<h2>{$page.status}</h2>
+
+	{#if $page.error}
+		<p class="subhead">{$page.error.message}</p>
+	{/if}
+
+	<p><strong>Sorry!</strong> A grave error has occured. Maybe try one of these links?</p>
+	<ul>
+		<li><a href="/">Home</a></li>
+		<li><a href="/blog">Blog</a></li>
+		<li><a href="/projects">Projects</a></li>
+	</ul>
+{/if}