From da885bec57a4345ceb03458751edc53ccf667a95 Mon Sep 17 00:00:00 2001
From: Sangelo <contact@sangelo.space>
Date: Tue, 12 Mar 2024 16:26:21 +0100
Subject: [PATCH 1/3] Initial Project Refactoring and Cleanup

---
 src/{routes => lib/components}/About.svelte   | 31 +------
 src/{routes => lib/components}/Home.svelte    | 32 +------
 src/{routes => lib/components}/Modal.svelte   |  0
 src/{routes => lib/components}/Navbar.svelte  |  0
 .../components}/Projects.svelte               | 47 +++-------
 src/{routes => lib/components}/Socials.svelte | 89 +++----------------
 src/lib/emojis.ts                             | 37 ++++++++
 src/lib/index.ts                              | 29 +++++-
 src/{routes => lib}/modals/dashinit.svelte    |  4 +-
 .../modals/explorecraft.svelte                |  4 +-
 src/{routes => lib}/modals/lunivity.svelte    |  4 +-
 src/{routes => lib}/modals/more.svelte        | 14 +--
 src/{routes => lib}/modals/sangefault.svelte  |  4 +-
 .../modals/sangelospace.svelte                |  4 +-
 .../modals/utilityclient.svelte               |  4 +-
 src/routes/+layout.svelte                     |  2 +-
 src/routes/+page.svelte                       | 10 +--
 svelte.config.js                              | 15 +++-
 18 files changed, 133 insertions(+), 197 deletions(-)
 rename src/{routes => lib/components}/About.svelte (81%)
 rename src/{routes => lib/components}/Home.svelte (82%)
 rename src/{routes => lib/components}/Modal.svelte (100%)
 rename src/{routes => lib/components}/Navbar.svelte (100%)
 rename src/{routes => lib/components}/Projects.svelte (76%)
 rename src/{routes => lib/components}/Socials.svelte (86%)
 create mode 100644 src/lib/emojis.ts
 rename src/{routes => lib}/modals/dashinit.svelte (91%)
 rename src/{routes => lib}/modals/explorecraft.svelte (92%)
 rename src/{routes => lib}/modals/lunivity.svelte (91%)
 rename src/{routes => lib}/modals/more.svelte (93%)
 rename src/{routes => lib}/modals/sangefault.svelte (92%)
 rename src/{routes => lib}/modals/sangelospace.svelte (92%)
 rename src/{routes => lib}/modals/utilityclient.svelte (92%)

diff --git a/src/routes/About.svelte b/src/lib/components/About.svelte
similarity index 81%
rename from src/routes/About.svelte
rename to src/lib/components/About.svelte
index bbb46b0..8a819e9 100644
--- a/src/routes/About.svelte
+++ b/src/lib/components/About.svelte
@@ -1,30 +1,5 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
-
-    function smoothScrollTo(elementId: string) {
-		const element = document.getElementById(elementId);
-		if (element) {
-			element.scrollIntoView({
-				behavior: 'smooth'
-			});
-		}
-	}
-
-	function redirectToHome() {
-		// goto('/');
-		smoothScrollTo('home');
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		// Trigger redirection on Enter key or Space bar
-		if (event.key === 'Enter' || event.key === ' ') {
-			redirectToHome();
-		}
-	}
-
-	function openWebsite(url: string) {
-		goto(url);
-	}
+    import { smoothScrollTo, handleKeydown } from '$lib/index';
 </script>
 
 <div id="about" class="section">
@@ -38,7 +13,7 @@
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             tabindex="0"
-            on:click={redirectToHome}
+            on:click={() => smoothScrollTo('home')}
             on:keydown={handleKeydown}
         >
             <mask
@@ -79,5 +54,5 @@
 </div>
 
 <style lang="scss">
-    @import '../styles/about.scss';
+    @import '$styles/about.scss';
 </style>
