From da885bec57a4345ceb03458751edc53ccf667a95 Mon Sep 17 00:00:00 2001 From: Sangelo 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 @@
@@ -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} > \ 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 @@
@@ -80,6 +54,6 @@
\ 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 @@
@@ -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} > 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 @@
@@ -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} > 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 VSCodium', + 'with StackOverflow', + 'with Svelte' +]; 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 @@ 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 @@ 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 @@ 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 @@ @@ -15,5 +15,5 @@
\ 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 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 @@ @@ -16,4 +46,4 @@ \ No newline at end of file + 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 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 @@ @@ -46,4 +16,4 @@ + \ 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