styled header component after adding links

src/components/Header.jsx

@@ -1,11 +1,23 @@
+/* ----- Third Party Imports ----- */
+import { Link } from "react-router-dom";
+
 /* ----- Project Imports ----- */
 import "@/styles/header.css";
 
 
 function Header() {
   return (
-    <header className="project-header">
+    <header className="portfolioHeader">
+      <div className="portfolioSiteLink">
         <h1><a href="https://paulus.casa">paulus.casa</a></h1>
+      </div>
+    <div className="headerLinksContainer">
+      <Link className="headerLink" to="/">Home</Link>
+      <p className="headerLinkDivider">~</p>
+      <Link className="headerLink" to="/expertise">Expertise</Link>
+      <p className="headerLinkDivider">~</p>
+      <Link className="headerLink" to="/projects">Projects</Link>
+    </div>
     </header>
   );
 };

src/styles/App.css

@@ -12,7 +12,7 @@ body {
   height: 100vh;
   max-width: 100vw;
   font-family: monospace;
-  overflow-y: scroll;
+  overflow-y: none;
 }
 
 a {

src/styles/header.css

@@ -1,8 +1,8 @@
-.project-header {
+.portfolio-header {
   all: initial;
 }
 
-.project-header * {
+.portfolio-header * {
   all: unset;
 }
 
@@ -13,24 +13,62 @@ h1 {
   margin-inline-end: 0;
 }
 
-.project-header {
+.portfolioHeader {
-  display: block;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   position: fixed;
   top: 0;
   left: 0;
   background: linear-gradient(to right, #434343 0%, black 100%);
-  height: 3rem;
+  height: 3.5rem;
   width: 100%;
 }
 
-.project-header h1 {
+.headerLinksContainer {
-  padding: 0.5rem;
+  flex-grow: 1;
-  font-size: 2rem;
+  justify-content: center;
-  text-align: left;
 }
 
-.project-header a, a:hover, a:visited, a:active {
+.portfolioSiteLink {
+  padding: 0.75rem;
+  line-height: 1;
+  text-align: left;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.portfolioHeader h1 {
+  font-size: 2rem;
+}
+
+.portfolioHeader a, a:hover, a:visited, a:active {
   color: white;
   text-decoration: none;
 }
 
+.headerLinksContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.headerLink {
+  padding: 0.25rem;
+  color: white;
+  font-size: 1.2rem;
+}
+
+.headerLink:hover, .headerLink:active {
+  color: black;
+  background-color: white;
+}
+
+.headerLinksContainer p {
+  padding: 0.25rem;
+  font-size: 1.2rem;
+  color: white;
+  font-weight: 400;
+}
+