add of mobile images, change style and update README.md

src/styles/Projects.css

@@ -26,4 +26,8 @@
     color: #1E1E1E;
     transform: translateY(-3px);
     cursor: pointer;
+}
+
+.projects-section-list {
+    display: flex;
 }

src/styles/SingleProject.css

@@ -1,11 +1,12 @@
 .single-project {
     display: flex;
-    width: 80%;
+    flex-direction: column;
+    width: 29%;
     margin: 2rem auto;
-    background-color: #1E1E1E;
     overflow: hidden;
     transition: all 0.3s ease-in-out;
     border-radius: 12px;
+    background-color: #1E1E1E;
 }
 
 .single-project:hover {
@@ -14,15 +15,25 @@
 }
 
 .single-project-left {
+    position: relative;
     flex-shrink: 0;
-    width: 55%;
+    width: 100%; /* largeur fixe de la left */
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .single-project-left img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+    width: 100%; /* occupe toute la largeur du conteneur */
+    height: auto; /* hauteur ajustée automatiquement pour garder l’intégralité */
     display: block;
+    transition: opacity 0.3s ease-in-out;
+    opacity: 1;
+    object-fit: contain; /* force l’image à remplir le conteneur (déformation possible) */
+}
+
+.single-project-left img.fade-out {
+    opacity: 0;
 }
 
 .single-project-right {
@@ -31,6 +42,41 @@
     justify-content: space-between;
     padding: 2rem 2rem 2rem 0rem;
     align-items: flex-start;
+    height: 100%;
+}
+
+.single-project-right-top {
+    display: flex;
+    margin-left: 2rem;
+}
+
+.single-project-right-bottom {
+    margin-left: 2rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.single-project-line {
+    border-radius: 38px;
+    min-width: 1.5rem;
+    height: 0.25rem;
+    margin-top: 1.5rem;
+    margin-right: 1rem;
+}
+
+.color-orange {
+    background-color: #D95F46;
+}
+
+.color-purple {
+    background-color: #a646d9;
+}
+
+.color-green {
+    background-color: #36a837;
 }
 
 .single-project-title {
@@ -55,11 +101,11 @@
     gap: 8px;
 }
 
-
 .single-project-link {
     color: #B0B0B0;
     text-decoration: none;
     font-weight: 600;
+    margin-bottom : 0;
 }
 
 .single-project-link:hover {
@@ -67,26 +113,35 @@
     color: #EAEAEA;
 }
 
-
-
-.single-project-middle {
-    padding: 2rem 0.5rem;
+.arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #EAEAEA;
+    font-size: 35px;
+    display: none;
+    transition: all 0.3s ease;
+    text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
 }
 
-.single-project-line {
-    border-radius: 38px;
-    min-width: 1.5rem;
-    height: 0.25rem;
-    margin-top: 1.5rem;
-    margin-left: 2rem;
+.arrow:hover {
+    color: #D95F46;
+    opacity: 0.8;
+    transform: translateY(-50%) scale(1.2);
+    cursor: pointer;
 }
 
-.color-orange{
-    background-color: #D95F46;
+.arrow.preview {
+    left: 10px;
 }
-.color-purple{
-    background-color: #a646d9;
+
+.arrow.next {
+    right: 10px;
+}
+
+/* Affichage des flèches au survol de la zone image */
+.single-project-left:hover .arrow {
+    display: flex;
 }
-.color-green{
-    background-color: #36a837;
-}