Link to GitHub profiles

src/lib/sections/about/Credits.svelte

@@ -5,18 +5,27 @@
 	let { mainContribs, ghContribs } = $props();
 </script>
 
-{#snippet contributor(name: string, role: string, avatar: string)}
+{#snippet contributor(
+	name: string,
+	github: string,
+	avatar: string,
+	role?: string,
+)}
 	<div class="flex items-center gap-4">
-		<img
+		<a href={github} target="_blank" rel="noopener noreferrer">
-			src={avatar}
+			<img
-			alt={name}
+				src={avatar}
-			title={name}
+				alt={name}
-			class="w-14 h-14 rounded-full"
+				title={name}
-		/>
+				class="{role ? 'w-14 h-14' : 'w-10 h-10'} rounded-full"
-		<div class="flex flex-col gap-1">
+			/>
-			<p class="text-xl font-semibold">{name}</p>
+		</a>
-			<p class="text-sm font-normal text-muted">{role}</p>
+		{#if role}
-		</div>
+			<div class="flex flex-col gap-1">
+				<p class="text-xl font-semibold">{name}</p>
+				<p class="text-sm font-normal text-muted">{role}</p>
+			</div>
+		{/if}
 	</div>
 {/snippet}
 
@@ -34,8 +43,8 @@
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-row flex-wrap gap-2">
 			{#each mainContribs as contrib}
-				{@const { name, role, avatar } = contrib}
+				{@const { name, github, avatar, role } = contrib}
-				{@render contributor(name, role, avatar)}
+				{@render contributor(name, github, avatar, role)}
 			{/each}
 		</div>
 	</div>
@@ -74,13 +83,8 @@
 		{#if ghContribs && ghContribs.length > 0}
 			<div class="flex flex-row flex-wrap gap-2">
 				{#each ghContribs as contrib}
-					{@const { name, avatar } = contrib}
+					{@const { name, github, avatar } = contrib}
-					<img
+					{@render contributor(name, github, avatar)}
-						src={avatar}
-						alt={name}
-						title={name}
-						class="w-10 h-10 rounded-full"
-					/>
 				{/each}
 			</div>
 		{/if}

src/routes/about/+page.svelte

@@ -12,9 +12,9 @@
 
 	interface Contributor {
 		name: string;
-		github?: string;
+		github: string;
-		role?: string;
 		avatar: string;
+		role?: string;
 	}
 
 	const donors: Donator[] = [];
@@ -22,20 +22,20 @@
 	const mainContribs: Contributor[] = [
 		{
 			name: "nullptr",
-			github: "not-nullptr",
+			github: "https://github.com/not-nullptr",
 			role: "Lead developer; conversion backend, UI implementation",
 			avatar: "https://avatars.githubusercontent.com/u/62841684?v=4",
 		},
 		{
 			name: "Realmy",
-			github: "RealmyTheMan",
+			github: "https://github.com/RealmyTheMan",
 			role: "Lead designer; logo and branding, user interface design",
 			avatar: "https://avatars.githubusercontent.com/u/163438634?v=4",
 		},
 		{
 			name: "JovannMC",
-			github: "JovannMC",
+			github: "https://github.com/JovannMC",
-			role: "Developer; lorem ipsum, UI implementation",
+			role: "Developer; UI implementation",
 			avatar: "https://avatars.githubusercontent.com/u/45893380?v=4",
 		},
 	];
@@ -54,18 +54,25 @@
 			const allContribs = await response.json();
 
 			// Filter out main contributors
-			const mainContribNames = mainContribs.map(
+			const mainContribNames = mainContribs.map((contrib) =>
-				(contrib) => contrib.github,
+				contrib.github.split("/").pop(),
 			);
 			ghContribs = allContribs
 				.filter(
 					(contrib: { login: string }) =>
 						!mainContribNames.includes(contrib.login),
 				)
-				.map((contrib: { login: string; avatar_url: string }) => ({
+				.map(
-					name: contrib.login,
+					(contrib: {
-					avatar: contrib.avatar_url,
+						login: string;
-				}));
+						avatar_url: string;
+						html_url: string;
+					}) => ({
+						name: contrib.login,
+						avatar: contrib.avatar_url,
+						github: contrib.html_url,
+					}),
+				);
 		} catch (e) {
 			error(["general"], `Error fetching GitHub contributors: ${e}`);
 		}