FrontEnd: Added Timeline below the slideshow.

frontend/src/lib/components/education.svelte

@@ -2,6 +2,7 @@
     import SvgIcon from "@jamescoyle/svelte-icon";
     import { mdiMapMarker, mdiCog } from "@mdi/js";
     import "$lib/css/education.css";
+    import { formatYear } from "$lib/js/date.js"
 
     export let active = false;
     export let data;
@@ -11,8 +12,11 @@
     const speciality = data.speciality;
     const option = data.school_options;
     const picture = data.picture_url;
+    const end_year = data.end_year === null ? '' : formatYear(data.end_year);
+    const start_year = data.start_year === null ? '' : (data.end_year === null ? formatYear(data.start_year) : '-'+formatYear(data.start_year));
 </script>
 
+<div class="education-container">
     <div class="education-main {active ? '' : 'education-unactive'}">
         <div class="education-img-container">
             <img class="education-img" src={picture} alt="Education" />
@@ -22,7 +26,9 @@
             {#if location}
                 <div class="education-subtitle-container">
                     <SvgIcon size="35" path={mdiMapMarker} type="mdi" />
-                <p class="education-subtitle education-aftericon">{location}</p>
+                    <p class="education-subtitle education-aftericon">
+                        {location}
+                    </p>
                 </div>
             {/if}
             {#if speciality}
@@ -38,3 +44,8 @@
             {/if}
         </div>
     </div>
+    <div class="education-time">
+        <div class="education-bubble" />
+        <h2 class="education-date">{`${end_year}${start_year}`}</h2>
+    </div>
+</div>

frontend/src/lib/components/slideshow.svelte

@@ -1,37 +1,74 @@
 <script>
     import SvgIcon from "@jamescoyle/svelte-icon";
     import { mdiArrowRight, mdiChevronLeft } from "@mdi/js";
-    import "$lib/css/slideshow.css"
+    import "$lib/css/slideshow.css";
+    import { onMount } from "svelte";
+    import { createTimeLine } from "$lib/js/timeline.js";
 
+    // Exported values
     export let data = [];
     export let type;
 
+    // Slideshow global variables
     let slideshow_index = 0;
     let slideshow_hidden = [];
+
+    // Timeline global variables
+    let slideshow;
+    let bubbles = [];
+    onMount(() => {
+        for (const element of document.getElementsByClassName(
+            "education-bubble"
+        )) {
+            bubbles.push({
+                left: element.offsetLeft,
+                top: element.offsetTop,
+            });
+        }
+        for (const div of createTimeLine(bubbles)) {
+            slideshow.appendChild(div);
+        }
+    });
+
     function slideEducation() {
-        const slideshowElements = document.querySelectorAll(".education-main");
+        const slideshowElements = document.querySelectorAll(
+            ".education-container"
+        );
+        const slideshowTimeline =
+            document.querySelectorAll(".education-string");
+
         if (slideshow_index >= data.length - 1) {
             slideshow_hidden = [];
             slideshow_index = 0;
+            for(const timeline of slideshowTimeline) {
+                timeline.style.backgroundColor = '';
+            }
         } else {
             slideshow_hidden.push(slideshow_index);
             slideshow_index++;
         }
         let transformValue = 0;
         for (const id of slideshow_hidden) {
-                transformValue += (slideshowElements[id].clientWidth+(5*16));
+            transformValue += slideshowElements[id].clientWidth;
         }
         slideshowElements.forEach((element, id) => {
             let newtransformValue = transformValue;
             if (slideshow_hidden.includes(id)) {
+                // 1.1 because when in 'unactive' state, the scale is 0.9, adjusting the actual ratio
                 newtransformValue *= 1.1;
             }
             element.style.transform = `translateX(-${newtransformValue}px)`;
+            if(slideshowTimeline[id] != undefined) {
+                slideshowTimeline[id].style.transform = `translateX(-${transformValue}px)`;
+                if (slideshow_hidden.includes(id)) {
+                    slideshowTimeline[id].style.backgroundColor = 'var(--color-background)';
+                }
+            }
         });
     }
 </script>
 
-<div class="slideshow">
+<div class="slideshow" bind:this={slideshow}>
     <button class="slideshow_btn" on:click={slideEducation}>
         <div>
             <SvgIcon

frontend/src/lib/css/education.css

@@ -1,3 +1,9 @@
+.education-container {
+    display: flex;
+    flex-direction: column;
+    transition: all .3s ease 0s;
+}
+
 .education-main {
     display: flex;
     border-radius: 0.4rem;
@@ -55,5 +61,42 @@
 
 .education-unactive {
     scale: 0.9;
+    margin-left: 2.25rem !important;
+    margin-right: 2.25rem !important;
     box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
 }
+
+.education-time {
+    margin-top: 3rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.education-bubble {
+    z-index: 2;
+    width: 5rem;
+    height: 5rem;
+    background-color: var(--color-special);
+    box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
+    border-radius: 50%;
+    transition: all .3s ease 0s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.education-date {
+    color: var(--color-special);
+    font-weight: 700;
+}
+
+.education-string {
+    z-index: -1;
+    position: absolute;
+    height: 3rem;
+    background-color: var(--color-special);
+    opacity: 0.5;
+    transition: all .3s ease 0s;
+}

frontend/src/lib/js/date.js

@@ -4,3 +4,10 @@ export function formatDate(date) {
     const formattedDate = cool_date.toLocaleDateString('fr-FR', options);
     return formattedDate;
 }
+
+export function formatYear(date) {
+    const options = { year: 'numeric' };
+    const cool_date = new Date(date);
+    const formattedDate = cool_date.toLocaleDateString('fr-FR', options);
+    return formattedDate;
+}

frontend/src/lib/js/processdata.js

@@ -1,9 +1,16 @@
-// processdata.js
+function arrangeById(array) {
+  let newArray = new Array(array.length);
+  for (const value of array) {
+    newArray[value.id-1] = value;
+  }
+  return newArray;
+}
+
 export function processData(data) {
   if (data.status === 0) {
     const info = data.info[0];
     const experiences = data.experience;
-      const education = data.education;
+    const education = arrangeById(data.education);
     const skills = data.skills[1];
     const projects = data.skills[0];
 
@@ -12,4 +19,3 @@ export function processData(data) {
     return null;  // Indicates an error
   }
 }
-  

frontend/src/lib/js/timeline.js

@@ -0,0 +1,18 @@
+export function createTimeLine(positionsArray) {
+    let divArray = []
+    console.log(positionsArray);
+    for(let i=0; i<positionsArray.length-1; i++)
+    {
+        var newDiv = document.createElement('div');
+        newDiv.className = 'education-string';
+        const left = positionsArray[i].left + (2.5*16);
+        newDiv.style.left = `${left}px`;
+        const top = positionsArray[i].top + 16;
+        newDiv.style.top = `${top}px`;
+        const width = ((positionsArray[i+1].left)-(positionsArray[i].left));
+        console.log(width);
+        newDiv.style.width = `${width}px`;
+        divArray.push(newDiv);
+    }
+    return divArray;
+}