Add topBar

src/App.js

@@ -7,6 +7,7 @@ import Skills from "./components/Skills.tsx";
 import Project from "./components/Project.tsx";
 import Footer from "./components/Footer.tsx";
 import CV from "./components/CV.tsx";
+import Menu from "./components/Menu.tsx";
 import data from "./assets/DATA.ts";
 
 function App() {
@@ -29,6 +30,7 @@ function App() {
 
     return (
         <div className="min-h-screen py-10 px-3 sm:px-5 bg-gray-100 dark:bg-gray-900">
+            <Menu />
             <div data-aos="face-down" data-aos-duration="800">
                 <Card name={data.name} title={data.title} social={data.social} />
             </div>

src/components/About.tsx

@@ -1,9 +1,9 @@
 // @ts-ignore
 import React from 'react';
 
-function About({title, description}) {
+function About({ref, title, description}) {
     return(
-      <div className="max-w-4xl mx-auto mt-16">
+      <div className="max-w-4xl mx-auto mt-16" id="about">
           <p className="text-2xl md:text-4xl font-bold text-center text-gray-800 dark:text-gray-200">{title}</p>
           <p className="text-base text-left md:text-center text-gray-600 leading-relaxed mt-4 dark:text-gray-400">{description}</p>
       </div>

src/components/CV.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 function CV(){
     return (
-        <div className="max-w-4xl mx-auto mt-16 flex justify-center items-center flex-col gap-1">
+        <div className="max-w-4xl mx-auto mt-16 flex justify-center items-center flex-col gap-1" id="cv">
             <p className="text-2xl md:text-4xl font-bold text-center text-gray-800 dark:text-gray-200">Mon CV</p>
             <iframe src="/CV%20Félix%20MARQUET.pdf" className="w-full md:w-3/4 h-64 md:h-96 lg:h-screen" title="CV Félix MARQUET"></iframe>
         </div>

src/components/Card.tsx

@@ -6,7 +6,7 @@ function Card({name, title, social: {github, twitter, linkedin, mail}}){
     //Get avatar from gravatar using email
     const profile = `https://1.gravatar.com/avatar/4d43af207280d1d23e2a2905577c7b6167723fec2d33f946cc86f114c1a85b8d?size=256`;
     return (
-        <div className="w-full">
+        <div className="w-full" id="top">
             <div className="flex flex-col items-center justify-center max-w-xs mx-auto bg-white shadow-xl rounded-xl p-5 dark:bg-gray-800">
                 <div className="">
                     <img

src/components/Menu.tsx

@@ -0,0 +1,17 @@
+//@ts-ignore
+import React from 'react';
+
+function Menu() {
+    return (
+        <nav className="fixed top-0 w-full bg-gray-100 dark:bg-gray-900 z-50 shadow-md shadow-gray-800 dark:shadow-gray-200">
+            <ul className="flex justify-around">
+                <li><a href="#top" className="text-gray-800 dark:text-gray-200">Félix MARQUET</a></li>
+                <li><a href="#about" className="text-gray-800 dark:text-gray-200">A propos de moi</a></li>
+                <li><a href="#projects" className="text-gray-800 dark:text-gray-200">Mes projets</a></li>
+                <li><a href="#cv" className="text-gray-800 dark:text-gray-200">Mon CV</a></li>
+            </ul>
+        </nav>
+    )
+}
+
+export default Menu;

src/components/Project.tsx

@@ -1,10 +1,11 @@
 // @ts-ignore
 import React from 'react';
+// @ts-ignore
 import ProjectCard from "./ProjectCard.tsx";
 
 function Projects({projects}) {
     return(
-        <div>
+        <div id="projects">
             <h1 className="mt-8 text-2xl md:text-4xl text-center font-extrabold dark:text-gray-200">Mes projets</h1>
                 <div className="flex-row flex-wrap flex justify-center gap-4">
                     {projects.map((project) => (