Create Dev Team Credit Page

src/components/layout/NavBar.svelte

@@ -33,6 +33,7 @@
 			>
 				<NavButton href="/">Home</NavButton>
 				<NavButton href="/council">Meet the council</NavButton>
+				<NavButton href="/team">Team</NavButton>
 				<NavButton href="/events">Events</NavButton>
 				<NavButton href="/resources">Resources</NavButton>
 				{#if isElectionTime}
@@ -50,6 +51,7 @@
 			</a>
 			<NavButton href="/">Home</NavButton>
 			<NavButton href="/council">Meet the council</NavButton>
+			<NavButton href="/team">Team</NavButton>
 			<NavButton href="/events">Events</NavButton>
 			<NavButton href="/resources">Resources</NavButton>
 			{#if isElectionTime}

src/components/team/Avatar.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	let {
+		name,
+		src,
+		role = ''
+	}: {
+		name: string;
+		src: string;
+		role: string;
+	} = $props();
+
+	let array = $derived(role ? [...Array(3)].map((_) => [...role].concat('*')).flat() : []);
+</script>
+
+<div class="relative size-40 shrink-0 [--text-radius:108px] md:size-48">
+	<img
+		class="border-ecsess-200 size-full rounded-full border-4 object-cover p-2"
+		{src}
+		alt={name}
+	/>
+	{#if role}
+		{#each array as char, index}
+			<p
+				class="char absolute inset-24 z-10 size-3 text-xs"
+				style="transform: translate(-50%, -50%) rotate({(360 / array.length) *
+					index}deg) translateY(calc(-1 * var(--text-radius)));"
+			>
+				{char}
+			</p>
+		{/each}
+	{/if}
+</div>

src/components/team/PastCont.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	let { name, role, start, end } = $props<{
+		name: string;
+		role: string;
+		start: any;
+		end: any;
+	}>();
+
+	const dateRange = $derived(() => {
+		const startYear = start || 'Unknown';
+		const endYear = end || 'Unknown';
+		if (startYear === 'Unknown' && endYear === 'Unknown') {
+			return '';
+		}
+		return `${startYear} - ${endYear}`;
+	});
+</script>
+
+<div
+	class="fadeup group border-ecsess-700 from-ecsess-800 to-ecsess-900/50 shadow-ecsess-black/50 hover:border-ecsess-500 hover:shadow-ecsess-black/70 relative
+	flex flex-col rounded-xl border border-dotted bg-gradient-to-br
+	p-6 shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+>
+	<!-- Role Badge -->
+	{#if role}
+		<span
+			class="bg-ecsess-500 mb-3 w-fit rounded-full px-3 py-1 text-xs font-bold tracking-wider text-gray-300 uppercase"
+		>
+			{role}
+		</span>
+	{/if}
+
+	<!-- Name -->
+	<h3 class="text-ecsess-50 text-lg font-bold md:text-xl">
+		{name}
+	</h3>
+
+	<!-- Date Range -->
+	{#if dateRange()}
+		<p class="text-ecsess-200 mt-1 text-sm">
+			{dateRange()}
+		</p>
+	{/if}
+</div>
+
+<style>
+	.fadeup {
+		animation: fadeUp both;
+		animation-timeline: view();
+		animation-range: entry 25% cover 40%;
+	}
+
+	@keyframes fadeUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px) scale(0.5);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+</style>

src/components/team/TeamBanner.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { Github, Mail, FileCode } from '@lucide/svelte';
+	import Avatar from 'components/team/Avatar.svelte';
+
+	let { src, name, year, role, funFact, github, email } = $props<{
+		src: string;
+		name: string;
+		year: string;
+		role: string;
+		funFact: string;
+		github: string;
+		email: string;
+	}>();
+</script>
+
+<div
+	class="fadeup border-ecsess-500/30 bg-ecsess-950/90 hover:border-ecsess-500/60 relative flex w-full flex-col overflow-hidden rounded-xl border p-0 font-mono text-xs shadow-2xl backdrop-blur-md transition-all duration-300 hover:-translate-y-1"
+>
+	<!-- Top Meta Bar -->
+	<div
+		class="bg-ecsess-950/50 border-ecsess-500/10 text-ecsess-400 flex w-full flex-col gap-2 border-b px-6 py-3 lg:gap-1"
+	>
+		<!-- Row 1: Author & Email -->
+		<div class="grid grid-cols-1 sm:grid-cols-2">
+			<div class="flex items-center justify-center gap-2 sm:justify-start">
+				<span>Author:</span>
+				<span class="text-ecsess-100 font-bold">{name}</span>
+			</div>
+			<div class="text-right">
+				<span class="hidden break-words text-zinc-600 sm:inline">&lt;{email}&gt;</span>
+			</div>
+		</div>
+
+		<!-- Row 2: Date & Role -->
+		<div class="grid grid-cols-2">
+			<div class="flex items-center gap-2">
+				<span>Year:</span>
+				<span class="text-zinc-500">{year}</span>
+			</div>
+
+			<div class="text-ecsess-300 ml-auto text-right leading-tight font-bold">
+				{role}
+			</div>
+		</div>
+	</div>
+
+	<!-- Main Body -->
+	<div class="relative flex flex-col p-4 md:flex-row">
+		<!-- Visible centered on mobile -->
+		<div class="flex justify-center md:hidden">
+			<Avatar {src} {name} role="" />
+		</div>
+
+		<div class="min-w-0 flex-1">
+			<!-- Commit Message (Fun Fact) -->
+			<h2 class="text-ecsess-100 mb-2 text-xl font-bold tracking-tight break-words">
+				{funFact || `feat: added ${name} to the team`}
+			</h2>
+
+			<!-- Diff Box -->
+			<div class="bg-ecsess-950/50 border-ecsess-500/20 mb-6 overflow-x-auto rounded-lg border p-4">
+				<div class="flex flex-col gap-1 font-mono text-xs opacity-80">
+					<div class="flex gap-3">
+						<span class="text-zinc-700 select-none">1</span>
+						<div class="flex gap-2 break-all text-green-400/90">
+							<span class="text-green-600 select-none">+</span>
+							<span>name: "{name}";</span>
+						</div>
+					</div>
+					<div class="flex gap-3">
+						<span class="text-zinc-700 select-none">2</span>
+						<div class="flex gap-2 break-all text-green-400/90">
+							<span class="text-green-600 select-none">+</span>
+							<span>role: "{role}";</span>
+						</div>
+					</div>
+					<div class="flex gap-3">
+						<span class="text-zinc-700 select-none">3</span>
+						<div class="flex gap-2 break-all text-green-400/90">
+							<span class="text-green-600 select-none">+</span>
+							<span>contact: "{email}";</span>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Action Buttons -->
+			<div class="flex items-center justify-center gap-3">
+				{#if github}
+					<a
+						href={github}
+						target="_blank"
+						class="hover:bg-ecsess-500/10 hover:border-ecsess-500/50 hover:text-ecsess-200 border-ecsess-500/20 flex items-center gap-2 rounded border px-4 py-2 text-xs font-semibold text-zinc-400 transition-colors"
+					>
+						<Github class="size-3" />
+						View Profile
+					</a>
+				{/if}
+				{#if email}
+					<a
+						href="mailto:{email}"
+						class="hover:bg-ecsess-500/10 hover:border-ecsess-500/50 hover:text-ecsess-200 border-ecsess-500/20 flex items-center gap-2 rounded border px-4 py-2 text-xs font-semibold text-zinc-400 transition-colors"
+					>
+						<Mail class="size-3" />
+						Email
+					</a>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.fadeup {
+		animation: fadeUp both;
+		animation-timeline: view();
+		animation-range: entry 25% cover 40%;
+	}
+
+	@keyframes fadeUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px) scale(0.5);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+</style>

src/lib/schemas.ts

@@ -81,3 +81,16 @@ export type Redirect = {
 	shortname: string;
 	url: string;
 };
+
+export type DevTeam = {
+	name: string;
+	role: string;
+	yearProgram: string;
+	email: string;
+	active: boolean;
+	start: Date;
+	end: Date;
+	funFact: string;
+	github: string;
+	image: string; //URL
+};

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

@@ -0,0 +1,24 @@
+//Wait for CMS to setup
+import type { DevTeam } from '$lib/schemas';
+import { getFromCMS } from '$lib/utils';
+
+const query = `*[_type == "devTeam"]{
+  name,
+  role,
+  yearProgram,
+  email,
+  active,
+  start,
+  end,
+  funFact,
+  github,
+  "image": image.asset->url+"?h=300&fm=webp",
+}`;
+
+export const load = async ({ url }) => {
+	let devTeam: DevTeam[] = await getFromCMS(query);
+	return {
+		devTeam: devTeam,
+		canonical: url.href
+	};
+};