Refactored components dir, Began work on about pages

src/lib/components/About/Me.svelte

@@ -0,0 +1,9 @@
+<script>
+  import Header from "$lib/components/Common/Content/Heading.svelte";
+</script>
+
+<div class="w-max h-1/2 m-auto flex flex-col">
+  <Header content="Backwards Development"/>
+  <p class="max-w-screen-lg">I'm Alexander Harding, I am the Founder of Backwards Development. I created Backwards Development as an umbrella for all of my professional works, this website was designed to allow for distribution for my software, tools and applications!</p>
+  <p class="max-w-screen-lg">Backwards Development is a group I founded to work on whatever enter's my plate, If you need anything done, feel free to <a href="/#contact" class="text-primary-500 underline">Contact Us</a> at any time!</p>
+</div>

src/lib/components/About/Media.svelte

@@ -0,0 +1,7 @@
+<script>
+  import Heading from "$lib/components/Common/Content/Heading.svelte";
+</script>
+
+<div>
+  <Heading content="Backwards Media"/>
+</div>

src/lib/components/Common/Content/Heading.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let content;
+</script>
+
+<h1 class="h1 text-center pt-4">{content}</h1>

src/lib/components/Main/Contact.svelte

@@ -3,7 +3,7 @@
   import MaterialSymbolsMail from '~icons/material-symbols/mail';
 </script>
 
-<div class="w-screen h-screen flex justify-center items-center">
+<div class="w-screen h-screen flex justify-center items-center" id="contact">
   <form action="?/contact" class="bg-surface-900 w-1/2 h-1/2 p-8 rounded-md">
     <h1 class="h1 font-bold ps-4 pb-4">Contact Us</h1>
     <hr class="opacity-25" />

src/lib/components/Main/Header.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Hero from "$lib/components/Hero.svelte";
+  import Hero from "$lib/components/Main/Hero.svelte";
   import ArrowDown from "~icons/material-symbols/keyboard-double-arrow-down-rounded";
   import { crossfade, fade, fly } from "svelte/transition";
   import { onMount } from "svelte";

src/routes/+page.svelte

@@ -1,11 +1,11 @@
 <script>
   import { onMount } from "svelte";
-  import Header from "$lib/components/Header.svelte";
-  import Downloads from "$lib/components/Downloads.svelte";
+  import Header from "$lib/components/Main/Header.svelte";
+  import Downloads from "$lib/components/Main/Downloads.svelte";
   import { fly } from "svelte/transition";
-  import Media from "$lib/components/Media.svelte";
-  import Contact from "$lib/components/Contact.svelte";
-  import TechStack from "$lib/components/TechStack.svelte";
+  import Media from "$lib/components/Main/Media.svelte";
+  import Contact from "$lib/components/Main/Contact.svelte";
+  import TechStack from "$lib/components/Main/TechStack.svelte";
 
   /* IMPORTANT */
   // Anything added into the page directly will likely break the page's scrolling behaviour

src/routes/about/+page.svelte

@@ -0,0 +1,82 @@
+<script>
+	import Me from '$lib/components/About/Me.svelte';
+	import Media from '$lib/components/About/Media.svelte';
+	import { onMount } from 'svelte';
+	import { fly } from 'svelte/transition';
+
+	/* IMPORTANT */
+	// Anything added into the page directly will likely break the page's scrolling behaviour
+	// To properly add something to the main page, make it into a component and add it to the array.
+	// This array is in order of how they are to be displayed, modifying their positions will modify them in page.
+
+	let slides = [Me, Media];
+
+	let currentSection = 0;
+
+	// Update the current section based on scroll position
+	const handleScroll = () => {
+		const sections = document.querySelectorAll('.section');
+		const scrollTop = document.querySelector('.scroll-container').scrollTop;
+		sections.forEach((section, index) => {
+			if (section.offsetTop <= scrollTop + window.innerHeight / 2) {
+				currentSection = index;
+			}
+		});
+	};
+</script>
+
+<div id="main" class="scroll-container" on:scroll={handleScroll}>
+	{#each slides as content}
+		<section class="section flex flex-row">
+			<svelte:component this={content} />
+		</section>
+	{/each}
+</div>
+
+<!-- Tracker -->
+{#if currentSection >= 0}
+	<div in:fly={{ x: 50, duration: 300 }} out:fly={{ x: 50, duration: 300 }} class="tracker">
+		{#each slides as _, i}
+			<div class="tracker-dot {i === currentSection ? 'active' : ''}"></div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.scroll-container {
+		scroll-snap-type: y mandatory;
+		overflow-y: auto;
+		height: 100vh;
+		width: 100vw;
+		scroll-behavior: smooth;
+	}
+
+	.section {
+		scroll-snap-align: start;
+		min-height: 100vh; /* Full viewport height */
+		width: 100vw;
+	}
+
+	/* Tracker Styles */
+	.tracker {
+		position: fixed;
+		top: 50%;
+		right: 20px;
+		transform: translateY(-50%);
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.tracker-dot {
+		width: 10px;
+		height: 10px;
+		@apply bg-surface-600;
+		border-radius: 50%;
+		transition: background-color 0.3s ease;
+	}
+
+	.tracker-dot.active {
+		@apply bg-primary-600;
+	}
+</style>