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>

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;
@@ -158,3 +162,12 @@
 .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;
+}

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,6 +53,7 @@ function SingleProject({ image, title, description, skills, id, nbImage, school
 
             <div className="single-project-right">
                 <div className="single-project-right-top">
+                    <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}
@@ -63,6 +64,14 @@ function SingleProject({ image, title, description, skills, id, nbImage, school
                             ) : 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" }}>
                         {description}