Frontend : Added some packages for icons. Created date.js, added profile picture, base css elements.

frontend/package-lock.json

@@ -7,6 +7,10 @@
     "": {
       "name": "curriculum-vitae",
       "version": "0.0.1",
+      "dependencies": {
+        "@jamescoyle/svelte-icon": "^0.1.1",
+        "@mdi/js": "^7.3.67"
+      },
       "devDependencies": {
         "@sveltejs/adapter-auto": "^2.0.0",
         "@sveltejs/kit": "^1.20.4",
@@ -389,6 +393,11 @@
         "node": ">=14"
       }
     },
+    "node_modules/@jamescoyle/svelte-icon": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@jamescoyle/svelte-icon/-/svelte-icon-0.1.1.tgz",
+      "integrity": "sha512-7zDOSm3UQ4Onk2JWI4Zp8vjfK1pA8LQDBIBHRCuKB36kk+ZQY2/oXGIneVOyPJawVjRLkKK5Xv8hY0I2iyaiNQ=="
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -437,6 +446,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mdi/js": {
+      "version": "7.3.67",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.3.67.tgz",
+      "integrity": "sha512-MnRjknFqpTC6FifhGHjZ0+QYq2bAkZFQqIj8JA2AdPZbBxUvr8QSgB2yPAJ8/ob/XkR41xlg5majDR3c1JP1hw=="
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.23",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.23.tgz",

frontend/package.json

@@ -10,9 +10,13 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.20.4",
+    "autoprefixer": "10.4.16",
     "svelte": "^4.0.5",
-    "vite": "^4.4.2",
-    "autoprefixer": "10.4.16"
+    "vite": "^4.4.2"
   },
-  "type": "module"
-}
+  "type": "module",
+  "dependencies": {
+    "@jamescoyle/svelte-icon": "^0.1.1",
+    "@mdi/js": "^7.3.67"
+  }
+}

frontend/src/app.postcss

@@ -1,4 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@tailwind variants;

frontend/src/lib/components/sidebar-component.svelte

@@ -0,0 +1,20 @@
+<script>
+    import "$lib/css/sidebar-component.css";
+    import SvgIcon from '@jamescoyle/svelte-icon'
+    import { mdiHelpCircle } from '@mdi/js';
+
+    export let icon = mdiHelpCircle;
+    export let title = "";
+    export let description = "";
+    const descriptionArray = description.split(";");
+</script>
+
+<div class="sc-container">
+    <div class="sc-icon">
+        <SvgIcon size="50" path={icon} type="mdi"/>
+    </div>
+    <h1 class="text sc-title">{title}</h1>
+    {#each descriptionArray as text}
+        <h2 class="text sc-description">{text}</h2>
+    {/each}
+</div>

frontend/src/lib/css/base.css

@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&display=swap');
+
+:root {
+    --color-title: #071952;
+    --color-subtitle: #0C356A;
+    --color-special: #0174BE;
+    --color-text: #261C2C;
+    --color-background: #F8F1F1;
+}

frontend/src/lib/css/cv.css

@@ -0,0 +1,56 @@
+body, html {
+    height: 100%;
+    background: var(--color-background);
+    margin: 0;
+    padding: 0;
+}
+
+.container-cv {
+    display: flex;
+    flex-direction: row;
+}
+
+.sidebar {
+    width: 100%;
+    height: 100%;
+    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;
+}
+
+.profile-picture-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.profile-picture {
+    width: 10rem;
+    height: auto;
+    margin: 2rem;
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
+}
+
+.main {
+    width: 100%;
+}
+
+.name {
+    text-align: center;
+    text-shadow: -15px 5px 20px #00000030;
+}
+
+h1 {
+    color: var(--color-title);
+    font-family: 'Urbanist', sans-serif;
+    font-weight: 600;
+    font-size: 4rem;
+}
+
+h2 {
+    color: var(--color-subtitle);
+    font-family: 'Urbanist', sans-serif;
+    font-weight: 500;
+    font-size: 2rem;
+}

frontend/src/lib/css/sidebar-component.css

@@ -0,0 +1,34 @@
+.sc-container {
+    width: 100%;
+    height: auto;
+    margin-top: 1rem;
+    margin-bottom: 4rem;
+}
+
+.sc-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    color: var(--color-background);
+}
+
+.text {
+    font-family: 'Gabarito', sans-serif;
+    color: var(--color-background);
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+.sc-title {
+    font-weight: 600;
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.sc-description {
+    font-weight: 500;
+    font-size: 1.5rem;
+    margin-bottom: 0.25rem;
+}

frontend/src/lib/cv.css

@@ -1,6 +0,0 @@
-body, html {
-    height: 100%;
-    background: white;
-    margin: 0;
-    padding: 0;
-}

frontend/src/lib/js/date.js

@@ -0,0 +1,6 @@
+export function formatDate(date) {
+    const options = { day: 'numeric', month: 'long', year: 'numeric' };
+    const cool_date = new Date(date);
+    const formattedDate = cool_date.toLocaleDateString('fr-FR', options);
+    return formattedDate;
+}

frontend/src/routes/+layout.svelte

@@ -1,5 +0,0 @@
-<script>
-	import '../app.postcss';
-</script>
-
-<slot />

frontend/src/routes/+page.svelte

@@ -1,14 +1,36 @@
 <script>
-	import { processData } from '$lib/processdata.js';
-	import '$lib/cv.css';
+	import { processData } from "$lib/js/processdata.js";
+	import { formatDate } from "$lib/js/date.js";
+	import "$lib/css/base.css";
+	import "$lib/css/cv.css";
+
+	// 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';
+
 	export let data;
 	let cv = processData(data);
+	let birth_year = formatDate(cv.info.birth_year);
 </script>
 
-<div class="my-4">
-	{#if data.status == 0}
-		<h1 class="h1 text-center">Le super CV de {cv.info.full_name}</h1>
-	{:else}
-		<h1 class="h1 text-center">Oops, could not load database :/</h1>
-	{/if}
-</div>
+{#if data.status == 0}
+	<div class="container-cv">
+		<div class="sidebar">
+			<div class="profile-picture-container">
+				<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}/>
+		</div>
+		<div class="main">
+			<h1 class="name">{cv.info.full_name}</h1>
+			<h2 class="name">Apprentice Engineer Automatic/Electronic</h2>
+		</div>
+	</div>
+{:else}
+	<h1 class="h1 text-center">Oops, could not load database :/</h1>
+{/if}