From 6fdbb9079ee08d48c77de39e394a78b4d09b1ac5 Mon Sep 17 00:00:00 2001
From: Backwards <AlexHardingYT@gmail.com>
Date: Wed, 15 Jan 2025 13:49:19 -0500
Subject: [PATCH] Refactored components dir, Began work on about pages

---
 src/lib/components/About/Me.svelte            |  9 ++
 src/lib/components/About/Media.svelte         |  7 ++
 .../components/Common/Content/Heading.svelte  |  5 ++
 src/lib/components/{ => Main}/Contact.svelte  |  2 +-
 .../components/{ => Main}/Downloads.svelte    |  0
 src/lib/components/{ => Main}/Header.svelte   |  2 +-
 src/lib/components/{ => Main}/Hero.svelte     |  0
 src/lib/components/{ => Main}/Media.svelte    |  0
 .../components/{ => Main}/TechStack.svelte    |  0
 src/routes/+page.svelte                       | 10 +--
 src/routes/about/+page.svelte                 | 82 +++++++++++++++++++
 11 files changed, 110 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/components/About/Me.svelte
 create mode 100644 src/lib/components/About/Media.svelte
 create mode 100644 src/lib/components/Common/Content/Heading.svelte
 rename src/lib/components/{ => Main}/Contact.svelte (95%)
 rename src/lib/components/{ => Main}/Downloads.svelte (100%)
 rename src/lib/components/{ => Main}/Header.svelte (95%)
 rename src/lib/components/{ => Main}/Hero.svelte (100%)
 rename src/lib/components/{ => Main}/Media.svelte (100%)
 rename src/lib/components/{ => Main}/TechStack.svelte (100%)
 create mode 100644 src/routes/about/+page.svelte

diff --git a/src/lib/components/About/Me.svelte b/src/lib/components/About/Me.svelte
new file mode 100644
index 0000000..3928a46
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/About/Media.svelte b/src/lib/components/About/Media.svelte
new file mode 100644
index 0000000..42b76b6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/Common/Content/Heading.svelte b/src/lib/components/Common/Content/Heading.svelte
new file mode 100644
index 0000000..e8e435f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/components/Contact.svelte b/src/lib/components/Main/Contact.svelte
similarity index 95%
rename from src/lib/components/Contact.svelte
rename to src/lib/components/Main/Contact.svelte
index 634be0b..6f3cf42 100644
--- a/src/lib/components/Contact.svelte
+++ b/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" />
diff --git a/src/lib/components/Downloads.svelte b/src/lib/components/Main/Downloads.svelte
similarity index 100%
rename from src/lib/components/Downloads.svelte
rename to src/lib/components/Main/Downloads.svelte
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Main/Header.svelte
similarity index 95%
rename from src/lib/components/Header.svelte
rename to src/lib/components/Main/Header.svelte
index e965d7f..a48641e 100644
--- a/src/lib/components/Header.svelte
+++ b/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";
diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Main/Hero.svelte
similarity index 100%
rename from src/lib/components/Hero.svelte
rename to src/lib/components/Main/Hero.svelte
diff --git a/src/lib/components/Media.svelte b/src/lib/components/Main/Media.svelte
similarity index 100%
rename from src/lib/components/Media.svelte
rename to src/lib/components/Main/Media.svelte
diff --git a/src/lib/components/TechStack.svelte b/src/lib/components/Main/TechStack.svelte
similarity index 100%
rename from src/lib/components/TechStack.svelte
rename to src/lib/components/Main/TechStack.svelte
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f549848..fe71f60 100644
--- a/src/routes/+page.svelte
+++ b/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
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..a16cee7
--- /dev/null
+++ b/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>