\ No newline at end of file
diff --git a/src/routes/Home.svelte b/src/lib/components/Home.svelte
similarity index 82%
rename from src/routes/Home.svelte
rename to src/lib/components/Home.svelte
index 14c4149..a10547c 100644
--- a/src/routes/Home.svelte
+++ b/src/lib/components/Home.svelte
@@ -1,32 +1,6 @@
 <script lang='ts'>
-    import { goto } from '$app/navigation';
-
     import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
-
-    function smoothScrollTo(elementId: string) {
-		const element = document.getElementById(elementId);
-		if (element) {
-			element.scrollIntoView({
-				behavior: 'smooth'
-			});
-		}
-	}
-
-	function redirectToHome() {
-		// goto('/');
-		smoothScrollTo('home');
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		// Trigger redirection on Enter key or Space bar
-		if (event.key === 'Enter' || event.key === ' ') {
-			redirectToHome();
-		}
-	}
-
-	function openWebsite(url: string) {
-		goto(url);
-	}
+    import { smoothScrollTo, handleKeydown } from '$lib/index';
 </script>
 
 <div id="home" class="section">
@@ -80,6 +54,6 @@
 </div>
 
 <style lang="scss">
-    @import '../styles/index.scss';
-	@import '../styles/home.scss';
+    @import '$styles/index.scss';
+	@import '$styles/home.scss';
 </style>
\ No newline at end of file
diff --git a/src/routes/Modal.svelte b/src/lib/components/Modal.svelte
similarity index 100%
rename from src/routes/Modal.svelte
rename to src/lib/components/Modal.svelte
diff --git a/src/routes/Navbar.svelte b/src/lib/components/Navbar.svelte
similarity index 100%
rename from src/routes/Navbar.svelte
rename to src/lib/components/Navbar.svelte
diff --git a/src/routes/Projects.svelte b/src/lib/components/Projects.svelte
similarity index 76%
rename from src/routes/Projects.svelte
rename to src/lib/components/Projects.svelte
index a58b9a7..eabe0f3 100644
--- a/src/routes/Projects.svelte
+++ b/src/lib/components/Projects.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import Modal from './Modal.svelte';
-	import DashinitModal from './modals/dashinit.svelte';
-	import SangeFaultModal from './modals/sangefault.svelte';
-	import ExploreCraftModal from './modals/explorecraft.svelte';
-	import UtilityClientModal from './modals/utilityclient.svelte';
-	import SangeloSpaceModal from './modals/sangelospace.svelte';
-	import LunivityModal from './modals/lunivity.svelte';
-	import MoreProjectsModal from './modals/more.svelte';
-	// import type { SvelteComponent } from 'svelte';
 
+	import { smoothScrollTo, handleKeydown } from '$lib/index';
+	
+	// Modal
+	import Modal from '$lib/components/Modal.svelte';
+	import DashinitModal from '$lib/modals/dashinit.svelte';
+	import SangeFaultModal from '$lib/modals/sangefault.svelte';
+	import ExploreCraftModal from '$lib/modals/explorecraft.svelte';
+	import UtilityClientModal from '$lib/modals/utilityclient.svelte';
+	import SangeloSpaceModal from '$lib/modals/sangelospace.svelte';
+	import LunivityModal from '$lib/modals/lunivity.svelte';
+	import MoreProjectsModal from '$lib/modals/more.svelte';
+	
 	let showModal = false;
 	let selectedModule: any = null;
 
@@ -22,27 +24,6 @@
 		showModal = false;
 	}
 
-
-	function smoothScrollTo(elementId: string) {
-		const element = document.getElementById(elementId);
-		if (element) {
-			element.scrollIntoView({
-				behavior: 'smooth'
-			});
-		}
-	}
-
-	function redirectToHome() {
-		// goto('/');
-		smoothScrollTo('home');
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		// Trigger redirection on Enter key or Space bar
-		if (event.key === 'Enter' || event.key === ' ') {
-			redirectToHome();
-		}
-	}
 </script>
 
 <div id="projects" class="section">
@@ -56,7 +37,7 @@
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
 			tabindex="0"
