Backend: Updated project database, Reworked Rust to add this feature. Frontend: Added pictures to project. Now uses date gathered for projects. reverse is an option for Slideshow.

backend/db/project.sql

@@ -11,6 +11,7 @@ CREATE TABLE public.project (
 	description text NULL,
 	github_link text NULL,
 	id_skills serial4 NOT NULL,
+	picture_name text NULL,
 	CONSTRAINT project_pkey PRIMARY KEY (id),
 	CONSTRAINT project_fk FOREIGN KEY (id_skills) REFERENCES public.skills(id)
 );

backend/src/db.rs

@@ -44,6 +44,7 @@ pub struct Project {
     pub description: Option<String>,
     pub github_link: Option<String>,
     pub id_skills: i64,
+    pub picture_name: Option<String>
 }
 
 #[derive(Deserialize, Serialize)]

backend/src/main.rs

@@ -72,7 +72,7 @@ async fn skills(State(pool): State<PgPool>) -> Result<Json<(Vec<Project>, Vec<Sk
     // Gathering skills
     let skills = sqlx::query_as!(
         Skills,
-        "SELECT id, programming_lang, software, languages FROM public.skills"
+        "SELECT * FROM public.skills"
     )
     .fetch_all(&pool)
     .await
@@ -81,7 +81,7 @@ async fn skills(State(pool): State<PgPool>) -> Result<Json<(Vec<Project>, Vec<Sk
     // Gathering Projects
     let projects = sqlx::query_as!(
         Project,
-        "SELECT id, date_done, title, description, github_link, id_skills FROM public.project"
+        "SELECT * FROM public.project ORDER BY date_done DESC"
     )
     .fetch_all(&pool)
     .await

frontend/src/lib/components/projects.svelte

@@ -1,15 +1,20 @@
 <script>
+    import { onMount } from "svelte";
     import SvgIcon from "@jamescoyle/svelte-icon";
     import { mdiCalendarRange, mdiPlus } from "@mdi/js";
     import "$lib/css/slide.css";
+    import { formatMonth } from "$lib/js/date.js";
 
     export let active = false;
     export let data;
 
     const title = data.title;
     const description = data.description;
-    const issued_date = "2023";
-    const picture = data.picture_url;
+    const issued_date = formatMonth(data.date_done).charAt(0).toUpperCase()+formatMonth(data.date_done).slice(1);
+    let picture;
+    onMount(async () => {
+        picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
+    });
 </script>
 
 <div class="slide-container">

frontend/src/lib/components/slideshow.svelte

@@ -14,6 +14,10 @@
     export let data = [];
     export let type;
     export let timeline = false;
+    export let reverse = false;
+    if(reverse) {
+        data = data.reverse();
+    }
 
     // Slideshow global variables
 
@@ -127,7 +131,6 @@
     }
 </script>
 
-{@debug slideContainerCount}
 <div class="slideshow" bind:this={slideshow}>
     <button class="slideshow_btn" on:click={slideCards}>
         <div>
@@ -140,7 +143,7 @@
             />
         </div>
     </button>
-    {#each data.reverse() as selected_data, index (index)}
+    {#each data as selected_data, index (index)}
         <svelte:component
             this={type}
             data={selected_data}

frontend/src/lib/css/cv.css

@@ -25,6 +25,7 @@ html {
     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);
+    z-index: 1;
 }
 
 .profile-picture-container {

frontend/src/lib/js/date.js

@@ -5,6 +5,13 @@ export function formatDate(date) {
     return formattedDate;
 }
 
+export function formatMonth(date) {
+    const options = { month: 'long', year: 'numeric' };
+    const cool_date = new Date(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);

frontend/src/routes/+page.svelte

@@ -94,12 +94,14 @@
 				data={cv.education}
 				type={Education}
 				timeline="true"
+				reverse="true"
 			/>
 			<Section icon={mdiBriefcase} title="Experience" />
 			<SlideShow
 				data={cv.experiences}
 				type={Experience}
 				timeline="true"
+				reverse="true"
 			/>
 			<Section icon={mdiWrench} title="Projects" />
 			<SlideShow