From 664216f63c843723def9ef0a83897cb43ab0a39a Mon Sep 17 00:00:00 2001
From: Giovanni-Josserand <josserand.giovanni@gmail.com>
Date: Wed, 3 Sep 2025 21:18:39 +0200
Subject: [PATCH] add of the years in singleProjects

---
 src/components/Projects/Projects.jsx          |  5 ++++
 .../SingleProject/SingleProject.css           | 15 +++++++++-
 .../SingleProject/SingleProject.jsx           | 29 ++++++++++++-------
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects/Projects.jsx
index 133db5e..6925ff9 100644
--- a/src/components/Projects/Projects.jsx
+++ b/src/components/Projects/Projects.jsx
@@ -45,6 +45,9 @@ function Projects() {
                             skills={project.skills}
                             id={project.id}
                             nbImage={project.nb_image}
+                            school={project.school}
+                            beginningYear={project.beginning_year}
+                            endYear={project.end_year}
                         />
                     ))}
                 </div>
@@ -71,6 +74,8 @@ function Projects() {
                             id={project.id}
                             nbImage={project.nb_image}
                             school={project.school}
+                            beginningYear={project.beginning_year}
+                            endYear={project.end_year}
                         />
                     ))}
                 </div>
diff --git a/src/components/SingleProject/SingleProject.css b/src/components/SingleProject/SingleProject.css
index 21191c7..cab8522 100644
--- a/src/components/SingleProject/SingleProject.css
+++ b/src/components/SingleProject/SingleProject.css
@@ -48,6 +48,10 @@
 }
 
 .single-project-right-top {
+    margin-bottom : 1em;
+}
+
+.single-project-right-top-title{
     display: flex;
     margin-left: 2rem;
     width: 100%;
@@ -94,7 +98,7 @@
     font-size: 2rem;
     color: #EAEAEA;
     margin-top: 0;
-    margin-bottom: 1rem;
+    margin-bottom: 0;
     display: flex;
     align-items: center;
     gap: 1rem;
@@ -157,4 +161,13 @@
 
 .single-project-left:hover .arrow {
     display: flex;
+}
+
+
+.single-project-right-top-date{
+    color : #B0B0B0;
+    margin : 0;
+    margin-left : 2em;
+    font-weight: bold;
+    font-style: italic;
 }
\ No newline at end of file
diff --git a/src/components/SingleProject/SingleProject.jsx b/src/components/SingleProject/SingleProject.jsx
index c10212b..cd9d039 100644
--- a/src/components/SingleProject/SingleProject.jsx
+++ b/src/components/SingleProject/SingleProject.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import SkillCard from "../SkillCard/SkillCard.jsx";
 import "./SingleProject.css";
 
-function SingleProject({ image, title, description, skills, id, nbImage, school }) {
+function SingleProject({ image, title, description, skills, id, nbImage, school, beginningYear, endYear }) {
     const [imageID, setImageID] = useState(1);
     const [isFading, setIsFading] = useState(true);
     const intervalRef = useRef(null);
@@ -53,15 +53,24 @@ function SingleProject({ image, title, description, skills, id, nbImage, school
 
             <div className="single-project-right">
                 <div className="single-project-right-top">
-                    <div className={`single-project-line color-${color[(id-1)%color.length]}`}></div>
-                    <h3 className="single-project-title">
-                        {title}
-                        {school ? (
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="#B0B0B0" width="1.25em" height="1.25em">
-                                <path d="M80 259.8L289.2 345.9C299 349.9 309.4 352 320 352C330.6 352 341 349.9 350.8 345.9L593.2 246.1C602.2 242.4 608 233.7 608 224C608 214.3 602.2 205.6 593.2 201.9L350.8 102.1C341 98.1 330.6 96 320 96C309.4 96 299 98.1 289.2 102.1L46.8 201.9C37.8 205.6 32 214.3 32 224L32 520C32 533.3 42.7 544 56 544C69.3 544 80 533.3 80 520L80 259.8zM128 331.5L128 448C128 501 214 544 320 544C426 544 512 501 512 448L512 331.4L369.1 390.3C353.5 396.7 336.9 400 320 400C303.1 400 286.5 396.7 270.9 390.3L128 331.4z"/>
-                            </svg>
-                        ) : null}
-                    </h3>
+                    <div className="single-project-right-top-title">
+                        <div className={`single-project-line color-${color[(id-1)%color.length]}`}></div>
+                        <h3 className="single-project-title">
+                            {title}
+                            {school ? (
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="#B0B0B0" width="1.25em" height="1.25em">
+                                    <path d="M80 259.8L289.2 345.9C299 349.9 309.4 352 320 352C330.6 352 341 349.9 350.8 345.9L593.2 246.1C602.2 242.4 608 233.7 608 224C608 214.3 602.2 205.6 593.2 201.9L350.8 102.1C341 98.1 330.6 96 320 96C309.4 96 299 98.1 289.2 102.1L46.8 201.9C37.8 205.6 32 214.3 32 224L32 520C32 533.3 42.7 544 56 544C69.3 544 80 533.3 80 520L80 259.8zM128 331.5L128 448C128 501 214 544 320 544C426 544 512 501 512 448L512 331.4L369.1 390.3C353.5 396.7 336.9 400 320 400C303.1 400 286.5 396.7 270.9 390.3L128 331.4z"/>
+                                </svg>
+                            ) : null}
+                        </h3>
+                    </div>
+                    {endYear === null ? (
+                        <p className="single-project-right-top-date">{beginningYear + ' – in progress'}</p>
+                    ) : beginningYear === endYear ? (
+                            <p className="single-project-right-top-date">{beginningYear}</p>
+                    ) : (
+                        <p className="single-project-right-top-date">{beginningYear + ' – ' + endYear}</p>
+                    )}
                 </div>
                 <div className="single-project-right-bottom">
                     <p className="single-project-description" style={{ whiteSpace: "pre-line" }}>