-			on:click={redirectToHome}
+			on:click={() => smoothScrollTo('home')}
 			on:keydown={handleKeydown}
 		>
 			<mask
@@ -119,5 +100,5 @@
 </div>
 
 <style lang="scss">
-	@import '../styles/projects.scss';
+	@import '$styles/projects.scss';
 </style>
diff --git a/src/routes/Socials.svelte b/src/lib/components/Socials.svelte
similarity index 86%
rename from src/routes/Socials.svelte
rename to src/lib/components/Socials.svelte
index cb96104..3d5f74d 100644
--- a/src/routes/Socials.svelte
+++ b/src/lib/components/Socials.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { goto } from '$app/navigation';
+    import { onMount } from 'svelte';
 	import { slide } from 'svelte/transition';
+	import { smoothScrollTo, handleKeydown, openWebsite } from '$lib/index';
+	import { emojis } from '$lib/emojis';
 
 	// Icons
 	import IconDiscord from 'svelte-material-icons/Discord.svelte';
@@ -14,93 +15,27 @@
 	import IconMastodon from 'svelte-material-icons/Mastodon.svelte';
 	import IconSteam from 'svelte-material-icons/Steam.svelte';
 
-	// Initialisations
-
 	let showMore = false;
-
-	const emojis = [
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ☕️',
-		'with 🍵',
-		'with 🍪',
-		'with 💤',
-		'on a 💻',
-		'in 🏫',
-		'at 🏠',
-		'with passion',
-		'with <img src="/assets/emojis/vscodium.png" alt="VSCodium" style="height: 18px;"/>',
-		'with <img src="/assets/emojis/stackoverflow.png" alt="StackOverflow" style="height: 18px;"/>',
-		'with <img src="/assets/emojis/svelte.png" alt="Svelte" style="height: 18px;" />'
-	];
-
 	let emoji = '';
 
