From f56db46d98b2dd372de7310c269639a4b6b11049 Mon Sep 17 00:00:00 2001
From: Mike Karl <karl.mike2002@gmail.com>
Date: Fri, 13 Feb 2026 10:17:13 +0100
Subject: [PATCH] feat: add About, Contact, and Projects pages with basic
 layout refactor(Header): fix header positioning for better layout
 refactor(Home): simplify main structure and adjust section padding

---
 app/about/page.tsx        | 7 +++++++
 app/components/Header.tsx | 2 +-
 app/contact/page.tsx      | 7 +++++++
 app/layout.tsx            | 4 +---
 app/page.tsx              | 8 ++++----
 app/projects/page.tsx     | 7 +++++++
 6 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 app/about/page.tsx
 create mode 100644 app/contact/page.tsx
 create mode 100644 app/projects/page.tsx

diff --git a/app/about/page.tsx b/app/about/page.tsx
new file mode 100644
index 0000000..1c18801
--- /dev/null
+++ b/app/about/page.tsx
@@ -0,0 +1,7 @@
+export default function Page() {
+    return (
+        <main className="min-h-screen flex items-center justify-center">
+            <h1 className="text-3xl font-bold">About</h1>
+        </main>
+    );
+}
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index d59a8b6..fdeeca2 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -3,7 +3,7 @@ export default function Header({
 }: Readonly<{
     children: React.ReactNode;
 }>) {
-    return <header className="fixed flex justify-between w-full z-10 backdrop-blur-sm">
+    return <header className="fixed top-0 flex justify-between w-full z-10 backdrop-blur-sm">
         {children}
     </header>
 }
\ No newline at end of file
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
new file mode 100644
index 0000000..c2e9602
--- /dev/null
+++ b/app/contact/page.tsx
@@ -0,0 +1,7 @@
+export default function Page() {
+    return (
+        <main className="min-h-screen flex items-center justify-center">
+            <h1 className="text-3xl font-bold">Contact</h1>
+        </main>
+    );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 391a640..9425a8a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -30,9 +30,7 @@ export default function RootLayout({
             <Image alt="logo.png" className="mx-4" src={logo} width={70} height={70} />
           </Link>
         </Header>
-        <main className="pt-20">
-          {children}
-        </main>
+        {children}
         <div className="bg" />
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index f3c1493..fd1fff7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -16,8 +16,8 @@ export default function Home() {
   }, []);
 
   return (
-    <>
-      <section className="mx-10 mt-50 ml-50">
+    <main className="min-h-screen">
+      <section className="pl-36 pt-48">
         <h2 className="text-7xl/12 font-light">Mike</h2>
         <h1 className="text-9xl font-bold">Karl</h1>
         <AnimatePresence mode="wait">
@@ -38,7 +38,7 @@ export default function Home() {
         <Link href="https://www.linkedin.com/in/mike-karl-a58925381" className="inline-flex items-center border rounded-lg p-1.5 mt-4 w-fit mr-3 hover:scale-105 active:rotate-2 px-4">Mein LinkedIn
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" className="ml-2 w-8 h-8 fill-white"><path d="M416 32L31.9 32C14.3 32 0 46.5 0 64.3L0 447.7C0 465.5 14.3 480 31.9 480L416 480c17.6 0 32-14.5 32-32.3l0-383.4C448 46.5 433.6 32 416 32zM135.4 416l-66.4 0 0-213.8 66.5 0 0 213.8-.1 0zM102.2 96a38.5 38.5 0 1 1 0 77 38.5 38.5 0 1 1 0-77zM384.3 416l-66.4 0 0-104c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9l0 105.8-66.4 0 0-213.8 63.7 0 0 29.2 .9 0c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9l0 117.2z" /></svg>
         </Link>
-        </section>
-    </>
+      </section>
+    </main>
   );
 }
\ No newline at end of file
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
new file mode 100644
index 0000000..03a3e67
--- /dev/null
+++ b/app/projects/page.tsx
@@ -0,0 +1,7 @@
+export default function Page() {
+    return (
+        <main className="min-h-screen flex items-center justify-center">
+            <h1 className="text-3xl font-bold">Projects</h1>
+        </main>
+    );
+}