From e5091d88f6e213ce016544df98776a30d9db0235 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 30 Jun 2026 22:13:06 +0000
Subject: [PATCH] feat(About): photo overlaps text column with gradient blend

---
 app/components/About.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/About.tsx b/app/components/About.tsx
index 488b42b..fa0e07b 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -2,8 +2,8 @@ export function About() {
   return (
     <section id="ueber-bjoern" className="bg-[#111] flex items-stretch w-full">
 
-      {/* Left: text content — flex-[1_0_0] = flex: 1 0 0, no shrink, exactly 50% */}
-      <div className="flex-[1_0_0] flex flex-col gap-4 justify-center px-[5rem] py-8 min-w-0">
+      {/* Left: text content — relative + z-10 so it renders above the overlapping photo */}
+      <div className="flex-[1_0_0] flex flex-col gap-4 justify-center px-[5rem] py-8 min-w-0 relative z-10">
 
         {/* Large serif statement — width-constrained as per design */}
         <p
@@ -57,15 +57,15 @@ export function About() {
         </div>
       </div>
 
-      {/* Right: author photo — slightly wider than 50% */}
-      <div className="flex-[1.4_0_0] relative overflow-hidden" style={{ minHeight: "14rem" }}>
+      {/* Right: author photo — overlaps text column via -ml-32, gradient covers the overlap */}
+      <div className="flex-[1.4_0_0] relative overflow-hidden -ml-32" style={{ minHeight: "14rem" }}>
         <img
           alt="Björn"
           src="/about-author.jpg"
           className="absolute inset-0 w-full h-full object-cover object-center pointer-events-none"
         />
-        {/* Left gradient: blends hard edge into dark background */}
-        <div className="absolute inset-y-0 left-0 w-48 bg-gradient-to-r from-[#111] to-transparent pointer-events-none" />
+        {/* Left gradient: wide enough to cover the text-column overlap */}
+        <div className="absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-[#111] to-transparent pointer-events-none" />
       </div>
 
     </section>