feat: add some shit

src/routes/gallery/+page.server.ts

@@ -0,0 +1,8 @@
+import * as pb from "$lib/helpers/pb"
+export async function load() {
+  const res = await pb.getPublicPortraits();
+
+  return {
+    data: res
+  }
+}

src/routes/gallery/+page.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import ImageFrame from '$lib/components/ImageFrame.svelte';
+	import Confetti from '$lib/components/confetti.svelte';
+	import { onMount } from 'svelte';
+
+	export let data;
+
+	let last_name: string | null = '';
+
+	const items = data.data
+		.map((item) => {
+			return {
+				...item,
+				marginTop: 20 + Math.random() * 50
+			};
+		})
+		.reverse();
+	onMount(() => {
+		last_name = localStorage.getItem('last-name');
+	});
+</script>
+
+<div>
+	<h1>Gallerie</h1>
+	<div class="grid">
+		{#each items as item}
+			<div style="margin-top: {item.marginTop}px" class:active={item.noble_name === last_name}>
+				<ImageFrame src={item.portrait} />
+				<p>{item.noble_name}</p>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<Confetti />
+
+<style>
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+		padding-bottom: 100px;
+	}
+	h1 {
+		font-size: 4rem;
+		font-family: Parisienne, cursive;
+		color: white;
+		margin-left: 50px;
+	}
+	p {
+		color: white;
+		font-family: Parisienne, cursive;
+		font-size: 1.2em;
+		margin-left: 40px;
+		width: 80%;
+		margin-top: 10px;
+	}
+	.active {
+		filter: drop-shadow(0px 0px 40px #be8630aa) drop-shadow(0px 0px 5px black)
+			drop-shadow(0px 0px 5px black) drop-shadow(0px 0px 5px black);
+	}
+	div {
+		max-width: 1300px;
+		width: 80%;
+		margin: 0 auto;
+	}
+</style>