From 8580d4b7acb381ea41059de9280c4e02bb472b1f Mon Sep 17 00:00:00 2001
From: Giovanni-Josserand <josserand.giovanni@gmail.com>
Date: Wed, 3 Sep 2025 21:54:12 +0200
Subject: [PATCH] redefinition of SingleProject classes

---
 src/components/SingleProject/SingleProject.css | 18 +++++++++---------
 src/components/SingleProject/SingleProject.jsx | 16 ++++++++--------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/SingleProject/SingleProject.css b/src/components/SingleProject/SingleProject.css
index ef8fd25..2f24d42 100644
--- a/src/components/SingleProject/SingleProject.css
+++ b/src/components/SingleProject/SingleProject.css
@@ -14,7 +14,7 @@
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }
 
-.single-project-left {
+.single-project-top {
     position: relative;
     flex-shrink: 0;
     width: 100%;
@@ -25,7 +25,7 @@
     height: 210px;
 }
 
-.single-project-left img {
+.single-project-top img {
     width: 100%;
     height: auto;
     display: block;
@@ -34,11 +34,11 @@
     object-fit: cover;
 }
 
-.single-project-left img.fade-out {
+.single-project-top img.fade-out {
     opacity: 0;
 }
 
-.single-project-right {
+.single-project-bottom {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -47,17 +47,17 @@
     height: 100%;
 }
 
-.single-project-right-top {
+.single-project-bottom-header {
     margin-bottom : 1em;
 }
 
-.single-project-right-top-title{
+.single-project-title-wrapper{
     display: flex;
     margin-left: 2rem;
     width: 100%;
 }
 
-.single-project-right-bottom {
+.single-project-bottom-container {
     margin-left: 2rem;
     display: flex;
     flex-direction: column;
@@ -159,12 +159,12 @@
     right: 10px;
 }
 
-.single-project-left:hover .arrow {
+.single-project-top:hover .arrow {
     display: flex;
 }
 
 
-.single-project-right-top-date{
+.single-project-years{
     color : var(--text-color);
     margin : 0;
     margin-left : 2em;
diff --git a/src/components/SingleProject/SingleProject.jsx b/src/components/SingleProject/SingleProject.jsx
index a6a08b4..697aacb 100644
--- a/src/components/SingleProject/SingleProject.jsx
+++ b/src/components/SingleProject/SingleProject.jsx
@@ -39,7 +39,7 @@ function SingleProject({ image, title, description, skills, id, nbImage, school,
 
     return (
         <div className="single-project">
-            <div className="single-project-left">
+            <div className="single-project-top">
                 <button onClick={() => handleChangeImage(-1)} className="arrow preview">{'<'}</button>
 
                 <img
@@ -51,9 +51,9 @@ function SingleProject({ image, title, description, skills, id, nbImage, school,
                 <button onClick={() => handleChangeImage(1)} className="arrow next">{'>'}</button>
             </div>
 
-            <div className="single-project-right">
-                <div className="single-project-right-top">
-                    <div className="single-project-right-top-title">
+            <div className="single-project-bottom">
+                <div className="single-project-bottom-header">
+                    <div className="single-project-title-wrapper">
                         <div className={`single-project-line color-${color[(id-1)%color.length]}`}></div>
                         <h3 className="single-project-title">
                             {title}
@@ -65,14 +65,14 @@ function SingleProject({ image, title, description, skills, id, nbImage, school,
                         </h3>
                     </div>
                     {endYear === null ? (
-                        <p className="single-project-right-top-date">{beginningYear + ' – in progress'}</p>
+                        <p className="single-project-years">{beginningYear + ' – in progress'}</p>
                     ) : beginningYear === endYear ? (
-                            <p className="single-project-right-top-date">{beginningYear}</p>
+                            <p className="single-project-years">{beginningYear}</p>
                     ) : (
-                        <p className="single-project-right-top-date">{beginningYear + ' – ' + endYear}</p>
+                        <p className="single-project-years">{beginningYear + ' – ' + endYear}</p>
                     )}
                 </div>
-                <div className="single-project-right-bottom">
+                <div className="single-project-bottom-container">
                     <p className="single-project-description" style={{ whiteSpace: "pre-line" }}>
                         {description}
                     </p>