From b0b71f2c0615cc790879c3928aca3968af72f6f7 Mon Sep 17 00:00:00 2001
From: dertyp7 <dertyp7@tealfire.de>
Date: Sat, 13 Jan 2024 16:27:05 +0100
Subject: [PATCH] Add Header component to App.js

---
 src/App.tsx                      |  7 ++++-
 src/components/About.tsx         |  3 ++
 src/components/Header.tsx        | 19 +++++++++++++
 src/styles/Header.scss           | 47 ++++++++++++++++++++++++++++++++
 src/styles/index.scss            |  2 +-
 src/styles/variables_colors.scss |  7 +----
 6 files changed, 77 insertions(+), 8 deletions(-)
 create mode 100644 src/components/About.tsx
 create mode 100644 src/components/Header.tsx
 create mode 100644 src/styles/Header.scss

diff --git a/src/App.tsx b/src/App.tsx
index 1561c90..69947ef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,10 @@
 import "@styles/App.scss";
+import Header from "@components/Header";
 
 export default function App() {
-	return <div id="app"></div>;
+	return (
+		<div id="app">
+			<Header />
+		</div>
+	);
 }
diff --git a/src/components/About.tsx b/src/components/About.tsx
new file mode 100644
index 0000000..ef9b82a
--- /dev/null
+++ b/src/components/About.tsx
@@ -0,0 +1,3 @@
+export default function About() {
+	return <div>About</div>;
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..822d8fb
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,19 @@
+import "@styles/Header.scss";
+
+export default function Header() {
+	return (
+		<div className="header">
+			<a href="/" className="logo">
+				<span>&#123;</span>J<span>&#125;</span>
+			</a>
+
+			<nav>
+				<a className="current" href="#">
+					About
+				</a>
+				<a href="#skills">Skills</a>
+				<a href="#projects">Projects</a>
+			</nav>
+		</div>
+	);
+}
diff --git a/src/styles/Header.scss b/src/styles/Header.scss
new file mode 100644
index 0000000..c15f085
--- /dev/null
+++ b/src/styles/Header.scss
@@ -0,0 +1,47 @@
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+	border-bottom: 1px solid var(--color-border);
+	padding: 10px 50px;
+
+	.logo {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-decoration: none;
+		font-size: 2rem;
+		font-weight: 700;
+		letter-spacing: 5px;
+		padding-bottom: 8px;
+		color: var(--color-font);
+
+		span {
+			color: #7c7d7d;
+		}
+	}
+
+	nav {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 50px;
+		a {
+			color: #fff;
+			text-decoration: none;
+			font-size: 1.2rem;
+			font-weight: 500;
+			border-bottom: 2px solid transparent;
+			transition: all 50ms ease-in-out;
+
+			&.current {
+				border-color: var(--color-accent);
+			}
+
+			&:hover {
+				border-color: var(--color-accent);
+			}
+		}
+	}
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index dc32c63..422f5f3 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,7 +2,7 @@
 
 :root {
 	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-	line-height: 1.5;
+	// line-height: 1.5;
 	font-weight: 400;
 
 	color-scheme: light dark;
diff --git a/src/styles/variables_colors.scss b/src/styles/variables_colors.scss
index ec0b8c4..7c778da 100644
--- a/src/styles/variables_colors.scss
+++ b/src/styles/variables_colors.scss
@@ -8,6 +8,7 @@
 	--color-font-link-header: #1c1c1c;
 	--color-font-link-header-hover: #000;
 
+	--color-border: #1c1c1c;
 	--color-border-link-header: transparent;
 	--color-border-link-header-hover: var(--color-accent);
 
@@ -23,10 +24,4 @@
 
 	--color-font-link: var(--color-accent);
 	--color-font-link-hover: #7dffc9;
-
-	.theme-dark {
-		--color-background-body: #1a1818;
-		--color-background-header: transparent;
-		--color-font: #fff;
-	}
 }