Updated Vite Config. Frontend: Updated base css to hide scrolling bar, fixed margin from footer, sidebar is now fixed when footer is reached.

frontend/src/lib/css/base.css

@@ -1,8 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&display=swap');
 
 html {
-    scroll-behavior: smooth;
-  }
+  overflow-x: hidden;
+}
 
 :root {
     --color-title: #071952;

frontend/src/lib/css/cv.css

@@ -75,13 +75,12 @@ h2 {
 }
 
 .end {
-    padding-bottom: 3rem;
+    padding-bottom: 5rem;
 }
 
 .footer {
     position: relative;
     display: flex;
-    margin-top: 1rem;
     height: 10rem;
     background-color: var(--color-text);
     z-index: 3;

frontend/src/routes/+page.svelte

@@ -39,18 +39,25 @@
 
 	// Sidebar sticky
 	let sidebar;
-	let sidebar_height = 0;
+	let footer;
+	let moving_position = 0;
 	$: scrollY = 0;
 	$: innerHeight = 0;
 	onMount(() => {
-		sidebar_height = sidebar.offsetHeight;
 		sidebarScrollingHandler();
 	});
 
 	function sidebarScrollingHandler() {
-		if(scrollY+innerHeight >= sidebar_height) {
+		let isBottom = (scrollY+innerHeight  >= footer.offsetTop);
+		// Testing if sidebar is outside of scrolling scope
+		if(scrollY+innerHeight >= sidebar.offsetHeight && !isBottom) {
 			sidebar.style.position = 'fixed';
-			sidebar.style.top = `-${sidebar_height-innerHeight}px`;
+			sidebar.style.top = `-${sidebar.offsetHeight-innerHeight}px`;
+			moving_position = scrollY;
+		}
+		else if(isBottom) {
+			sidebar.style.position = 'absolute';
+			sidebar.style.top = `${moving_position-(sidebar.offsetHeight-innerHeight)}px`;
 		}
 		else {
 			sidebar.style.position = 'absolute';
@@ -137,9 +144,9 @@
 			</div>
 		</div>
 	</div>
-	<div class="footer">
-		<p>Made with <SvgIcon size="20" path={mdiHeart} type="mdi"/> and Svelte</p>
-		<p>© {new Date().getFullYear()} Copyright: Yohan Boujon</p>
+	<div class="footer" bind:this={footer}>
+		<p>Made with <SvgIcon size="20" path={mdiHeart} type="mdi"/> using Svelte</p>
+		<p>All rights reserved, Yohan Boujon • {new Date().getFullYear()}</p>
 	</div>
 {:else}
 	<h1 class="h1 text-center">Oops, could not load database :/</h1>

frontend/vite.config.js

@@ -2,5 +2,9 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	server: {
+		host: '127.0.0.1',
+		port: 5125,
+	},
 });