add section Hero Section, section Skills, section About Me and the Navbar

src/Pages/Home/AboutMe.jsx

@@ -0,0 +1,28 @@
+export default function AboutMe() {
+  return (
+    <section id="AboutMe" className="about--section">
+      <div className="about--section--img">
+        <img src="./img/logo512.png" alt="AboutMe" />
+      </div>
+      <div className="hero--section--content-box about--section--box">
+        <div className="hero--section--content">
+          <p className="section--title">A propos</p>
+          <h1 className="skills-section--heading">A propos de moi</h1>
+          <p className="hero--section-description">
+            Je suis un étudiant hors pair, le meilleur alternant que vous pouvez
+            trouver. Ma passion est de jouer The Song of The Golden Dragon, de
+            Estas Tones. Le poulet c'est délicieux.
+          </p>
+          <p className="hero--section-description">
+            Ensuite, il faut dire que la guitare c'est génial et pourquoi pas me
+            choisir pour ça je vous le demande. Enfin j'aimerais ajouter qu'il
+            ne faut pas oublier de dire quelque chose de très important. Et oui,
+            vous voyez, l'alternant basique l'oubli, mais pas moi. J'ai de la
+            famille dans la mafia italienne ... J'apprécierais que vous me
+            choisissiez, fin vous comprenez.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

src/Pages/Home/HeroSection.jsx

@@ -0,0 +1,27 @@
+export default function HeroSection() {
+  return (
+    <section id="heroSection" className="hero--section">
+      <div className="hero--section--content-box">
+        <div className="hero--section--content">
+          <p className="section--title">Hello, je suis ALESSI Thibaut</p>
+          <h1 className="hero--section--title">
+            <span className="hero--section--title--color">
+              Etudiant à Polytech Lyon
+            </span>{" "}
+            <br />
+            Dev, BDD
+          </h1>
+          <p className="hero--section--description">
+            Voici la description, j'adore l'informatique miam miam
+            <br />A la recherche d'une alternance de 3 ans avec l'école
+            d'ingénieur Polytech Lyon
+          </p>
+        </div>
+        <button className="btn btn-primary">Contactez-moi</button>
+      </div>
+      <div className="hero--section--img">
+        <img src="./img/logo512.png" alt="Hero Section" />
+      </div>
+    </section>
+  );
+}

src/Pages/Home/MySkills.jsx

@@ -0,0 +1,25 @@
+import data from "../../data/index.json";
+
+export default function MySkills() {
+  return (
+    <section className="skills--section" id="mySkills">
+      <div className="portfolio--container">
+        <p className="section--title">Mes Compétences</p>
+        <h2 className="skills--section--heading">Mes Skills</h2>
+      </div>
+      <div className="skills--section--container">
+        {data?.skills?.map((item, index) => (
+          <div key={index} className="skills--section--card">
+            <div className="skills--section--img">
+              <img src={item.src} alt="Tools" />
+            </div>
+            <div className="skills--section--card--content">
+              <h3 className="skills--section--title">{item.title}</h3>
+              <p className="skills--section--description">{item.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/Pages/Home/Navbar.jsx

@@ -0,0 +1,124 @@
+import { useState, useEffect } from "react";
+import { Link } from "react-scroll";
+
+function Navbar() {
+  const [navActive, setNavActive] = useState(false);
+
+  const toggleNav = () => {
+    setNavActive(!navActive);
+  };
+
+  const closeMenu = () => {
+    setNavActive(false);
+  };
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth <= 500) {
+        closeMenu;
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (window.innerWidth <= 1200) {
+      closeMenu;
+    }
+  }, []);
+
+  return (
+    <nav className={`navbar ${navActive ? "active" : ""}`}>
+      <div>
+        <img src="/logo.svg" alt="Logoipsum" />
+      </div>
+      <a
+        className={`nav__hamburger ${navActive ? "active" : ""}`}
+        onClick={toggleNav}
+      >
+        <span className="nav__hamburger__line"></span>
+        <span className="nav__hamburger__line"></span>
+        <span className="nav__hamburger__line"></span>
+      </a>
+      <div className={`navbar--items ${navActive ? "active" : ""}`}>
+        <ul>
+          <li>
+            <Link
+              onClick={closeMenu}
+              activeClass="navbar--active-content"
+              spy={true}
+              smooth={true}
+              offset={-70}
+              duration={500}
+              to="heroSection"
+              className="navbar--content"
+            >
+              Home
+            </Link>
+          </li>
+          <li>
+            <Link
+              onClick={closeMenu}
+              activeClass="navbar--active-content"
+              spy={true}
+              smooth={true}
+              offset={-70}
+              duration={500}
+              to="MyPortfolio"
+              className="navbar--content"
+            >
+              Portfolio
+            </Link>
+          </li>
+          <li>
+            <Link
+              onClick={closeMenu}
+              activeClass="navbar--active-content"
+              spy={true}
+              smooth={true}
+              offset={-70}
+              duration={500}
+              to="AboutMe"
+              className="navbar--content"
+            >
+              About Me
+            </Link>
+          </li>
+          <li>
+            <Link
+              onClick={closeMenu}
+              activeClass="navbar--active-content"
+              spy={true}
+              smooth={true}
+              offset={-70}
+              duration={500}
+              to="testimonial"
+              className="navbar--content"
+            >
+              Testimonials
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <Link
+        onClick={closeMenu}
+        activeClass="navbar--active-content"
+        spy={true}
+        smooth={true}
+        offset={-70}
+        duration={500}
+        to="Contact"
+        className="btn btn-outline-primary"
+      >
+        Contact Me
+      </Link>
+    </nav>
+  );
+}
+
+export default Navbar;