Add Header component to App.js

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>
+	);
 }

src/components/About.tsx

@@ -0,0 +1,3 @@
+export default function About() {
+	return <div>About</div>;
+}

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>
+	);
+}

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);
+			}
+		}
+	}
+}

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;

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;
-	}
 }