add of projects page, and new projects

src/pages/HomePage.jsx

@@ -1,9 +1,26 @@
-import Home from '../components/Home.jsx'
-import Experiences from '../components/Experiences.jsx'
-import Projects from '../components/Projects.jsx'
-import Skills from '../components/Skills.jsx'
-import Footer from '../components/Footer.jsx'
+import {useEffect, useState} from 'react'; // 1. Import useEffect
+import { useLocation } from 'react-router-dom'; // 2. Import useLocation
+import Home from '../components/Home.jsx';
+import Experiences from '../components/Experiences.jsx';
+import Projects from '../components/Projects.jsx';
+import Skills from '../components/Skills.jsx';
+import Footer from '../components/Footer.jsx';
+
 function HomePage() {
+    const location = useLocation();
+
+    useEffect(() => {
+        if (location.hash) {
+            const id = location.hash.replace('#', '');
+            const element = document.getElementById(id);
+            if (element) {
+                setTimeout(() => {
+                    element.scrollIntoView({ behavior: 'smooth' });
+                }, 100);
+            }
+        }
+    }, [location]);
+
     return (
         <div>
             <Home/>

src/pages/ProjectsPage.jsx

@@ -1,38 +1,8 @@
-import React, {useEffect, useState} from "react";
-import SingleProject from "../components/SingleProject.jsx";
+import Projects from "../components/Projects.jsx";
+
 function ProjectsPage() {
-    const [projects, setProjects] = useState([]);
-    const [error, setError] = useState(null);
-
-    useEffect(() => {
-        const fetchProjects = async () => {
-            try {
-                const response = await fetch('/api/projects/');
-                if (!response.ok) {
-                    throw new Error(`Erreur HTTP: ${response.status}`);
-                }
-                const data = await response.json();
-                setProjects(data.data);
-            } catch (err) {
-                setError(err.message);
-            }
-        };
-        fetchProjects();
-    }, []);
-
-    if (error) {
-        return <div>Erreur lors de la récupération des données : {error}</div>;
-    }
-
-
-
     return (
-        <div>
-            <h1>Voici mes projets</h1>;
-            {projects.map(project => (
-                <SingleProject image={project.image_name} title={project.title} description={project.description} skills={project.skills} color={project.color} nbImage={project.nb_image}/>
-            ))}
-        </div>
-    )
+        <Projects/>
+    );
 }
 export default ProjectsPage;