From b361579e987c3b6c54a496dc41a5ba666f6fecb9 Mon Sep 17 00:00:00 2001
From: Mike Karl <karl.mike2002@gmail.com>
Date: Fri, 13 Feb 2026 15:26:18 +0100
Subject: [PATCH] responsive layout

---
 app/about/page.tsx | 6 +++---
 app/page.tsx       | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/about/page.tsx b/app/about/page.tsx
index f4213ac..a026bca 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -4,7 +4,7 @@ export default function Page() {
     return (
         <main className="min-h-screen flex items-center justify-center flex-col pt-24">
             <h1 className="text-3xl font-bold mb-12">Über mich</h1>
-            <section className="px-24 py-6 w-full">
+            <section className="md:px-24 px-8 py-6 w-full text-justify">
                 <h2 className="text-2xl font-semibold mb-1">Softwareentwickler:</h2>
                 <p>
                     Bei der Softwareentwicklung ist es mein Anspruch, ein System zu bauen, das nicht einfach nur
@@ -28,7 +28,7 @@ export default function Page() {
                     </Link>
                 </p>
             </section>
-            <section className="px-24 py-6 w-full">
+            <section className="md:px-24 px-8 py-6 w-full text-justify">
                 <h2 className="text-2xl font-semibold mb-1">Motorradfahrer:</h2>
                 <p>
                     Der 1. April ist immer einer der besten Tage im Jahr. Die neue Motorradsaison beginnt. Als Kind fuhr
@@ -38,7 +38,7 @@ export default function Page() {
                     mit Sozia.
                 </p>
             </section>
-            <section className="px-24 py-6 w-full">
+            <section className="md:px-24 px-8 py-6 w-full text-justify">
                 <h2 className="text-2xl font-semibold mb-1">Astrofotograf:</h2>
                 <p>
                     Was als P-Seminar während der Oberstufe begannt, entwickelte sich über die Jahre in ein richtiges
diff --git a/app/page.tsx b/app/page.tsx
index 9950e33..195e300 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -16,8 +16,8 @@ export default function Home() {
   }, []);
 
   return (
-    <main className="min-h-screen">
-      <section className="pl-36 pt-48">
+    <main className="min-h-screen flex items-center justify-center flex-col pt-12">
+      <section className="mx-auto w-fit md:w-full md:pl-36">
         <h2 className="text-7xl/12 font-light">Mike</h2>
         <h1 className="text-9xl font-bold">Karl</h1>
         <AnimatePresence mode="wait">