From aa7ee55e62023651b06ab697fce28b928ba479b0 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Mon, 13 Nov 2023 22:54:10 +0100
Subject: [PATCH] Education: Added education component, added section
 component, added css linked to these components. Modified +page.

---
 frontend/src/lib/components/education.svelte | 22 ++++++
 frontend/src/lib/components/section.svelte   | 13 +++
 frontend/src/lib/css/base.css                |  4 +
 frontend/src/lib/css/cv.css                  | 32 +++++++-
 frontend/src/lib/css/education.css           | 46 +++++++++++
 frontend/src/lib/css/section.css             | 13 +++
 frontend/src/routes/+page.svelte             | 83 ++++++++++++++++++--
 7 files changed, 203 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/lib/components/education.svelte
 create mode 100644 frontend/src/lib/components/section.svelte
 create mode 100644 frontend/src/lib/css/education.css
 create mode 100644 frontend/src/lib/css/section.css

diff --git a/frontend/src/lib/components/education.svelte b/frontend/src/lib/components/education.svelte
new file mode 100644
index 0000000..194cbc1
--- /dev/null
+++ b/frontend/src/lib/components/education.svelte
@@ -0,0 +1,22 @@
+<script>
+    import "$lib/css/education.css";
+
+    export let active = false;
+    export let data;
+    export let picture = "https://bib.insa-toulouse.fr/_resource/info_pratiques/INSA-Venir-Bib-photo-8_0.jpg";
+
+    const title = data.school;
+    const location = data.school_location;
+    const option = data.school_options;
+</script>
+
+<div class="education-main {active ? '' : 'education-unactive'}">
+    <div class="education-img-container">
+        <img class="education-img" src={picture} alt="Education"/>
+    </div>
+    <div class="education-text-container">
+        <h1 class="education-title">{title}</h1>
+        <p class="education-subtitle">{location}</p>
+        <p class="education-subtitle">{option}</p>
+    </div>
+</div>
diff --git a/frontend/src/lib/components/section.svelte b/frontend/src/lib/components/section.svelte
new file mode 100644
index 0000000..f6f330c
--- /dev/null
+++ b/frontend/src/lib/components/section.svelte
@@ -0,0 +1,13 @@
+<script>
+    import "$lib/css/section.css";
+    import SvgIcon from "@jamescoyle/svelte-icon";
+    import { mdiHelpCircle } from "@mdi/js";
+
+    export let title = "Title";
+    export let icon = mdiHelpCircle;
+</script>
+
+<div class="section-container">
+    <SvgIcon size="75" path={icon} type="mdi" />
+    <h1 class="section-h1">{title}</h1>
+</div>
diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css
index 5ab5fe2..c2bd374 100644
--- a/frontend/src/lib/css/base.css
+++ b/frontend/src/lib/css/base.css
@@ -1,5 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&display=swap');
 
+html {
+    scroll-behavior: smooth;
+  }
+
 :root {
     --color-title: #071952;
     --color-subtitle: #0C356A;
diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css
index 871fed0..88eedad 100644
--- a/frontend/src/lib/css/cv.css
+++ b/frontend/src/lib/css/cv.css
@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
     height: 100%;
     background: var(--color-background);
     margin: 0;
@@ -16,7 +17,7 @@ body, html {
     flex-basis: 25rem;
     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;
-    margin-right: 2rem;
+    z-index: 2;
 }
 
 .profile-picture-container {
@@ -34,6 +35,9 @@ body, html {
 
 .main {
     width: 100%;
+    overflow-x: hidden;
+    z-index: 0;
+    padding-right: 2rem;
 }
 
 .name {
@@ -53,4 +57,28 @@ h2 {
     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;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/css/education.css b/frontend/src/lib/css/education.css
new file mode 100644
index 0000000..5789140
--- /dev/null
+++ b/frontend/src/lib/css/education.css
@@ -0,0 +1,46 @@
+.education-main {
+    display: flex;
+    border-radius: 0.4rem;
+    box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
+    background-color: var(--color-background);
+    height: 20rem;
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+    z-index: 1;
+    transition: all .3s ease 0s;
+}
+
+.education-img-container{
+    display: flex;
+    margin: 1.5rem;
+    justify-content: center;
+    align-items: center;
+}
+
+.education-img {
+    max-height: 15rem;
+}
+
+.education-text-container {
+    margin: 1.5rem;
+    width: 20rem;
+}
+
+.education-title {
+    color: var(--color-text);
+    font-family: 'Gabarito', sans-serif;
+    font-weight: 600;
+    font-size: 2rem;
+}
+
+.education-subtitle {
+    color: var(--color-text);
+    font-family: 'Gabarito', sans-serif;
+    font-weight: 500;
+    font-size: 1.5rem;
+}
+
+.education-unactive {
+    transform: 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
new file mode 100644
index 0000000..da723b2
--- /dev/null
+++ b/frontend/src/lib/css/section.css
@@ -0,0 +1,13 @@
+.section-container {
+    margin-top: 3rem;
+    margin-left: 3rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--color-title);
+    filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.15));
+}
+
+.section-h1 {
+    margin-left: 2rem;
+}
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 9b6679f..ef0f1a8 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -3,32 +3,99 @@
 	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";
 	import SidebarComponent from "$lib/components/sidebar-component.svelte";
-	import { mdiAccount, mdiCogs, mdiEmailOutline, mdiLocationEnter, mdiMapMarker, mdiPhone, mdiStar } from '@mdi/js';
+	import {
+		mdiAccount,
+		mdiCogs,
+		mdiEmailOutline,
+		mdiPhone,
+		mdiStar,
+	} from "@mdi/js";
+
+	// Main
+	import Section from "$lib/components/section.svelte";
+	import Education from "$lib/components/education.svelte";
+	import { mdiSchool, mdiArrowRight, mdiChevronLeft } 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;
+	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}
 	<div class="container-cv">
+		<!-- SIDEBAR DIV (LEFT) -->
 		<div class="sidebar">
 			<div class="profile-picture-container">
-				<img class="profile-picture" src={profile_pic} alt="{cv.info.full_name}"/>
+				<img
+					class="profile-picture"
+					src={profile_pic}
+					alt={cv.info.full_name}
+				/>
 			</div>
-			<SidebarComponent icon={mdiAccount} description={birth_year}/>
-			<SidebarComponent icon={mdiEmailOutline} description={cv.info.email}/>
-			<SidebarComponent icon={mdiPhone} description={cv.info.phone_number}/>
-			<SidebarComponent icon={mdiStar} title="Interests" description={cv.info.interests}/>
-			<SidebarComponent icon={mdiCogs} title="Soft-Skills" description={cv.info.softskills}/>
+			<SidebarComponent icon={mdiAccount} description={birth_year} />
+			<SidebarComponent
+				icon={mdiEmailOutline}
+				description={cv.info.email}
+			/>
+			<SidebarComponent
+				icon={mdiPhone}
+				description={cv.info.phone_number}
+			/>
+			<SidebarComponent
+				icon={mdiStar}
+				title="Interests"
+				description={cv.info.interests}
+			/>
+			<SidebarComponent
+				icon={mdiCogs}
+				title="Soft-Skills"
+				description={cv.info.softskills}
+			/>
 		</div>
+		<!-- MAIN DIV (RIGHT) -->
 		<div class="main">
 			<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>
 		</div>
 	</div>
 {:else}