-	// Functions
-
-	function changeEmoji() {
+	export function changeEmoji() {
 		emoji = emojis[Math.floor(Math.random() * emojis.length)];
 	}
 
-	function toggleShowMore() {
+	export function toggleShowMore() {
 		showMore = !showMore;
 	}
 
-	onMount(() => {
-		changeEmoji();
-	});
-
-	function smoothScrollTo(elementId: string) {
-		const element = document.getElementById(elementId);
-		if (element) {
-			element.scrollIntoView({
-				behavior: 'smooth'
-			});
-		}
-	}
-
-	function redirectToHome() {
-		// goto('/');
-		smoothScrollTo('home');
-	}
-
-	function handleKeydownHome(event: KeyboardEvent) {
-		// Trigger redirection on Enter key or Space bar
-		if (event.key === 'Enter' || event.key === ' ') {
-			redirectToHome();
-		}
-	}
-
-	function handleKeydownToggleMore(event: KeyboardEvent) {
+	export function handleKeydownToggleMore(event: KeyboardEvent) {
 		// Trigger redirection on Enter key or Space bar
 		if (event.key === 'Enter' || event.key === ' ') {
 			toggleShowMore();
 		}
 	}
 
-	function openWebsite(url: string) {
-		goto(url);
-	}
+	onMount(() => {
+        changeEmoji();
+    });
 </script>
 
 <div id="socials" class="section">
@@ -299,8 +234,8 @@
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
 			tabindex="0"
-			on:click={redirectToHome}
-			on:keydown={handleKeydownHome}
+			on:click={() => smoothScrollTo('home')}
+			on:keydown={handleKeydown}
 		>
 			<mask
 				id="mask0_1404_2"
@@ -336,5 +271,5 @@
 </div>
 
 <style lang="scss">
-	@import '../styles/socials.scss';
+	@import '$styles/socials.scss';
 </style>
diff --git a/src/lib/emojis.ts b/src/lib/emojis.ts
new file mode 100644
index 0000000..3e6b14e
--- /dev/null
+++ b/src/lib/emojis.ts
@@ -0,0 +1,37 @@
+// Initialisations
+
+export const emojis = [
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ☕️',
+    'with 🍵',
+    'with 🍪',
+    'with 💤',
+    'on a 💻',
+    'in 🏫',
+    'at 🏠',
+    'with passion',
+    'with <img src="/assets/emojis/vscodium.png" alt="VSCodium" style="height: 18px;"/>',
+    'with <img src="/assets/emojis/stackoverflow.png" alt="StackOverflow" style="height: 18px;"/>',
+    'with <img src="/assets/emojis/svelte.png" alt="Svelte" style="height: 18px;" />'
+];
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 856f2b6..4905f7d 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +1,28 @@
-// place files you want to import through the `$lib` alias in this folder.
+// index.ts
+
+import { goto } from '$app/navigation';
+
+export function smoothScrollTo(elementId: string) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.scrollIntoView({
+            behavior: 'smooth'
+        });
+    }
+}
+
+// export function redirectToHome() {
+//     // goto('/');
+//     smoothScrollTo('home');
+// }
+
+export function handleKeydown(event: KeyboardEvent) {
+    // Trigger redirection on Enter key or Space bar
+    if (event.key === 'Enter' || event.key === ' ') {
+        smoothScrollTo('home');
+    }
+}
+
+export function openWebsite(url: string) {
+    goto(url);
+}
diff --git a/src/routes/modals/dashinit.svelte b/src/lib/modals/dashinit.svelte
similarity index 91%
rename from src/routes/modals/dashinit.svelte
rename to src/lib/modals/dashinit.svelte
index e0e8cae..9c454ba 100644
--- a/src/routes/modals/dashinit.svelte
+++ b/src/lib/modals/dashinit.svelte
@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/modal.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>
diff --git a/src/routes/modals/explorecraft.svelte b/src/lib/modals/explorecraft.svelte
similarity index 92%
rename from src/routes/modals/explorecraft.svelte
rename to src/lib/modals/explorecraft.svelte
index d13f66c..16915b2 100644
--- a/src/routes/modals/explorecraft.svelte
+++ b/src/lib/modals/explorecraft.svelte
@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/modal.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>
diff --git a/src/routes/modals/lunivity.svelte b/src/lib/modals/lunivity.svelte
similarity index 91%
rename from src/routes/modals/lunivity.svelte
rename to src/lib/modals/lunivity.svelte
index 1188d93..565213d 100644
--- a/src/routes/modals/lunivity.svelte
+++ b/src/lib/modals/lunivity.svelte
@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/modal.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>
diff --git a/src/routes/modals/more.svelte b/src/lib/modals/more.svelte
similarity index 93%
rename from src/routes/modals/more.svelte
rename to src/lib/modals/more.svelte
index 59c9457..b4208a5 100644
--- a/src/routes/modals/more.svelte
+++ b/src/lib/modals/more.svelte
@@ -1,11 +1,5 @@
 <script lang="ts">
-	import Modal from '../Modal.svelte';
-	import DashinitModal from './dashinit.svelte';
-	import SangeFaultModal from './sangefault.svelte';
-	import ExploreCraftModal from './explorecraft.svelte';
-	import UtilityClientModal from './utilityclient.svelte';
-	import SangeloSpaceModal from './sangelospace.svelte'
-
+	
 	import IconCobweb from 'svelte-material-icons/SpiderWeb.svelte';
 	import IconArchive from 'svelte-material-icons/ArchiveOutline.svelte';
 
@@ -132,7 +126,7 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
-	@import '../../styles/modal-more.scss';
+	@import '$styles/modal.scss';
+	@import '$styles/mobile/modal-mobile.scss';
+	@import '$styles/modal-more.scss';
 </style>
diff --git a/src/routes/modals/sangefault.svelte b/src/lib/modals/sangefault.svelte
similarity index 92%
rename from src/routes/modals/sangefault.svelte
rename to src/lib/modals/sangefault.svelte
index 2fa4f13..6776609 100644
--- a/src/routes/modals/sangefault.svelte
+++ b/src/lib/modals/sangefault.svelte
@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/modal.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>
diff --git a/src/routes/modals/sangelospace.svelte b/src/lib/modals/sangelospace.svelte
similarity index 92%
rename from src/routes/modals/sangelospace.svelte
rename to src/lib/modals/sangelospace.svelte
index 29362d0..7685cf1 100644
--- a/src/routes/modals/sangelospace.svelte
+++ b/src/lib/modals/sangelospace.svelte
@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/modal.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>
diff --git a/src/routes/modals/utilityclient.svelte b/src/lib/modals/utilityclient.svelte
similarity index 92%
rename from src/routes/modals/utilityclient.svelte
rename to src/lib/modals/utilityclient.svelte
index 249e425..9a5729a 100644
--- a/src/routes/modals/utilityclient.svelte
+++ b/src/lib/modals/utilityclient.svelte
@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/modal.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5b1bf39..5353a22 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script>
 	import '../app.scss';
-	import Navbar from './Navbar.svelte';
+	import Navbar from '$lib/components/Navbar.svelte';
 
 	import { fly } from 'svelte/transition';
 	export let data;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b808af6..183aefd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 
-	import Home from './Home.svelte';
-	import About from './About.svelte';
-	import Projects from './Projects.svelte';
-	import Socials from './Socials.svelte';
+	import Home from '$lib/components/Home.svelte';
+	import About from '$lib/components/About.svelte';
+	import Projects from '$lib/components/Projects.svelte';
+	import Socials from '$lib/components/Socials.svelte';
 
 </script>
 
@@ -15,5 +15,5 @@
 </div>
 
 <style lang="scss">
-	@import '../styles/index.scss';
+	@import '$styles/index.scss';
 </style>
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index e6dc5e1..554a487 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -8,6 +8,13 @@ const config = {
 	// for more information about preprocessors
 	preprocess: [vitePreprocess({})],
 
+	onwarn: (warning, handler) => {
+        if (warning.code === 'css-unused-selector') {
+            return;
+        }
+        handler(warning);
+    },
+
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
@@ -20,7 +27,13 @@ const config = {
 			fallback: undefined,
 			precompress: false,
 			strict: true
-		})
+		}),
+		
+		alias: {
+			$routes: "src/routes",
+			$components: "src/components",
+			$styles: "src/styles"
+		},
 	}
 };
 
