Merge pull request 'feature/reactRouter' (#22) from feature/reactRouter into dev

Reviewed-on: #22

README.md

@@ -1,15 +1,14 @@
 # To do
 
-## For V1 :
-- Revoir les titres de section (+espace au dessus des titres)
-
-## For V2 :
-- Mettre la base de donnée en place
-- Refaire en conséquence les choses nécessaires
-
-## For V3 :
-- Faire une page pour lister tous les projets
+- Régler problème de scoll entre page
+- Rafaire l'organisation du projet
+- Rajouter les images manquantes des projects
 - Faire une page explicative par projet
+- Faire du responsive
+
+## Plus tard
+- Refaire la section des skills
+- Ajouter un fonction de filtrage des projects (en fonction de la date, des skills)
 
 
 ## Usefull commands

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-router-dom": "^7.8.2"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
@@ -1600,6 +1601,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2471,6 +2481,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.2.tgz",
+      "integrity": "sha512-7M2fR1JbIZ/jFWqelpvSZx+7vd7UlBTfdZqf6OSdF9g6+sfdqJDAWcak6ervbHph200ePlu+7G8LdoiC3ReyAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.2.tgz",
+      "integrity": "sha512-Z4VM5mKDipal2jQ385H6UBhiiEDlnJPx6jyWsTYoZQdl5TrjxEV2a9yl3Fi60NBJxYzOTGTTHXPi0pdizvTwow==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.8.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2544,6 +2592,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.8.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

src/App.jsx

@@ -1,20 +1,15 @@
 import './App.css'
-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 { Routes, Route, Link } from 'react-router-dom';
+import HomePage from './pages/HomePage.jsx';
+import ProjectsPage from './pages/ProjectsPage';
 
 
 function App() {
     return (
-        <div className="App">
-            <Home/>
-            <Experiences />
-            <Projects />
-            <Skills />
-            <Footer />
-        </div>
+        <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/projects" element={<ProjectsPage />} />
+        </Routes>
     )
 }
 

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,9 +1,13 @@
 import SingleProject from "./SingleProject.jsx";
 import "../styles/Projects.css"
 import React, {useEffect, useState} from "react";
+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 () => {
@@ -21,26 +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">
-                <p className="show-more-link">
-                    Show more
-                </p>
-            </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))];

src/main.jsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
+import { BrowserRouter } from 'react-router-dom';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
   </StrictMode>,
 )

src/pages/HomePage.jsx

@@ -0,0 +1,34 @@
+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/>
+            <Experiences/>
+            <Projects/>
+            <Skills/>
+            <Footer/>
+        </div>
+    );
+}
+export default HomePage;

src/pages/ProjectsPage.jsx

@@ -0,0 +1,8 @@
+import Projects from "../components/Projects.jsx";
+
+function ProjectsPage() {
+    return (
+        <Projects/>
+    );
+}
+export default ProjectsPage;

src/styles/Projects.css

@@ -10,7 +10,7 @@
 
 }
 
-.show-more-link {
+.projects-link {
     display: inline-block;
     color: #B0B0B0;
     border: 1px solid #B0B0B0;
@@ -22,7 +22,7 @@
     transition: all 0.3s ease;
 }
 
-.show-more-link:hover {
+.projects-link:hover {
     background-color: #B0B0B0;
     color: #1E1E1E;
     transform: translateY(-3px);
@@ -31,4 +31,29 @@
 
 .projects-section-list {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+
+
+
+
+.projects-section-header {
+    text-align: center;
+    margin-bottom: 2rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.projects-section-subtitle {
+    font-size: 1.2rem;
+    color: #B0B0B0;
+}
+
+.projects-back-link {
+    text-align: center;
+    margin-bottom: 3rem;
 }

src/styles/SingleProject.css

@@ -69,18 +69,27 @@
     margin-right: 1rem;
 }
 
-.color-orange {
-    background-color: #D95F46;
+.color-blue {
+    background-color: #2556ff;
+}
+
+.color-green {
+    background-color: #36a837;
 }
 
 .color-purple {
     background-color: #a646d9;
 }
 
-.color-green {
-    background-color: #36a837;
+.color-red {
+    background-color: #ff0000;
 }
 
+.color-yellow {
+    background-color: #ffd427;
+}
+
+
 .single-project-title {
     font-size: 2rem;
     color: #EAEAEA;