add of projects page, and new projects

src/components/Projects.jsx

@@ -1,10 +1,13 @@
 import SingleProject from "./SingleProject.jsx";
 import "../styles/Projects.css"
 import React, {useEffect, useState} from "react";
-import {Link} from "react-router-dom";
+import {Link, useLocation} from "react-router-dom";
+import NavBar from "./NavBar.jsx";
+
 function Projects() {
     const [projects, setProjects] = useState([]);
     const [error, setError] = useState(null);
+    const location = useLocation();
 
     useEffect(() => {
         const fetchProjects = async () => {
@@ -22,24 +25,63 @@ function Projects() {
         fetchProjects();
     }, []);
 
+
     if (error) {
-        return <div>Erreur lors de la récupération des données : {error}</div>;
+        return <div>Error retrieving data: {error}</div>;
     }
 
+    if (location.pathname === '/') {
+        return (
+            <section id="projects-section">
+                <h1 className="section-title">Projects</h1>
+                <div className="projects-section-list">
+                    {projects
+                        .filter(project => project.id <= 3)
+                        .map(project => (
+                        <SingleProject
+                            image={project.image_name}
+                            title={project.title}
+                            description={project.description}
+                            skills={project.skills}
+                            id={project.id}
+                            nbImage={project.nb_image}
+                        />
+                    ))}
+                </div>
+                <div className="show-more-container">
+                    <Link to="/projects" className="projects-link">Show more</Link>
+                </div>
+            </section>
+        )
+    }else if (location.pathname === '/projects') {
+        return (
+            <section id="projects-section">
+                <div className="projects-section-header">
+                    <NavBar />
+                    <h1 className="section-title">All Projects</h1>
+                    <p className="projects-section-subtitle">Here you can find a collection of my work.</p>
+                </div>
+                <div className="projects-section-list">
+                    {projects.map(project => (
+                        <SingleProject
+                            image={project.image_name}
+                            title={project.title}
+                            description={project.description}
+                            skills={project.skills}
+                            id={project.id}
+                            nbImage={project.nb_image}
+                        />
+                    ))}
+                </div>
+                <div className="projects-back-link">
+                    <Link to="/" className="projects-link">← Back to Home</Link>
+                </div>
+            </section>
+        )
+    }else {
+        return <div>Page inexistante</div>;
+    }
 
-    return (
-        <section id="projects-section">
-            <h1 className="section-title">Projects</h1>
-            <div className="projects-section-list">
-                {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>
-            <div className="show-more-container">
-                <Link to="/projets" className="show-more-link">Show more</Link>
-            </div>
-        </section>
-    )
 }