add of projects page, and new projects

src/components/Experiences.jsx

@@ -31,7 +31,7 @@ function Experiences() {
     }, []);
 
     if (error) {
-        return <div>Erreur lors de la récupération des données : {error}</div>;
+        return <div>Error retrieving data: {error}</div>;
     }
 
     return (

src/components/NavBar.jsx

@@ -1,44 +1,51 @@
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import "../styles/NavBar.css";
 
 const NavBar = () => {
     const [active, setActive] = useState("home-section");
     const [isScrolling, setIsScrolling] = useState(false);
 
+    const navigate = useNavigate();
+
     useEffect(() => {
-        const sections = document.querySelectorAll("section");
-        const navHeight = document.querySelector(".navbar")?.offsetHeight + 40 || 120;
+        if (location.pathname === '/') {
+            const sections = document.querySelectorAll("section");
+            const navHeight = document.querySelector(".navbar")?.offsetHeight + 40 || 120;
 
-        const handleScroll = () => {
-            if (isScrolling) return;
+            const handleScroll = () => {
+                if (isScrolling) return;
 
-            let current = "home-section";
-            sections.forEach((section) => {
-                const sectionTop = section.offsetTop - navHeight;
-                if (window.scrollY >= sectionTop) {
-                    current = section.id;
-                }
-            });
+                let current = "home-section";
+                sections.forEach((section) => {
+                    const sectionTop = section.offsetTop - navHeight;
+                    if (window.scrollY >= sectionTop) {
+                        current = section.id;
+                    }
+                });
+                setActive(current);
+            };
 
-            setActive(current);
-        };
+            window.addEventListener("scroll", handleScroll);
+            handleScroll();
 
-        window.addEventListener("scroll", handleScroll);
-        handleScroll();
-
-        return () => {
-            window.removeEventListener("scroll", handleScroll);
-        };
-    }, [isScrolling]);
+            return () => {
+                window.removeEventListener("scroll", handleScroll);
+            };
+        }
+    }, [isScrolling, location.pathname]);
 
     const handleClick = (id) => {
-        setActive(id);
-        setIsScrolling(true);
-        document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
-        setTimeout(() => setIsScrolling(false), 800);
+        if (location.pathname === '/') {
+            setActive(id);
+            setIsScrolling(true);
+            document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
+            setTimeout(() => setIsScrolling(false), 800);
+        } else {
+            navigate(`/#${id}`);
+        }
     };
 
-
     return (
         <nav className="navbar">
             <ul className="nav-list">
@@ -79,4 +86,4 @@ const NavBar = () => {
     );
 };
 
-export default NavBar;
+export default NavBar;

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>
-    )
 }
 
 

src/components/SingleProject.jsx

@@ -2,10 +2,11 @@ import { useState, useEffect, useRef } from "react";
 import SkillCard from "./SkillCard";
 import "../styles/SingleProject.css";
 
-function SingleProject({ image, title, description, skills, color, nbImage }) {
+function SingleProject({ image, title, description, skills, id, nbImage }) {
     const [imageID, setImageID] = useState(1);
     const [isFading, setIsFading] = useState(true);
     const intervalRef = useRef(null);
+    const color = ["blue", "green", "purple", "red", "yellow"]
 
     const handleChangeImage = (direction) => {
         if (nbImage <= 1) return;
@@ -52,7 +53,7 @@ function SingleProject({ image, title, description, skills, color, nbImage }) {
 
             <div className="single-project-right">
                 <div className="single-project-right-top">
-                    <div className={`single-project-line color-${color}`}></div>
+                    <div className={`single-project-line color-${color[(id-1)%color.length]}`}></div>
                     <h3 className="single-project-title">{title}</h3>
                 </div>
 

src/components/Skills.jsx

@@ -23,7 +23,7 @@ function Skills() {
     }, []);
 
     if (error) {
-        return <div>Erreur lors de la récupération des données : {error}</div>;
+        return <div>Error retrieving data: {error}</div>;
     }
 
     const uniqueSkillTypes = [...new Set(skills.map(skill => skill.type))];