diff --git a/README.md b/README.md index ca583d6..7358f93 100644 --- a/README.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index ad5d14d..2a8e3ea 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 385876e..00752b0 100644 --- a/package.json +++ b/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", diff --git a/public/assets/images/empty/empty_1.png b/public/assets/images/empty/empty_1.png new file mode 100644 index 0000000..2ad3933 Binary files /dev/null and b/public/assets/images/empty/empty_1.png differ diff --git a/src/App.jsx b/src/App.jsx index fff1480..3eb8608 100644 --- a/src/App.jsx +++ b/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 ( -
- - - - -
+ + } /> + } /> + ) } diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx index ee5f922..42bad78 100644 --- a/src/components/Experiences.jsx +++ b/src/components/Experiences.jsx @@ -10,14 +10,14 @@ function Experiences() { useEffect(() => { const fetchExperiencesAndTasks = async () => { try { - let response = await fetch('/api/experiences'); + let response = await fetch('/api/experiences/'); if (!response.ok) { throw new Error(`Erreur HTTP: ${response.status}`); } let data = await response.json(); setExperiences(data.data); - response = await fetch('/api/experienceTasks'); + response = await fetch('/api/experienceTasks/'); if (!response.ok) { throw new Error(`Erreur HTTP: ${response.status}`); } @@ -31,7 +31,7 @@ function Experiences() { }, []); if (error) { - return
Erreur lors de la récupération des données : {error}
; + return
Error retrieving data: {error}
; } return ( diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx index b9f50ee..323438b 100644 --- a/src/components/NavBar.jsx +++ b/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 (