-- 
2.39.2


From 8e23062fa94e789475d23c5c52b8086ba1c424e3 Mon Sep 17 00:00:00 2001
From: Sangelo <contact@sangelo.space>
Date: Tue, 12 Mar 2024 18:14:54 +0100
Subject: [PATCH 2/3] Scroll Behaviour Changes using GSAP - Currently broken on
 Chromium. Safari and Firefox work just fine.

---
 package.json            |  1 +
 src/lib/index.ts        | 49 +++++++++++++++++++++++++++++++++--------
 src/routes/+page.svelte | 32 ++++++++++++++++++++++++++-
 src/styles/index.scss   |  4 ++--
 yarn.lock               |  5 +++++
 5 files changed, 79 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index f68dd24..6ca91d5 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"gsap": "^3.12.5",
 		"md-block": "^0.0.1",
 		"svelte-material-icons": "^3.0.5",
 		"svelte-transition": "^0.0.10"
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 4905f7d..16fc791 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -2,19 +2,50 @@
 
 import { goto } from '$app/navigation';
 
+import { gsap } from 'gsap';
+import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';
+
+// export function smoothScrollTo(elementId: string) {
+//     const element = document.getElementById(elementId);
+//     if (element) {
+//         element.scrollIntoView({
+//             behavior: 'smooth'
+//         });
+//     }
+// }
+
 export function smoothScrollTo(elementId: string) {
+    gsap.registerPlugin(ScrollToPlugin);
     const element = document.getElementById(elementId);
-    if (element) {
-        element.scrollIntoView({
-            behavior: 'smooth'
-        });
-    }
+    if (!element) return;
+
+    // Function to disable scrolling
+    const disableScroll = (event: Event) => event.preventDefault();
+
+    // Disable scrolling through various events
+    window.addEventListener('wheel', disableScroll, { passive: false });
+    window.addEventListener('touchmove', disableScroll, { passive: false });
+    window.addEventListener('keydown', (event) => {
+        // Prevent scrolling through spacebar, arrow keys, page up/down
+        if (['Space', 'PageUp', 'PageDown', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
+            event.preventDefault();
+        }
+    }, { passive: false });
+
+    gsap.to(window, {
+        scrollTo: { y: element, autoKill: false },
+        duration: 0.1,
+        ease: "power4.out",
+        onComplete: () => {
+            // Re-enable scrolling after animation
+            window.removeEventListener('wheel', disableScroll);
+            window.removeEventListener('touchmove', disableScroll);
+            window.removeEventListener('keydown', disableScroll);
+        }
+    });
 }
 
-// export function redirectToHome() {
-//     // goto('/');
-//     smoothScrollTo('home');
-// }
+
 
 export function handleKeydown(event: KeyboardEvent) {
     // Trigger redirection on Enter key or Space bar
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 183aefd..897d966 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,39 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+	import { smoothScrollTo } from '$lib/index';
+	import { gsap } from 'gsap';
+	import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
+	import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';
 
 	import Home from '$lib/components/Home.svelte';
 	import About from '$lib/components/About.svelte';
 	import Projects from '$lib/components/Projects.svelte';
 	import Socials from '$lib/components/Socials.svelte';
+	import { goto } from '$app/navigation';
+
+	onMount(() => {
+		gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
+
+		// Assuming each section component has an id set to 'home', 'about', 'projects', 'socials'
+		const sectionIds = ['home', 'about', 'projects', 'socials'];
+
+		sectionIds.forEach((id, i) => {
+			ScrollTrigger.create({
+				trigger: `#${id}`,
+				onEnter: () => smoothScrollTo(id),
+				start: 'top bottom',
+				end: 'bottom top',
+				markers: true
+			});
+
+			ScrollTrigger.create({
+				trigger: `#${id}`,
+				start: 'bottom top',
+				onEnterBack: () => smoothScrollTo(id),
+				markers: true
+			});
+		});
+	});
 
 </script>
 
@@ -16,4 +46,4 @@
 
 <style lang="scss">
 	@import '$styles/index.scss';
-</style>
\ No newline at end of file
+</style>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 0501abb..017ad2b 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,8 +2,8 @@
 .container {
 	height: 100vh;
 	width: 100%;
-	scroll-snap-type: y mandatory;
-	overflow-y: scroll;
+	// scroll-snap-type: y mandatory;
+	// overflow-y: scroll;
 }
 
 .section {
diff --git a/yarn.lock b/yarn.lock
index 635ab42..b38a064 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -934,6 +934,11 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+gsap@^3.12.5:
+  version "3.12.5"
+  resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.12.5.tgz#136c02dad4c673b441bdb1ca00104bfcb4eae7f4"
+  integrity sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==
+
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
-- 
2.39.2


From 0fe180b33fd575d978e4fb544acb73fb48d64ac1 Mon Sep 17 00:00:00 2001
From: Sangelo <contact@sangelo.space>
Date: Tue, 12 Mar 2024 20:43:58 +0100
Subject: [PATCH 3/3] Revert "Scroll Behaviour Changes using GSAP"

This reverts commit 8e23062fa94e789475d23c5c52b8086ba1c424e3.
---
 package.json            |  1 -
 src/lib/index.ts        | 49 ++++++++---------------------------------
 src/routes/+page.svelte | 32 +--------------------------
 src/styles/index.scss   |  4 ++--
 yarn.lock               |  5 -----
 5 files changed, 12 insertions(+), 79 deletions(-)

diff --git a/package.json b/package.json
index 6ca91d5..f68dd24 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"gsap": "^3.12.5",
 		"md-block": "^0.0.1",
 		"svelte-material-icons": "^3.0.5",
 		"svelte-transition": "^0.0.10"
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 16fc791..4905f7d 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -2,50 +2,19 @@
 
 import { goto } from '$app/navigation';
 
-import { gsap } from 'gsap';
-import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';
-
-// export function smoothScrollTo(elementId: string) {
-//     const element = document.getElementById(elementId);
-//     if (element) {
-//         element.scrollIntoView({
-//             behavior: 'smooth'
-//         });
-//     }
-// }
-
 export function smoothScrollTo(elementId: string) {
-    gsap.registerPlugin(ScrollToPlugin);
     const element = document.getElementById(elementId);
-    if (!element) return;
-
-    // Function to disable scrolling
-    const disableScroll = (event: Event) => event.preventDefault();
-
-    // Disable scrolling through various events
-    window.addEventListener('wheel', disableScroll, { passive: false });
-    window.addEventListener('touchmove', disableScroll, { passive: false });
-    window.addEventListener('keydown', (event) => {
-        // Prevent scrolling through spacebar, arrow keys, page up/down
-        if (['Space', 'PageUp', 'PageDown', 'ArrowUp', 'ArrowDown'].includes(event.code)) {
-            event.preventDefault();
-        }
-    }, { passive: false });
-
-    gsap.to(window, {
-        scrollTo: { y: element, autoKill: false },
-        duration: 0.1,
-        ease: "power4.out",
-        onComplete: () => {
-            // Re-enable scrolling after animation
-            window.removeEventListener('wheel', disableScroll);
-            window.removeEventListener('touchmove', disableScroll);
-            window.removeEventListener('keydown', disableScroll);
-        }
-    });
+    if (element) {
+        element.scrollIntoView({
+            behavior: 'smooth'
+        });
+    }
 }
 
-
+// export function redirectToHome() {
+//     // goto('/');
+//     smoothScrollTo('home');
+// }
 
 export function handleKeydown(event: KeyboardEvent) {
     // Trigger redirection on Enter key or Space bar
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 897d966..183aefd 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,39 +1,9 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { smoothScrollTo } from '$lib/index';
-	import { gsap } from 'gsap';
-	import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
-	import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';
 
 	import Home from '$lib/components/Home.svelte';
 	import About from '$lib/components/About.svelte';
 	import Projects from '$lib/components/Projects.svelte';
 	import Socials from '$lib/components/Socials.svelte';
-	import { goto } from '$app/navigation';
-
-	onMount(() => {
-		gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
-
-		// Assuming each section component has an id set to 'home', 'about', 'projects', 'socials'
-		const sectionIds = ['home', 'about', 'projects', 'socials'];
-
-		sectionIds.forEach((id, i) => {
-			ScrollTrigger.create({
-				trigger: `#${id}`,
-				onEnter: () => smoothScrollTo(id),
-				start: 'top bottom',
-				end: 'bottom top',
-				markers: true
-			});
-
-			ScrollTrigger.create({
-				trigger: `#${id}`,
-				start: 'bottom top',
-				onEnterBack: () => smoothScrollTo(id),
-				markers: true
-			});
-		});
-	});
 
 </script>
 
@@ -46,4 +16,4 @@
 
 <style lang="scss">
 	@import '$styles/index.scss';
-</style>
+</style>
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 017ad2b..0501abb 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,8 +2,8 @@
 .container {
 	height: 100vh;
 	width: 100%;
-	// scroll-snap-type: y mandatory;
-	// overflow-y: scroll;
+	scroll-snap-type: y mandatory;
+	overflow-y: scroll;
 }
 
 .section {
diff --git a/yarn.lock b/yarn.lock
index b38a064..635ab42 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -934,11 +934,6 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
-gsap@^3.12.5:
-  version "3.12.5"
-  resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.12.5.tgz#136c02dad4c673b441bdb1ca00104bfcb4eae7f4"
-  integrity sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==
-
 has-flag@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
-- 
2.39.2