remove of image carousel

src/components/Projects/Projects.jsx

@@ -44,7 +44,6 @@ function Projects() {
                             description={project.short_description}
                             skills={project.skills}
                             id={project.id}
-                            nbImage={project.nb_image}
                             school={project.school}
                             beginningYear={project.beginning_year}
                             endYear={project.end_year}

src/components/SingleProject/SingleProject.css

@@ -34,10 +34,6 @@
     object-fit: cover;
 }
 
-.single-project-top img.fade-out {
-    opacity: 0;
-}
-
 .single-project-bottom {
     display: flex;
     flex-direction: column;
@@ -131,38 +127,6 @@
     color: var(--title-color);
 }
 
-.arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background: none;
-    border: none;
-    color: var(--title-color);
-    font-size: 35px;
-    display: none;
-    transition: all 0.3s ease;
-    text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
-}
-
-.arrow:hover {
-    color: var(--important-color);
-    opacity: 0.8;
-    transform: translateY(-50%) scale(1.2);
-    cursor: pointer;
-}
-
-.arrow.preview {
-    left: 10px;
-}
-
-.arrow.next {
-    right: 10px;
-}
-
-.single-project-top:hover .arrow {
-    display: flex;
-}
-
 
 .single-project-years{
     color : var(--text-color);

src/components/SingleProject/SingleProject.jsx

@@ -2,55 +2,14 @@ import { useState, useEffect, useRef } from "react";
 import SkillCard from "../SkillCard/SkillCard.jsx";
 import "./SingleProject.css";
 
-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);
+function SingleProject({ image, title, description, skills, id, school, beginningYear, endYear }) {
     const color = ["blue", "green", "purple", "red", "yellow"]
 
-    const handleChangeImage = (direction) => {
-        if (nbImage <= 1) return;
-
-        setIsFading(false);
-
-        setTimeout(() => {
-            setImageID((prevID) =>
-                direction === 1
-                    ? (prevID % nbImage) + 1
-                    : prevID === 1 ? nbImage : prevID - 1
-            );
-            setIsFading(true);
-        }, 300);
-
-        clearInterval(intervalRef.current);
-        startAutoSlide();
-    };
-
-    const startAutoSlide = () => {
-        intervalRef.current = setInterval(() => {
-            handleChangeImage(1);
-        }, 5000);
-    };
-
-    useEffect(() => {
-        startAutoSlide();
-        return () => clearInterval(intervalRef.current);
-    }, []);
-
     return (
         <div className="single-project">
             <div className="single-project-top">
-                <button onClick={() => handleChangeImage(-1)} className="arrow preview">{'<'}</button>
-
-                <img
-                    src={`/assets/images/${image}/${image}_${imageID}.png`}
-                    alt={image}
-                    className={isFading ? 'fade-in' : 'fade-out'}
-                />
-
-                <button onClick={() => handleChangeImage(1)} className="arrow next">{'>'}</button>
+                <img src={`/assets/images/projects/${image}/${image}_1.png`} alt={image}/>
             </div>
-
             <div className="single-project-bottom">
                 <div className="single-project-bottom-header">
                     <div className="single-project-title-wrapper">