From 6f5e264b49dde5a3b3e9d13d3f391eac8143dfe4 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Tue, 14 Nov 2023 22:29:08 +0100
Subject: [PATCH] Created Slideshow component (will be reused for skills and
 experience).  Updated CSS. Updated Transition between each 'slide'.

---
 frontend/src/lib/components/education.svelte  |  3 +-
 frontend/src/lib/components/section.svelte    |  2 +-
 .../lib/components/sidebar-component.svelte   |  2 +-
 frontend/src/lib/components/slideshow.svelte  | 51 +++++++++++++++++++
 frontend/src/lib/css/cv.css                   | 32 ++----------
 frontend/src/lib/css/education.css            |  8 +--
 frontend/src/lib/css/section.css              |  1 +
 frontend/src/lib/css/sidebar-component.css    |  4 +-
 frontend/src/lib/css/slideshow.css            | 23 +++++++++
 frontend/src/routes/+page.svelte              | 38 ++------------
 10 files changed, 92 insertions(+), 72 deletions(-)
 create mode 100644 frontend/src/lib/components/slideshow.svelte
 create mode 100644 frontend/src/lib/css/slideshow.css

diff --git a/frontend/src/lib/components/education.svelte b/frontend/src/lib/components/education.svelte
index 194cbc1..f29c862 100644
--- a/frontend/src/lib/components/education.svelte
+++ b/frontend/src/lib/components/education.svelte
@@ -1,3 +1,4 @@
+
 <script>
     import "$lib/css/education.css";
 
@@ -19,4 +20,4 @@
         <p class="education-subtitle">{location}</p>
         <p class="education-subtitle">{option}</p>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/lib/components/section.svelte b/frontend/src/lib/components/section.svelte
index f6f330c..3e22f59 100644
--- a/frontend/src/lib/components/section.svelte
+++ b/frontend/src/lib/components/section.svelte
@@ -8,6 +8,6 @@
 </script>
 
 <div class="section-container">
-    <SvgIcon size="75" path={icon} type="mdi" />
+    <SvgIcon size="60" path={icon} type="mdi" />
     <h1 class="section-h1">{title}</h1>
 </div>
diff --git a/frontend/src/lib/components/sidebar-component.svelte b/frontend/src/lib/components/sidebar-component.svelte
index 91f48ca..407ce11 100644
--- a/frontend/src/lib/components/sidebar-component.svelte
+++ b/frontend/src/lib/components/sidebar-component.svelte
@@ -11,7 +11,7 @@
 
 <div class="sc-container">
     <div class="sc-icon">
