reorganization of the tree structure

src/components/NavBar/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/components/NavBar/NavBar.jsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import "./NavBar.css";
+
+const NavBar = () => {
+    const [active, setActive] = useState("home-section");
+    const [isScrolling, setIsScrolling] = useState(false);
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (location.pathname === '/') {
+            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();
+
+            return () => {
+                window.removeEventListener("scroll", handleScroll);
+            };
+        }
+    }, [isScrolling, location.pathname]);
+
+    const handleClick = (id) => {
+        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">
+                <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;