src/components/ProjectDetails/ProjectDetails.css

@@ -49,6 +49,7 @@
     color: var(--text-color);
     display: flex;
     padding: 0 4%;
+    gap: 5%;
 }
 
 .project-details-content {
@@ -172,11 +173,15 @@ aside ul li a:hover {
     gap: 0.5em;
 }
 
-
+.project-details-image {
+    width: 100%;
+    margin-bottom: 2%;
+}
 
 
 @media (max-width: 480px) {
-    .return-button{
+    .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>