add of a navBar and update of README.md

README.md

@@ -1,12 +1,18 @@
 # To do
 
-- faire un nav bar
-- revoir les titres
-- revoir ma section experiences
-- mettre plusieurs images qui défilent sur les projects
-- faire une page pour lister tous les projets
-- faire une page explicative par projet
-- mettre la base de donnée en place
+## For V1 :
+- Revoir les titres de section (+espace au dessus des titres)
+- Revoir ma section experiences
+- Mettre un défilement de plusieurs images sur les projets
+
+## 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
+- Faire une page explicative par projet
+
 
 ## Usefull commands
 

src/components/Home.jsx

@@ -1,11 +1,12 @@
 import '../styles/Home.css';
 import Background from "./thirdParty/Background.jsx";
-
+import NavBar from "./NavBar.jsx";
 function Home() {
     return (
 
     <section id="home-section">
         <Background />
+        <NavBar/>
         <h1>Hello, I'm<span className="highlight"> Giovanni Josserand</span></h1>
         <h2>Junior Developer</h2>
         <p>

src/components/NavBar.jsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from "react";
+import "../styles/NavBar.css";
+
+const NavBar = () => {
+    const [active, setActive] = useState("home-section");
+    const [isScrolling, setIsScrolling] = useState(false);
+
+    useEffect(() => {
+        const sections = document.querySelectorAll("section");
+        const navHeight = document.querySelector(".navbar")?.offsetHeight + 40 || 120;
+
+        const handleScroll = () => {
+            if (isScrolling) return;
+
+            let current = "home-section";
+            sections.forEach((section) => {
+                const sectionTop = section.offsetTop - navHeight;
+                if (window.scrollY >= sectionTop) {
+                    current = section.id;
+                }
+            });
+
+            setActive(current);
+        };
+
+        window.addEventListener("scroll", handleScroll);
+        handleScroll(); // check initial
+
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, [isScrolling]);
+
+    const handleClick = (id) => {
+        setActive(id);
+        setIsScrolling(true);
+        document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
+        setTimeout(() => setIsScrolling(false), 800);
+    };
+
+
+    return (
+        <nav className="navbar">
+            <ul className="nav-list">
+                <li>
+                    <button
+                        onClick={() => handleClick("home-section")}
+                        className={`nav-link ${active === "home-section" ? "active" : ""}`}
+                    >
+                        Home
+                    </button>
+                </li>
+                <li>
+                    <button
+                        onClick={() => handleClick("experiences-section")}
+                        className={`nav-link ${active === "experiences-section" ? "active" : ""}`}
+                    >
+                        Experiences
+                    </button>
+                </li>
+                <li>
+                    <button
+                        onClick={() => handleClick("projects-section")}
+                        className={`nav-link ${active === "projects-section" ? "active" : ""}`}
+                    >
+                        Projects
+                    </button>
+                </li>
+                <li>
+                    <button
+                        onClick={() => handleClick("skills-section")}
+                        className={`nav-link ${active === "skills-section" ? "active" : ""}`}
+                    >
+                        Skills
+                    </button>
+                </li>
+            </ul>
+        </nav>
+    );
+};
+
+export default NavBar;

src/index.css

@@ -5,6 +5,10 @@
   background-color: #0D0D0D;
 }
 
+html{
+  scroll-behavior: smooth;
+}
+
 
 body {
   margin: 0;

src/styles/Experiences.css

@@ -2,8 +2,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 5rem;
     width: 100%;
+    scroll-margin-top: 40px;
 }
 
 .experiences-container {

src/styles/NavBar.css

@@ -0,0 +1,43 @@
+.navbar {
+    position: fixed;
+    top: 30px;
+    background: rgba(100,100,100, 0.25);
+    backdrop-filter: blur(12px);
+    border-radius: 25px;
+    padding: 6px 10px;
+    z-index: 1000;
+    border: solid rgba(100,100,100,0.5) 0.001rem;
+}
+
+.nav-list {
+    list-style: none;
+    display: flex;
+    gap: 1.3rem;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    li{
+        display: flex;
+    }
+}
+
+.nav-link {
+    text-decoration: none;
+    padding: 0.3rem 0.8rem;
+    border-radius: 20px;
+    color: #B0B0B0;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    cursor: pointer;
+    border: none;
+    background: none;
+    font-size: 15px;
+}
+
+.nav-link:hover {
+    color: #D95F46;
+}
+
+.nav-link.active {
+    background-color: rgba(217, 95, 70, 0.3);
+    color: #D95F46;
+}

src/styles/Projects.css

@@ -1,3 +1,9 @@
+#projects-section{
+    display: flex;
+    flex-direction: column;
+    scroll-margin-top: 40px;
+}
+
 .show-more-container {
     text-align: center;
     margin-top: 2rem;

src/styles/Skills.css

@@ -1,3 +1,9 @@
+#skills-section{
+    display: flex;
+    flex-direction: column;
+    scroll-margin-top: 40px;
+}
+
 .skills-span{
     width: 100%;
 }