SamoaCodeHub · Green-Ranger11 · Mar 10, 2026 · Sep 14, 2024 · Sep 15, 2024 · Sep 16, 2024
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -36,4 +36,4 @@ jobs:
         with:
           name: playwright-report
           path: playwright-report/
-          retention-days: 30
+          retention-days: 30
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="sso-custom-theme">
-		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
+	<body data-sveltekit-preload-data="hover">
+		<main style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</main>
 	</body>
 </html>
diff --git a/src/app.postcss b/src/app.postcss
@@ -3,7 +3,122 @@
 @tailwind utilities;
 @tailwind variants;
 
+:root {
+	--background-color-100: #ffffffbf;
+	--background-color-200: #ffffff;
+	--font-color-100: #0f0f0f;
+	--font-color-200: #2b2b2b;
+	--font-color-300: #2c2c2c;
+	--font-color-400: #4d4d4d;
+	--accent-color-100: #def71cff;
+	--border-color-100: #0000001a;
+	--border-color-200: #00000080;
+	--grey-100: #f1f0f280;
+	--grey-200: #f5f5f5;
+	--grey-300: #dcdcdc;
+
+	--border-radius-100: 5px;
+	--navbar-height: 6rem;
+}
+
+* {
+	font-family: 'Inter', sans-serif;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+a {
+	text-decoration: none;
+}
+
+::placeholder {
+	font-size: 14px;
+	color: rgba(0, 0, 0, 0.65);
+}
+
+::selection {
+	background: #141414;
+	color: #ffffffbf;
+}
+
+main {
+	margin-inline: auto;
+	max-width: 1024px;
+	width: 100%;
+}
+
+@media (max-width: 1024px) {
+	main {
+		padding-inline: 1rem;
+	}
+}
+
 html,
 body {
-	@apply h-full overflow-hidden;
+	background-color: var(--background-color-100);
+	color: var(--font-color-100);
+
+	section {
+		width: 100%;
+	}
+
+	a {
+		color: var(--font-color-100);
+	}
+
+	abbr {
+		text-decoration: none;
+	}
+
+	abbr::after {
+		content: none;
+	}
+
+	h2 {
+		color: var(--font-color-200);
+		font-size: 2.5rem;
+		font-weight: 500;
+		margin-block-end: 2rem;
+	}
+
+	h3 {
+		color: var(--font-color-300);
+		font-size: 1.5rem;
+		font-weight: 500;
+	}
+
+	h4 {
+		color: var(--font-color-400);
+		font-weight: 500;
+		font-size: 1.125rem;
+		letter-spacing: -0.005em;
+		line-height: 1.5;
+	}
+
+	.link {
+		border-radius: var(--border-radius-100);
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		gap: 0.3rem;
+		font-weight: 500;
+		padding: 0.5rem 2rem;
+	}
+
+	.link-color {
+		background-color: var(--accent-color-100);
+
+		&:hover {
+			background: rgba(222, 247, 28, 0.52);
+		}
+	}
+
+	.link-plain {
+		background-color: var(--grey-200);
+
+		&:hover {
+			background: rgba(235, 234, 234, 1);
+		}
+	}
 }
diff --git a/src/lib/assets/images/alesana-profile.jpeg b/src/lib/assets/images/alesana-profile.jpeg
diff --git a/src/lib/assets/images/alesana-profile.png b/src/lib/assets/images/alesana-profile.png
diff --git a/src/lib/assets/projects-images/project-sso-sitadb.png b/src/lib/assets/projects-images/project-sso-sitadb.png
diff --git a/src/lib/assets/projects-images/project-sso-website.png b/src/lib/assets/projects-images/project-sso-website.png
diff --git a/src/lib/components/About.svelte b/src/lib/components/About.svelte
@@ -1,87 +1,47 @@
 <script>
 	import { Section } from '$lib/utils';
-	import {
-		Timeline,
-		TimelineItem,
-		TimelineSeparator,
-		TimelineDot,
-		TimelineConnector,
-		TimelineContent,
-		TimelineOppositeContent
-	} from 'svelte-vertical-timeline';
-	const options = [
-		{
-			title: 'Launched SCH Facebook Group',
-			time: 'August 2021',
-			description:
-				'Created SCH Facebook group as a central hub for information sharing within our community.',
-			url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-		},
-		{
-			title: 'Created SCH Discord Channel',
-			time: 'September 2021',
-			description:
-				'Started a Discord Channel facilitating streamlined communication and collaboration for SCH members.',
-			url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-		},
-		{
-			title: 'Completed SITA Membership Database Project',
-			time: 'August 2023',
-			description: 'Successfully wrapped up the SITA membership database project.',
-			url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-		},
-		{
-			title: 'Launched SCH Website',
-			time: 'May 2024',
-			description:
-				'Unveiled the official SCH Website, streamlining user access and enhancing information sharing within.',
-			url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-		}
-	];
-</script>
+	import { Contributors } from '$lib/utils/contributors';
+	import { IconUsers } from '@tabler/icons-svelte';
 
-<div id={Section.About} class="container w-full py-12 mx-auto bg-transparent">
-	<h1 class="text-4xl font-bold text-center">Samoa Code Hub - Our Journey in Code</h1>
-	<Timeline
-		position="alternate"
-		style={'padding: 50px 0; max-width: 1024px; width: 100%; margin: 0 auto'}
-	>
-		{#each options as option}
-			<TimelineItem>
-				<TimelineOppositeContent slot="opposite-content">
-					<p>{option.time}</p>
-				</TimelineOppositeContent>
-				<TimelineSeparator>
-					<TimelineDot style={'background-color: #7CD5E2;'} />
-					<TimelineConnector />
-				</TimelineSeparator>
-				<TimelineContent style={'padding-bottom: 50px;'}>
-					<h3>
-						<a href={option.url} title="Go to Homepage" class="hover:underline">
-							{option.title}
-						</a>
-					</h3>
+	// contributors array for the images
+	const team = Contributors.filter((c) => c.featured);
 
-					<p class="text-[#5d5c5c] dark:text-[#cecece]">{option.description}</p>
-				</TimelineContent>
-			</TimelineItem>
-		{/each}
-	</Timeline>
-</div>
+	// offsets for left calc; adjust px values to taste
+	const offsets = ['- 80px', '', '+ 80px'];
+</script>
 
-<style>
-	/* .container{
-		background: #13344C
-	} */
-	h3 {
-		letter-spacing: 1.5px;
-		margin-bottom: 8px;
-		font-size: 18px;
-		font-weight: 600;
-	}
+<div
+	id={Section.About}
+	class="py-[clamp(3.125rem,8.3vw,7.5rem)] border-y-2 border-[var(--border-color-100)] w-full"
+>
+	<h2>About Us</h2>
+	<div class="flex max-[768px]:flex-col">
+		<!-- LEFT BOX -->
+		<div class="w-1/2 max-[768px]:w-full">
+			<p class="about-p max-[450px]:text-justify">
+				Samoa Code Hub started in 2022 with a simple idea — bring Samoan developers together to
+				learn, build, and grow. We’re a community-driven space where creativity meets collaboration.
+				From open-source projects to mentorship and local meetups, we connect developers and help to
+				grow Samoa’s tech scene — if you’re curious who’s behind it all, meet the team making it
+				happen.
+			</p>
+			<a href="/contributors" class="link link-color mt-[2.25rem]">
+				Meet the team <IconUsers size="20" />
+			</a>
+		</div>
 
-	p {
-		letter-spacing: 1.5px;
-		font-size: 14px;
-	}
-</style>
+		<!-- RIGHT BOX -->
+		<div class="w-1/2 max-[768px]:w-full relative h-[150px] max-[768px]:mt-[4.25rem]">
+			{#each team as { avatar, name }, i}
+				<img
+					src={avatar}
+					alt={name}
+					title={name}
+					class="absolute top-0 left-1/2 -translate-x-1/2 h-full aspect-square
+          rounded-full object-cover border-[7px] border-[var(--background-color-200)] grayscale"
+					style={`left: calc(50% ${offsets[i] || ''}); z-index: ${team.length - i};`}
+				/>
+			{/each}
+		</div>
+	</div>
+</div>