From cfd2f9f248e206837a4325aa29a7255a5ad2dc1c Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Mon, 16 Feb 2026 01:05:22 +0100
Subject: [PATCH] style: mega redesign of about section - editorial look

Separated bio and photo into a title row, increased padding to p-12 for all items, and reorganized the bento grid for better flow and spacing.
---
 app/components/About.tsx | 218 ++++++++++++++++++++++++---------------
 1 file changed, 134 insertions(+), 84 deletions(-)

diff --git a/app/components/About.tsx b/app/components/About.tsx
index f0633f5..85f6862 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { BentoGrid, BentoGridItem } from "./ui/BentoGrid";
-import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, MapPin, User, BookOpen, ExternalLink } from "lucide-react";
+import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, MapPin, User, BookOpen, ArrowRight } from "lucide-react";
 import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
 import RichTextClient from "./RichTextClient";
@@ -48,101 +47,152 @@ const About = () => {
   }, [locale]);
 
   return (
-    <section id="about" className="py-24 px-4 bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
-      <div className="max-w-6xl mx-auto">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 md:grid-rows-2">
-          
-          {/* 1. Main Bio & Photo - The big anchor */}
-          <div className="md:col-span-3 md:row-span-1 bg-white dark:bg-stone-900 rounded-[2.5rem] p-8 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col md:flex-row gap-8 items-center">
-            <div className="relative w-48 h-48 md:w-64 md:h-64 shrink-0">
-              <div className="absolute inset-0 bg-liquid-mint rounded-3xl rotate-3 scale-95 opacity-20 animate-pulse"></div>
-              <div className="relative w-full h-full rounded-3xl overflow-hidden border-4 border-white dark:border-stone-800 shadow-xl">
-                <Image 
-                  src="/images/me.jpg" 
-                  alt="Dennis Konkol" 
-                  fill 
-                  className="object-cover"
-                  priority
-                />
+    <section id="about" className="py-32 px-6 bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500 overflow-hidden">
+      <div className="max-w-7xl mx-auto">
+        
+        {/* --- STAGE 1: THE TITLE PAGE (BIO & PHOTO) --- */}
+        <div className="flex flex-col lg:flex-row gap-16 lg:gap-24 items-center mb-32">
+          {/* Large prominent photo */}
+          <motion.div 
+            initial={{ opacity: 0, x: -50 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
+            className="relative w-full max-w-[500px] aspect-[4/5] shrink-0"
+          >
+            <div className="absolute inset-0 bg-liquid-mint/20 rounded-[3rem] -rotate-3 translate-x-4 translate-y-4 blur-2xl"></div>
+            <div className="relative w-full h-full rounded-[2.5rem] overflow-hidden border-8 border-white dark:border-stone-900 shadow-2xl">
+              <Image 
+                src="/images/me.jpg" 
+                alt="Dennis Konkol" 
+                fill 
+                className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
+                priority
+              />
+            </div>
+            {/* Location Tag Floating */}
+            <div className="absolute -bottom-6 -right-6 bg-white dark:bg-stone-800 p-6 rounded-3xl shadow-xl border border-stone-100 dark:border-stone-700 hidden md:block">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 rounded-full bg-liquid-sky/10 flex items-center justify-center">
+                  <MapPin className="text-liquid-sky" size={20} />
+                </div>
+                <div>
+                  <p className="text-[10px] font-bold uppercase tracking-widest text-stone-400">Based in</p>
+                  <p className="font-black text-stone-900 dark:text-stone-50">Osnabrück, GER</p>
+                </div>
               </div>
             </div>
-            <div className="flex-1 space-y-4">
-              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-liquid-mint/10 text-liquid-mint text-[10px] font-black uppercase tracking-widest">
-                <User size={12} /> Who am I
-              </div>
-              <h2 className="text-3xl md:text-5xl font-black text-stone-900 dark:text-stone-50 tracking-tighter">
-                Hi, I&apos;m <span className="text-liquid-mint">Dennis</span>.
+          </motion.div>
+
+          {/* Large Bio Content */}
+          <motion.div 
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="flex-1 space-y-10"
+          >
+            <div className="space-y-4">
+              <span className="text-liquid-mint font-black uppercase tracking-[0.3em] text-xs">A bit about me</span>
+              <h2 className="text-5xl md:text-8xl font-black text-stone-900 dark:text-stone-50 tracking-tighter leading-[0.85]">
+                Digital <br /> Architect.
               </h2>
-              <div className="prose prose-stone dark:prose-invert max-w-none text-stone-600 dark:text-stone-400 text-base leading-relaxed line-clamp-4 md:line-clamp-none">
-                {cmsDoc ? <RichTextClient doc={cmsDoc} /> : <p>{t("p1")} {t("p2")}</p>}
-              </div>
             </div>
-          </div>
-
-          {/* 2. Status & Location */}
-          <div className="md:col-span-1 md:row-span-1 bg-liquid-sky/5 dark:bg-stone-900 rounded-[2.5rem] p-8 border border-liquid-sky/20 dark:border-stone-800/60 flex flex-col justify-between group">
-            <div className="w-12 h-12 rounded-2xl bg-white dark:bg-stone-800 flex items-center justify-center shadow-sm mb-4">
-              <MapPin className="text-liquid-sky" size={24} />
-            </div>
-            <div>
-              <h3 className="font-black text-xl text-stone-900 dark:text-stone-50 mb-1">Osnabrück</h3>
-              <p className="text-sm text-stone-500 dark:text-stone-400">Germany, UTC+1</p>
-            </div>
-            <div className="mt-6 flex items-center gap-2 bg-white/50 dark:bg-black/20 p-3 rounded-2xl border border-white dark:border-stone-800">
-              <div className="w-2 h-2 bg-green-500 rounded-full animate-ping" />
-              <span className="text-xs font-bold uppercase tracking-widest opacity-70">Available Now</span>
-            </div>
-          </div>
-
-          {/* 3. Tech Stack - Bento wide */}
-          <div className="md:col-span-2 md:row-span-1 bg-white dark:bg-stone-900 rounded-[2.5rem] p-8 border border-stone-200/60 dark:border-stone-800/60 shadow-sm overflow-hidden flex flex-col">
-            <div className="flex items-center justify-between mb-6">
-              <h3 className="font-black text-xl text-stone-900 dark:text-stone-50 flex items-center gap-2">
-                <Code className="text-liquid-mint" size={20} /> {t("techStackTitle")}
-              </h3>
-            </div>
-            <div className="flex flex-wrap gap-2 overflow-y-auto pr-2 scrollbar-hide">
-              {techStack.length > 0 ? (
-                techStack.flatMap(cat => cat.items?.map((item: any) => (
-                  <span key={item.id} className="px-4 py-2 bg-stone-50 dark:bg-stone-800 rounded-xl text-xs font-bold border border-stone-100 dark:border-stone-700 text-stone-700 dark:text-stone-300">
-                    {item.name}
-                  </span>
-                )))
+            
+            <div className="prose prose-stone dark:prose-invert max-w-2xl text-xl md:text-2xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
+              {cmsDoc ? (
+                <RichTextClient doc={cmsDoc} />
               ) : (
-                <div className="h-20 w-full bg-stone-50 dark:bg-stone-800 animate-pulse rounded-xl" />
+                <p>
+                  Hey, I&apos;m Dennis. I build performant web and mobile applications with a focus on clean code and exceptional user experience.
+                </p>
               )}
             </div>
-          </div>
 
-          {/* 4. Reading Log - Compact but visual */}
-          <div className="md:col-span-1 md:row-span-1 bg-white dark:bg-stone-900 rounded-[2.5rem] p-8 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col group overflow-hidden">
-            <div className="flex items-center gap-2 mb-6">
-              <BookOpen className="text-liquid-purple" size={20} />
-              <h3 className="font-black text-xl text-stone-900 dark:text-stone-50 uppercase tracking-tighter">Reading</h3>
+            <div className="pt-6">
+              <a href="#contact" className="inline-flex items-center gap-3 text-lg font-black border-b-4 border-liquid-mint pb-2 hover:gap-5 transition-all">
+                LET&apos;S WORK TOGETHER <ArrowRight size={24} />
+              </a>
             </div>
-            <div className="flex-1 overflow-y-auto scrollbar-hide space-y-4">
-              <CurrentlyReading />
-              <ReadBooks />
-            </div>
-          </div>
+          </motion.div>
+        </div>
 
-          {/* 5. Hobbies - Small box */}
-          <div className="md:col-span-1 md:row-span-1 bg-liquid-rose/5 dark:bg-stone-900 rounded-[2.5rem] p-8 border border-liquid-rose/20 dark:border-stone-800/60 flex flex-col justify-between">
-            <div className="flex flex-wrap gap-3">
-              {hobbies.slice(0, 4).map((hobby) => {
-                const Icon = iconMap[hobby.icon] || Lightbulb;
-                return (
-                  <div key={hobby.id} className="p-2 rounded-lg bg-white dark:bg-stone-800 shadow-sm">
-                    <Icon size={18} className="text-liquid-rose" />
+        {/* --- STAGE 2: THE DETAILS GRID (BENTO STYLE) --- */}
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-8">
+          
+          {/* Tech Stack Box */}
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="md:col-span-8 bg-white dark:bg-stone-900 rounded-[3rem] p-12 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
+          >
+            <h3 className="text-3xl font-black text-stone-900 dark:text-stone-50 mb-8 flex items-center gap-3">
+              <Code className="text-liquid-mint" size={32} /> {t("techStackTitle")}
+            </h3>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
+              {techStack.map((cat) => (
+                <div key={cat.id} className="space-y-4">
+                  <h4 className="text-xs font-black uppercase tracking-widest text-stone-400">{cat.name}</h4>
+                  <div className="flex flex-wrap gap-2">
+                    {cat.items?.map((item: any) => (
+                      <span key={item.id} className="px-4 py-2 bg-stone-50 dark:bg-stone-800/50 rounded-xl text-sm font-bold border border-stone-100 dark:border-stone-700/50">
+                        {item.name}
+                      </span>
+                    ))}
                   </div>
-                )
-              })}
+                </div>
+              ))}
             </div>
-            <div className="mt-4">
-              <h3 className="font-black text-lg text-stone-900 dark:text-stone-50 mb-1">{t("hobbiesTitle")}</h3>
-              <p className="text-xs text-stone-500 line-clamp-2">Exploration & Fun</p>
+          </motion.div>
+
+          {/* Reading Log Box */}
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.1 }}
+            className="md:col-span-4 bg-white dark:bg-stone-900 rounded-[3rem] p-12 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col"
+          >
+            <h3 className="text-3xl font-black text-stone-900 dark:text-stone-50 mb-8 flex items-center gap-3 uppercase tracking-tighter">
+              <BookOpen className="text-liquid-purple" size={32} /> Reading
+            </h3>
+            <div className="space-y-10 overflow-y-auto pr-2 scrollbar-hide">
+              <CurrentlyReading />
+              <div className="pt-10 border-t border-stone-100 dark:border-stone-800">
+                <ReadBooks />
+              </div>
             </div>
-          </div>
+          </motion.div>
+
+          {/* Hobbies Box */}
+          <motion.div 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.2 }}
+            className="md:col-span-12 bg-liquid-mint/5 dark:bg-stone-900 rounded-[3rem] p-12 border border-liquid-mint/20 dark:border-stone-800/60"
+          >
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-8">
+              <div className="space-y-4">
+                <h3 className="text-3xl font-black text-stone-900 dark:text-stone-50 flex items-center gap-3">
+                  <Gamepad2 className="text-liquid-purple" size={32} /> {t("hobbiesTitle")}
+                </h3>
+                <p className="text-stone-500 text-lg font-light">The things that inspire me outside of coding.</p>
+              </div>
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 w-full md:w-auto">
+                {hobbies.map((hobby) => {
+                  const Icon = iconMap[hobby.icon] || Lightbulb;
+                  return (
+                    <div key={hobby.id} className="flex items-center gap-3 p-4 bg-white dark:bg-stone-800 rounded-2xl shadow-sm border border-stone-50 dark:border-stone-700">
+                      <Icon size={20} className="text-liquid-mint" />
+                      <span className="text-xs font-bold uppercase tracking-wider">{hobby.title}</span>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          </motion.div>
 
         </div>
       </div>