-        <SvgIcon size="50" path={icon} type="mdi"/>
+        <SvgIcon size="45" path={icon} type="mdi"/>
     </div>
     <h1 class="text sc-title">{title}</h1>
     {#each descriptionArray as text}
diff --git a/frontend/src/lib/components/slideshow.svelte b/frontend/src/lib/components/slideshow.svelte
new file mode 100644
index 0000000..5eb6c43
--- /dev/null
+++ b/frontend/src/lib/components/slideshow.svelte
@@ -0,0 +1,51 @@
+<script>
+    import SvgIcon from "@jamescoyle/svelte-icon";
+    import { mdiArrowRight, mdiChevronLeft } from "@mdi/js";
+    import "$lib/css/slideshow.css"
+
+    export let data = [];
+    export let type;
+
+    let slideshow_index = 0;
+    let slideshow_hidden = [];
+    function slideEducation() {
+        const slideshowElements = document.querySelectorAll(".education-main");
+        if (slideshow_index >= data.length - 1) {
+            slideshow_hidden = [];
+            slideshow_index = 0;
+        } else {
+            slideshow_hidden.push(slideshow_index);
+            slideshow_index++;
+        }
+        let transformValue;
+        slideshowElements.forEach((element, id) => {
+            if (slideshow_hidden.includes(id)) {
+                transformValue = slideshow_index * 60;
+            } else {
+                transformValue = slideshow_index * 47.7;
+            }
+            element.style.transform = `translateX(-${transformValue}rem)`;
+        });
+    }
+</script>
+
+<div class="slideshow">
+    <button class="slideshow_btn" on:click={slideEducation}>
+        <div>
+            <SvgIcon
+                size="45"
+                path={slideshow_index >= data.length - 1
+                    ? mdiChevronLeft
+                    : mdiArrowRight}
+                type="mdi"
+            />
+        </div>
+    </button>
+    {#each data.reverse() as selected_data, index (index)}
+        <svelte:component
+            this={type}
+            data={selected_data}
+            active={index == slideshow_index ? true : false}
+        />
+    {/each}
+</div>
diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css
index 88eedad..58a685e 100644
--- a/frontend/src/lib/css/cv.css
+++ b/frontend/src/lib/css/cv.css
@@ -14,7 +14,7 @@ html {
 .sidebar {
     width: 100%;
     height: 100%;
-    flex-basis: 25rem;
+    flex-basis: 20rem;
     background-color: var(--color-special);
     box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
     z-index: 2;
@@ -27,7 +27,7 @@ html {
 }
 
 .profile-picture {
-    width: 10rem;
+    width: 9rem;
     height: auto;
     margin: 2rem;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
@@ -49,36 +49,12 @@ h1 {
     color: var(--color-title);
     font-family: 'Urbanist', sans-serif;
     font-weight: 600;
-    font-size: 4rem;
+    font-size: 3rem;
 }
 
 h2 {
     color: var(--color-subtitle);
     font-family: 'Urbanist', sans-serif;
     font-weight: 500;
-    font-size: 2rem;
-}
-
-.education {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.education_btn {
-    z-index: 5;
-    position: absolute;
-    right: 0;
-    margin-right: 2.5rem;
-    min-width: 8rem;
-    min-height: 8rem;
-    background-color: var(--color-special);
-    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--color-background);
-    border: 0;
-    transition: all .3s ease 0s;
+    font-size: 1.5rem;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/css/education.css b/frontend/src/lib/css/education.css
index 5789140..fd42cc6 100644
--- a/frontend/src/lib/css/education.css
+++ b/frontend/src/lib/css/education.css
@@ -3,7 +3,7 @@
     border-radius: 0.4rem;
     box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
     background-color: var(--color-background);
-    height: 20rem;
+    height: 18rem;
     margin-left: 2.5rem;
     margin-right: 2.5rem;
     z-index: 1;
@@ -18,12 +18,12 @@
 }
 
 .education-img {
-    max-height: 15rem;
+    max-height: 12.5rem;
 }
 
 .education-text-container {
     margin: 1.5rem;
-    width: 20rem;
+    width: 18rem;
 }
 
 .education-title {
@@ -41,6 +41,6 @@
 }
 
 .education-unactive {
-    transform: scale(0.9);
+    scale: 0.9;
     box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5) !important;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/css/section.css b/frontend/src/lib/css/section.css
index da723b2..3846ef0 100644
--- a/frontend/src/lib/css/section.css
+++ b/frontend/src/lib/css/section.css
@@ -10,4 +10,5 @@
 
 .section-h1 {
     margin-left: 2rem;
+    font-size: 2.5rem;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/css/sidebar-component.css b/frontend/src/lib/css/sidebar-component.css
index 5edc3d8..452a884 100644
--- a/frontend/src/lib/css/sidebar-component.css
+++ b/frontend/src/lib/css/sidebar-component.css
@@ -24,12 +24,12 @@
 
 .sc-title {
     font-weight: 600;
-    font-size: 2.5rem;
+    font-size: 2rem;
     margin-bottom: 0.5rem;
 }
 
 .sc-description {
     font-weight: 500;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     margin-bottom: 0.25rem;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/css/slideshow.css b/frontend/src/lib/css/slideshow.css
new file mode 100644
index 0000000..3b12648
--- /dev/null
+++ b/frontend/src/lib/css/slideshow.css
@@ -0,0 +1,23 @@
+.slideshow {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.slideshow_btn {
+    z-index: 5;
+    position: absolute;
+    right: 0;
+    margin-right: 2.5rem;
+    min-width: 5rem;
+    min-height: 5rem;
+    background-color: var(--color-special);
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--color-background);
+    border: 0;
+    transition: all .3s ease 0s;
+}
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index ef0f1a8..6d9e703 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -3,7 +3,6 @@
 	import { formatDate } from "$lib/js/date.js";
 	import "$lib/css/base.css";
 	import "$lib/css/cv.css";
-	import SvgIcon from "@jamescoyle/svelte-icon";
 
 	// Sidebar
 	import profile_pic from "$lib/img/cvnQU1-W_nowhite_carre.jpg";
@@ -19,26 +18,13 @@
 	// Main
 	import Section from "$lib/components/section.svelte";
 	import Education from "$lib/components/education.svelte";
-	import { mdiSchool, mdiArrowRight, mdiChevronLeft } from "@mdi/js";
+	import SlideShow from "$lib/components/slideshow.svelte";
+	import { mdiSchool } from "@mdi/js";
 
 	export let data;
 	const cv = data.status == 0 ? processData(data) : undefined;
 	const birth_year =
 		data.status == 0 ? formatDate(cv.info.birth_year) : undefined;
-	let education_index = 0;
-
-	function slideEducation() {
-		const educationElements = document.querySelectorAll(".education-main");
-		if (education_index >= cv.education.length - 1) {
-			education_index = 0;
-		} else {
-			education_index++;
-		}
-		const transformValue = `translateX(-${education_index * 53}rem)`;
-		educationElements.forEach((element) => {
-			element.style.transform = transformValue;
-		});
-	}
 </script>
 
 {#if data.status == 0}
@@ -77,25 +63,7 @@
 			<h1 class="name">{cv.info.full_name}</h1>
 			<h2 class="name">Apprentice Engineer Automatic/Electronic</h2>
 			<Section icon={mdiSchool} title="Education" />
-			<div class="education">
-				<button class="education_btn" on:click={slideEducation}>
-					<div class="education_btn_icon">
-						<SvgIcon
-							size="75"
-							path={education_index >= cv.education.length - 1
-								? mdiChevronLeft
-								: mdiArrowRight}
-							type="mdi"
-						/>
-					</div>
-				</button>
-				{#each cv.education.reverse() as ed_data, index (index)}
-					<Education
-						data={ed_data}
-						active={index == education_index ? true : false}
-					/>
-				{/each}
-			</div>
+			<SlideShow data={cv.education} type={Education} />
 		</div>
 	</div>
 {:else}