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,6 +17,7 @@ function Navbar() {
 
   return (
     <nav>
+      <div id={"nav-title"}>
         <NavLink to="/" id={"title"}>
           <h1 className={"name"}>
             <span className={"first-name"}>
@@ -27,6 +28,8 @@ function Navbar() {
           </span>
           </h1>
         </NavLink>
+      </div>
+      <div id={"nav-menu"}>
         <NavLink to={"/"} id={'nav-home'} className={"nav-menu-card nav-active"} onClick={setActive}>
           <p>Home</p>
         </NavLink>
@@ -38,6 +41,7 @@ function Navbar() {
         <NavLink to={"/projects"} id={'nav-projects'} className={"nav-menu-card"} onClick={setActive}>
           <p>Projects</p>
         </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);