layout

app/components/Header.tsx

@@ -0,0 +1,9 @@
+export default function Header({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return <header className="absolute flex justify-between w-full">
+        {children}
+    </header>
+}

app/components/NavItem.tsx

@@ -0,0 +1,13 @@
+import Link from "next/link";
+
+export default function NavItem({
+    children,
+    href
+}: Readonly<{
+    children: React.ReactNode;
+    href: string;
+}>) {
+    return <Link href={href} className="text-lg mx-4">
+        {children}
+    </Link>
+}

app/components/Navbar.tsx

@@ -0,0 +1,9 @@
+export default function Navbar({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return <nav className="p-5 flex justify-between">
+        {children}
+    </nav>
+}

app/components/Section.tsx

@@ -0,0 +1,9 @@
+export default function Section({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return <section>
+        {children}
+    </section>
+}

app/components/SectionContent.tsx

@@ -0,0 +1,9 @@
+export default function SectionContent({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return <div>
+        {children}
+    </div>
+}

app/components/SectionTitle.tsx

@@ -0,0 +1,9 @@
+export default function SectionTitle({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return <div>
+        {children}
+    </div>
+}

app/globals.css

@@ -5,21 +5,19 @@
   box-sizing: border-box;
 }
 
-html {
-  scroll-behavior: smooth;
-}
-
 body {
   min-height: 100vh;
   font-family: "Space Grotesk", sans-serif;
   color: #fff;
-  background-color: #500;
+  background: #000;
 }
 
 .bg{
   width: 100vw;
   height: 100vh;
-  position: fixed;
+  position: absolute;
+  top: 0;
+  left: 0;
   z-index: -999;
   background:
     radial-gradient(circle at 0% 0%, #da0202 0%, transparent 50%),

app/layout.tsx

@@ -1,5 +1,8 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import Navbar from "./components/Navbar";
+import NavItem from "./components/NavItem";
+import Header from "./components/Header";
 
 export const metadata: Metadata = {
   title: "Portfolio - Mike Karl",
@@ -12,9 +15,19 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="de">
-      <div className="bg"/>
       <body>
+        <Header>
+          <NavItem href="/">
+            Logo
+          </NavItem>
+          <Navbar>
+            <NavItem href="/about">About</NavItem>
+            <NavItem href="/projects">Projekte</NavItem>
+            <NavItem href="/contact">Kontakt</NavItem>
+          </Navbar>
+        </Header>
         {children}
+        <div className="bg" />
       </body>
     </html>
   );

app/page.tsx

@@ -1,68 +1,6 @@
 export default function Home() {
   return (
-    <main className="p-8">
+    <main>
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
-
-      <h1 className="text-2xl">Section</h1>
-      <p className="text-lg">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam saepe necessitatibus magni in quis ipsam harum. Provident eveniet doloremque assumenda cupiditate aliquam veniam ab nobis incidunt sit eaque. Quibusdam, perferendis?</p>
     </main>
   );
 }