Merge pull request 'dev' (#35) from dev into main

Reviewed-on: #35

src/components/Experiences/Experiences.css

@@ -7,7 +7,7 @@
 }
 
 .experiences-container {
-    width: 50%;
+    width: 100%;
     position: relative;
     display: flex;
     flex-direction: column;
@@ -23,3 +23,15 @@
     height: 100%;
     background-color: rgba(176, 176, 176, 0.2);
 }
+
+@media (max-width: 768px) {
+    .experiences-container {
+        width: 90%;
+        align-items: flex-start;
+        margin-right: 20px;
+    }
+
+    .experiences-container::before {
+        left: 20px;
+    }
+}

src/components/Filter/Filter.css

@@ -124,4 +124,11 @@
     background-color: rgba(217, 95, 70, 0.3);
     color: var(--important-color);
     border-color: var(--important-color);
+}
+
+@media (max-width: 480px) {
+    .filter-btn {
+        top: 5em;
+        right: 20px;
+    }
 }

src/components/Home/Home.css

@@ -12,6 +12,8 @@
 
 #home-section h1{
     margin-bottom: 0;
+    margin-left: 40px;
+    margin-right: 40px;
 }
 
 #home-section h2 {
@@ -49,5 +51,33 @@
 }
 
 
+@media (max-width: 840px) {
+    .btn {
+        margin-bottom: 10%;
+    }
+
+    #home-section p{
+        max-width: 60%;
+    }
+}
+
+@media (max-width: 656px) {
+    #home-section h1{
+        font-size: 3.5rem;
+    }
+    #home-section h2 {
+        font-size: 1.5rem;
+    }
+}
+
+
+@media (max-width: 584px) {
+    #home-section h1{
+        font-size: 3rem;
+    }
+}
+
+
+
 
 

src/components/NavBar/NavBar.css

@@ -40,4 +40,11 @@
 .nav-link.active {
     background-color: rgba(217, 95, 70, 0.3);
     color: var(--important-color);
+}
+
+
+@media (max-width: 768px) {
+    .nav-list{
+        gap: 0.5rem;
+    }
 }

src/components/ProjectDetails/ProjectDetails.css

@@ -18,7 +18,7 @@
     background-image: url("/public/assets/images/projectDetailsHeadband.png");
     background-size: cover;
 
-    &::after { /* Utilise un pseudo-élément pour le dégradé */
+    &::after {
         content: '';
         position: absolute;
         bottom: 0;
@@ -49,6 +49,7 @@
     color: var(--text-color);
     display: flex;
     padding: 0 4%;
+    gap: 5%;
 }
 
 .project-details-content {
@@ -80,6 +81,7 @@
     list-style: none;
     padding: 0;
     gap: 1em;
+    flex-wrap: wrap;
 }
 
 
@@ -169,4 +171,17 @@ aside ul li a:hover {
     display: flex;
     align-items: center;
     gap: 0.5em;
-}
+}
+
+.project-details-image {
+    width: 100%;
+    margin-bottom: 2%;
+}
+
+
+@media (max-width: 480px) {
+    .return-button {
+        top: 7em;
+    }
+}
+

src/components/ProjectDetails/ProjectDetails.jsx

@@ -91,7 +91,9 @@ function ProjectDetails({project}) {
                         >
                             {project.long_description}
                         </ReactMarkdown>
-
+                        {[...Array(project.nb_image)].map((_, i) => (
+                            <img src={`/assets/images/projects/${project.image_name}/${project.image_name}_${i+1}.png`} alt={project.image_name} className="project-details-image"/>
+                        ))}
                     </div>
                     <aside>
                         <ul>

src/components/Projects/Projects.css

@@ -55,4 +55,8 @@
 .projects-back-link {
     text-align: center;
     margin-bottom: 3rem;
-}
+}
+
+
+
+

src/components/SingleExperience/SingleExperience.css

@@ -4,6 +4,8 @@
     margin-bottom: 3rem;
     padding: 1.5rem;
     display: flex;
+    gap: 6rem;
+    justify-content: center;
 }
 
 .experience-card::before {
@@ -21,18 +23,17 @@
 
 
 .experience-card-left {
-    width: 50%;
+    width: 25%;
     text-align: end;
-    margin-right: 8rem;
 }
 
 .experience-card-right {
-    width: 50%;
+    width: 25%;
 }
 
 .experience-company {
     color: var(--important-color);
-    font-size: 1.2rem;
+    font-size: 1.5rem;
     margin: 0;
 }
 
@@ -74,4 +75,25 @@
     font-weight: bold;
     font-size: 1.2rem;
     line-height: 1;
+}
+
+
+
+@media (max-width: 768px) {
+    .experience-card{
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+    }
+    .experience-card::before {
+        left: 20px;
+        top: 31px;
+    }
+    .experience-card-left, .experience-card-right{
+        width: fit-content;
+        margin-left: 20px;
+    }
+    .experience-card-left{
+        text-align: left;
+    }
 }

src/components/SingleProject/SingleProject.css

@@ -122,4 +122,18 @@
     margin-left : 2em;
     font-weight: bold;
     font-style: italic;
+}
+
+
+@media (max-width: 1366px) {
+    .single-project {
+        width: 47%;
+    }
+}
+
+
+@media (max-width: 768px) {
+    .single-project {
+        width: 90%;
+    }
 }

src/components/thirdParty/Background/Background.css

@@ -22,7 +22,7 @@
 
 .planet {
     position: absolute;
-    bottom: 0%;
+    bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 120vw;
@@ -102,3 +102,11 @@
         opacity: 0.6;
     }
 }
+
+
+
+@media (max-width: 840px) {
+    .planet {
+        display: none;
+    }
+}

src/index.css

@@ -9,6 +9,7 @@
 
 html{
   scroll-behavior: smooth;
+  overflow-x: hidden;
 }
 
 
@@ -16,6 +17,7 @@ body {
   margin: 0;
   display: flex;
   place-items: center;
+  overflow-x: hidden;
 }
 
 .section-title {