navbar done

app/app/app.css

@@ -11,6 +11,11 @@
   src: url("./assets/fonts/Sora-SemiBold.ttf");
 }
 
+@font-face {
+  font-family: "handotrial";
+  src: url("./assets/fonts/hando-trial.bold.ttf");
+}
+
 :root {
   font-family: sora, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -88,38 +93,8 @@ button:focus-visible {
   z-index: 100;
 }
 
-.name {
+li {
-  width: 100%;
+  list-style: none;
-  color: var(--border-color);
-  display: flex;
-  flex-direction: row;
-}
-
-h1.name {
-  cursor: pointer;
-}
-
-.first-name {
-  width: 185px;
-  justify-self: center;
-  align-self: center;
-  padding: 2rem 0 1.5rem;
-  margin-right: 0.3rem;
-}
-
-.last-name {
-  text-align: center;
-  justify-self: center;
-  align-self: center;
-  border: 2px solid transparent;
-  border-radius: 10px;
-  height: 50px;
-  display: flex;
-  padding: 2rem 0 1.5rem 0.5rem;
-  align-items: center;
-  background: var(--button-background-color);
-  color: var(--background-color);
-  width: 210px;
 }
 
 @media (prefers-color-scheme: light) {

app/app/navbar/Navbar.tsx

@@ -17,27 +17,31 @@ function Navbar() {
 
   return (
     <nav>
-      <NavLink to="/" id={"title"}>
+      <div id={"nav-title"}>
-        <h1 className={"name"}>
+        <NavLink to="/" id={"title"}>
-          <span className={"first-name"}>
+          <h1 className={"name"}>
-            Quentin
+            <span className={"first-name"}>
+              Quentin
+            </span>
+          <span className={"last-name"}>
+            Leblanc
           </span>
-        <span className={"last-name"}>
+          </h1>
-          Leblanc
+        </NavLink>
-        </span>
+      </div>
-        </h1>
+      <div id={"nav-menu"}>
-      </NavLink>
+        <NavLink to={"/"} id={'nav-home'} className={"nav-menu-card nav-active"} onClick={setActive}>
-      <NavLink to={"/"} id={'nav-home'} className={"nav-menu-card nav-active"} onClick={setActive}>
+          <p>Home</p>
-        <p>Home</p>
+        </NavLink>
-      </NavLink>
 
-      <NavLink to={"/resume"} id={'nav-resume'} className={"nav-menu-card"} onClick={setActive}>
+        <NavLink to={"/resume"} id={'nav-resume'} className={"nav-menu-card"} onClick={setActive}>
-        <p>Resume</p>
+          <p>Resume</p>
-      </NavLink>
+        </NavLink>
 
-      <NavLink to={"/projects"} id={'nav-projects'} className={"nav-menu-card"} onClick={setActive}>
+        <NavLink to={"/projects"} id={'nav-projects'} className={"nav-menu-card"} onClick={setActive}>
-        <p>Projects</p>
+          <p>Projects</p>
-      </NavLink>
+        </NavLink>
+      </div>
     </nav>
   )
 }

app/app/navbar/navbar.css

@@ -1,4 +1,5 @@
 nav {
+    font-family: "handotrial", serif;
     display: flex;
     flex-direction: row;
     position: absolute;
@@ -38,6 +39,53 @@ p {
     gap: 0;
 }
 
+/* TODO Collapse */
+#nav-menu {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 100px;
+    margin-left: -50px;
+}
+
+.name {
+    width: 100%;
+    color: var(--border-color);
+    display: flex;
+    flex-direction: row;
+}
+
+h1.name {
+    cursor: pointer;
+}
+
+.first-name {
+    width: 200px;
+    justify-self: center;
+    align-self: center;
+    padding: 2rem 0 1.5rem;
+    margin-right: 0.3rem;
+    font-size: 2.8rem;
+}
+
+.last-name {
+    text-align: center;
+    justify-self: center;
+    align-self: center;
+    border: 2px solid transparent;
+    border-radius: 10px;
+    height: 50px;
+    display: flex;
+    padding: 2rem 0 1.5rem 0.5rem;
+    align-items: center;
+    background: var(--button-background-color);
+    color: var(--background-color);
+    width: 200px;
+    font-size: 2.8rem;
+}
+
 a:hover {
     text-decoration: none;
     color: var(--border-color);