Frontend: Fixing major issues with the sidebar when on large screens. Optimised the code to use less scrollY.

frontend/src/lib/css/cv.css

@@ -9,14 +9,12 @@
     .sidebar {
         position: absolute;
         width: 15rem;
-        height: 75rem;
-        background-color: var(--color-special);
         transition: all 0s ease 0s;
+        margin-left: 1rem;
     }
 
     .fake-sidebar {
-        width: 100%;
+        width: 20rem;
-        flex-basis: 20rem;
         box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
         background-color: var(--color-special);
     }

frontend/src/routes/+page.svelte

@@ -16,7 +16,7 @@
     mdiXml,
     mdiApplication,
     mdiEarth,
-		mdiHeart
+    mdiHeart,
   } from "@mdi/js";
 
   // Main
@@ -24,11 +24,11 @@
   import SubSection from "$lib/components/subsection.svelte";
   import Education from "$lib/components/education.svelte";
   import Experience from "$lib/components/experience.svelte";
-	import Projects from "$lib/components/projects.svelte"
+  import Projects from "$lib/components/projects.svelte";
   import SlideShow from "$lib/components/slideshow.svelte";
-	import Pill from "$lib/components/pill.svelte"
+  import Pill from "$lib/components/pill.svelte";
-	import FlagComponent from "$lib/components/flag-component.svelte"
+  import FlagComponent from "$lib/components/flag-component.svelte";
-	import ProjectsPopup from "$lib/components/projects-popup.svelte"
+  import ProjectsPopup from "$lib/components/projects-popup.svelte";
   import { mdiSchool, mdiBriefcase, mdiWrench, mdiPencil } from "@mdi/js";
   import { onMount } from "svelte";
 
@@ -39,8 +39,8 @@
 
   // Sidebar sticky
   let sidebar;
+  let containerCv;
   let footer;
-	let moving_position = 0;
   $: scrollY = 0;
   $: innerHeight = 0;
   onMount(() => {
@@ -48,20 +48,30 @@
   });
 
   function sidebarScrollingHandler() {
-		let isBottom = (scrollY+innerHeight  >= footer.offsetTop);
+    let isBottom = scrollY + innerHeight >= footer.offsetTop;
+    let isMoved = scrollY + innerHeight >= sidebar.offsetHeight;
+    let littleScreen = innerHeight < sidebar.offsetHeight;
+    console.log(littleScreen);
+    // Only having the sticky sidebar if the size of the screen is too 'little'
+
     // Testing if sidebar is outside of scrolling scope
-		if(scrollY+innerHeight >= sidebar.offsetHeight && !isBottom) {
+    if (isMoved && !isBottom) {
-			sidebar.style.position = 'fixed';
+      sidebar.style.position = "fixed";
-			sidebar.style.top = `-${sidebar.offsetHeight-innerHeight}px`;
+      sidebar.style.top = littleScreen
-			moving_position = scrollY;
+        ? `${innerHeight - sidebar.offsetHeight}px`
+        : "0px";
     }
-		else if(isBottom) {
+    // Checking if at the bottom, calculating the diff. between the cv and the sidebar heights
-			sidebar.style.position = 'absolute';
+    else if (isBottom && littleScreen) {
-			sidebar.style.top = `${moving_position-(sidebar.offsetHeight-innerHeight)}px`;
+      sidebar.style.position = "absolute";
+      sidebar.style.top = `${
+        containerCv.offsetHeight - sidebar.offsetHeight
+      }px`;
     }
-		else {
+	// Only putting absolute if on little screen 
-			sidebar.style.position = 'absolute';
+	else if (littleScreen) {
-			sidebar.style.top = '';
+      sidebar.style.position = "absolute";
+      sidebar.style.top = "";
     }
   }
 
@@ -72,11 +82,17 @@
   }
 </script>
 
-<svelte:window bind:scrollY bind:innerHeight bind:innerWidth on:scroll={sidebarScrollingHandler} on:resize={mobileCheck} />
+<svelte:window
+  bind:scrollY
+  bind:innerHeight
+  bind:innerWidth
+  on:scroll={sidebarScrollingHandler}
+  on:resize={mobileCheck}
+/>
 
 {#if data.status == 0}
   <ProjectsPopup tags={cv.tags} />
-	<div class="container-cv">
+  <div class="container-cv" bind:this={containerCv}>
     <!-- SIDEBAR DIV (LEFT) -->
     <div class="sidebar" bind:this={sidebar}>
       <div class="profile-picture-container">
@@ -87,15 +103,9 @@
         />
       </div>
       <SidebarComponent icon={mdiAccount} description={birth_year} />
-			<SidebarComponent
+      <SidebarComponent icon={mdiEmailOutline} description={cv.info.email} />
-				icon={mdiEmailOutline}
-				description={cv.info.email}
-			/>
       {#if cv.info.phone_number != null}
-			<SidebarComponent
+        <SidebarComponent icon={mdiPhone} description={cv.info.phone_number} />
-				icon={mdiPhone}
-				description={cv.info.phone_number}
-			/>
       {/if}
       <SidebarComponent
         icon={mdiStar}
@@ -128,33 +138,50 @@
         reverse="true"
       />
       <Section icon={mdiWrench} title="Projects" />
-			<SlideShow
+      <SlideShow data={cv.skills.project} type={Projects} />
-				data={cv.skills.project}
-				type={Projects}
-			/>
       <Section icon={mdiPencil} title="Skills" />
-			<SubSection icon={mdiXml} title="Programming Languages"/>
+      <SubSection icon={mdiXml} title="Programming Languages" />
       <div class="subsection">
         {#each cv.skills.programming_languages as pilldata, index (index)}
-					<Pill name={pilldata.lang} type_icon={pilldata.type_icon} icon={pilldata.icon} color={pilldata.color} show_tooltip={true} tooltip_data={cv.project_programming[index]}/>
+          <Pill
+            name={pilldata.lang}
+            type_icon={pilldata.type_icon}
+            icon={pilldata.icon}
+            color={pilldata.color}
+            show_tooltip={true}
+            tooltip_data={cv.project_programming[index]}
+          />
         {/each}
       </div>
-			<SubSection icon={mdiApplication} title="Software"/>
+      <SubSection icon={mdiApplication} title="Software" />
       <div class="subsection">
         {#each cv.skills.softwares as pilldata, index (index)}
-					<Pill name={pilldata.software} type_icon={pilldata.type_icon} icon={pilldata.icon} color={pilldata.color} show_tooltip={true} tooltip_data={cv.project_software[index]}/>
+          <Pill
+            name={pilldata.software}
+            type_icon={pilldata.type_icon}
+            icon={pilldata.icon}
+            color={pilldata.color}
+            show_tooltip={true}
+            tooltip_data={cv.project_software[index]}
+          />
         {/each}
       </div>
-			<SubSection icon={mdiEarth} title="Languages"/>
+      <SubSection icon={mdiEarth} title="Languages" />
       <div class="subsection flag-container end">
         {#each cv.skills.languages as langdata}
-					<FlagComponent lang={langdata.lang} level={langdata.level} icon={langdata.icon_alpha}/>
+          <FlagComponent
+            lang={langdata.lang}
+            level={langdata.level}
+            icon={langdata.icon_alpha}
+          />
         {/each}
       </div>
     </div>
   </div>
   <div class="footer" bind:this={footer}>
-		<p>Made with <SvgIcon size="20" path={mdiHeart} type="mdi"/> using Svelte</p>
+    <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}