From 1f888dbdd0882536b427dd6334942410fe1868ff Mon Sep 17 00:00:00 2001
From: II-Paulus-II <paulus.coding@gmail.com>
Date: Fri, 22 Mar 2024 17:11:03 +0000
Subject: [PATCH] styled header component after adding links

---
 src/components/Header.jsx | 16 +++++++++--
 src/styles/App.css        |  2 +-
 src/styles/header.css     | 58 ++++++++++++++++++++++++++++++++-------
 3 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index a752fe2..c7353c2 100644
--- a/src/components/Header.jsx
+++ b/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">
-    <h1><a href="https://paulus.casa">paulus.casa</a></h1>
+    <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>
   );
 };
diff --git a/src/styles/App.css b/src/styles/App.css
index 0994181..5c0a1ab 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -12,7 +12,7 @@ body {
   height: 100vh;
   max-width: 100vw;
   font-family: monospace;
-  overflow-y: scroll;
+  overflow-y: none;
 }
 
 a {
diff --git a/src/styles/header.css b/src/styles/header.css
index 3c4fd5a..297fbf0 100644
--- a/src/styles/header.css
+++ b/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 {
-  display: block;
+.portfolioHeader {
+  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 {
-  padding: 0.5rem;
-  font-size: 2rem;
-  text-align: left;
+.headerLinksContainer {
+  flex-grow: 1;
+  justify-content: center;
 }
 
-.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;
+}
+