feat: add notable contributors section

src/lib/components/functional/ConversionPanel.svelte

@@ -5,7 +5,6 @@
 	import Dropdown from "./Dropdown.svelte";
 	import Tooltip from "../visual/Tooltip.svelte";
 	import ProgressBar from "../visual/ProgressBar.svelte";
-	import { fade } from "$lib/animation";
 
 	const length = $derived(files.files.length);
 	const progress = $derived(files.files.filter((f) => f.result).length);

src/lib/sections/about/Credits.svelte

@@ -3,7 +3,7 @@
 	import { HeartHandshakeIcon } from "lucide-svelte";
 	import { GITHUB_URL_VERT } from "$lib/consts";
 
-	let { mainContribs, ghContribs } = $props();
+	let { mainContribs, notableContribs, ghContribs } = $props();
 </script>
 
 {#snippet contributor(
@@ -11,8 +11,9 @@
 	github: string,
 	avatar: string,
 	role?: string,
+	smaller?: boolean,
 )}
-	<div class="flex items-center gap-4">
+	<div class="flex items-center gap-4" class:gap-1={smaller}>
 		<a
 			href={github}
 			target="_blank"
@@ -23,14 +24,22 @@
 				src={avatar}
 				alt={name}
 				title={name}
-				class="{role
+				class="{smaller
+					? 'w-12 h-12 hoverable'
+					: role
 						? 'w-14 h-14 hoverable-md'
 						: 'w-10 h-10 hoverable-lg'} rounded-full"
 			/>
 		</a>
 		{#if role}
 			<div class="flex flex-col gap-1">
-				<p class="text-xl font-semibold">{name}</p>
+				<p
+					class="font-semibold"
+					class:text-xl={!smaller}
+					class:text-base={smaller}
+				>
+					{name}
+				</p>
 				<p class="text-sm font-normal text-muted">{role}</p>
 			</div>
 		{/if}
@@ -60,6 +69,24 @@
 		</div>
 	</div>
 
+	<!-- Notable contributors -->
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-1">
+			<h2 class="text-base font-bold">Notable contributors</h2>
+			<div class="flex flex-col gap-2">
+				<p class="text-base text-muted font-normal">
+					We'd like to thank these people for their major
+					contributions to VERT.
+				</p>
+				<div class="flex flex-col gap-2">
+					{#each notableContribs as contrib}
+						{@const { name, github, avatar, role } = contrib}
+						{@render contributor(name, github, avatar, role, true)}
+					{/each}
+				</div>
+			</div>
+		</div>
+
 		<!-- GitHub contributors -->
 		<div class="flex flex-col gap-4">
 			<div class="flex flex-col gap-1">
@@ -106,9 +133,11 @@
 
 			<h2 class="mt-2 -mb-2">Libraries</h2>
 			<p class="font-normal">
-			A big thanks to FFmpeg (audio, video), libvips (images) and Pandoc
-			(documents) for maintaining such excellent libraries for so many
-			years. VERT relies on them to provide you with your conversions.
+				A big thanks to FFmpeg (audio, video), libvips (images) and
+				Pandoc (documents) for maintaining such excellent libraries for
+				so many years. VERT relies on them to provide you with your
+				conversions.
 			</p>
 		</div>
-</Panel>
+	</div></Panel
+>

src/routes/about/+page.svelte

@@ -6,10 +6,12 @@
 	import avatarNullptr from "$lib/assets/avatars/nullptr.jpg";
 	import avatarLiam from "$lib/assets/avatars/liam.jpg";
 	import avatarJovannMC from "$lib/assets/avatars/jovannmc.jpg";
+	import avatarRealmy from "$lib/assets/avatars/realmy.jpg";
+	import avatarAzurejelly from "$lib/assets/avatars/azurejelly.jpg";
 	import { GITHUB_API_URL } from "$lib/consts";
 	import { addToast } from "$lib/store/ToastProvider";
-	import { dev } from "$app/environment";
-	import { page } from "$app/state";
+	// import { dev } from "$app/environment";
+	// import { page } from "$app/state";
 
 	/* interface Donator {
 		name: string;
@@ -47,6 +49,21 @@
 		},
 	];
 
+	const notableContribs: Contributor[] = [
+		{
+			name: "azurejelly",
+			github: "https://github.com/azurejelly",
+			role: "Maintaining Docker & CI support",
+			avatar: avatarAzurejelly,
+		},
+		{
+			name: "realmy",
+			github: "https://github.com/RealmyTheMan",
+			role: "Former designer & co-founder",
+			avatar: avatarRealmy,
+		}
+	];
+
 	let ghContribs: Contributor[] = [];
 
 	onMount(async () => {
@@ -66,13 +83,15 @@
 			}
 			const allContribs = await response.json();
 
-			// Filter out main contributors
-			const mainContribNames = mainContribs.map((contrib) =>
-				contrib.github.split("/").pop(),
-			);
+			// Filter out main and notable contributors
+			const excludedNames = new Set([
+				...mainContribs.map((c) => c.github.split("/").pop()),
+				...notableContribs.map((c) => c.github.split("/").pop()),
+			]);
+
 			const filteredContribs = allContribs.filter(
 				(contrib: { login: string }) =>
-					!mainContribNames.includes(contrib.login),
+					!excludedNames.has(contrib.login),
 			);
 
 			// Fetch and cache avatar images as Base64
@@ -135,7 +154,7 @@
 		<!-- Resources & Donate to VERT -->
 		<div class="flex flex-col gap-4 flex-1">
 			<About.Resources />
-			<About.Credits {mainContribs} {ghContribs} />
+			<About.Credits {mainContribs} {notableContribs} {ghContribs} />
 			{#if donationsEnabled}
 				<About.Vertd />
 			{/if}