From 5347a9ff3bd7c270b5d7f3b7355f91bfc9263579 Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Mon, 16 Feb 2026 00:45:30 +0100
Subject: [PATCH] fix: rebalance about layout and fix missing gaming icon

---
 app/components/About.tsx | 238 +++++++++++++++++++++------------------
 1 file changed, 126 insertions(+), 112 deletions(-)

diff --git a/app/components/About.tsx b/app/components/About.tsx
index be85d0a..955f21a 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { motion, Variants } from "framer-motion";
-import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
+import { Globe, Server, Wrench, Shield, Gamepad2, Gamepad, Code, Activity, Lightbulb } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
@@ -235,69 +235,115 @@ const About = () => {
       className="py-24 px-4 bg-gradient-to-br from-liquid-sky/15 via-liquid-lavender/10 to-liquid-pink/15 relative overflow-hidden"
     >
       <div className="max-w-6xl mx-auto relative z-10">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
-          {/* Text Content */}
-          <motion.div
-            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true, margin: "-100px" }}
-            variants={staggerContainer}
-            className="space-y-8"
-          >
-            <motion.h2
-              variants={fadeInUp}
-              className="text-4xl md:text-5xl font-bold text-stone-900"
-            >
-              {t("title")}
-            </motion.h2>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-start">
+          {/* Left Column: Bio & Hobbies */}
+          <div className="space-y-16">
+            {/* Biography */}
             <motion.div
-              variants={fadeInUp}
-              className="prose prose-stone prose-lg text-stone-700 space-y-4"
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, margin: "-100px" }}
+              variants={staggerContainer}
+              className="space-y-8"
             >
-              {cmsDoc ? (
-                <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
-              ) : (
-                <>
-                  <p>{t("p1")}</p>
-                  <p>{t("p2")}</p>
-                  <p>{t("p3")}</p>
-                </>
-              )}
+              <motion.h2
+                variants={fadeInUp}
+                className="text-4xl md:text-5xl font-bold text-stone-900"
+              >
+                {t("title")}
+              </motion.h2>
               <motion.div
                 variants={fadeInUp}
-                className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-lavender/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm"
+                className="prose prose-stone prose-lg text-stone-700 space-y-4"
               >
-                <div className="flex items-start gap-3">
-                  <Lightbulb size={20} className="text-stone-600 flex-shrink-0 mt-0.5" />
-                  <div>
-                    <p className="text-sm font-semibold text-stone-800 mb-1">
-                      {t("funFactTitle")}
-                    </p>
-                    <p className="text-sm text-stone-700 leading-relaxed">
-                      {t("funFactBody")}
-                    </p>
+                {cmsDoc ? (
+                  <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
+                ) : (
+                  <>
+                    <p>{t("p1")}</p>
+                    <p>{t("p2")}</p>
+                    <p>{t("p3")}</p>
+                  </>
+                )}
+                <motion.div
+                  variants={fadeInUp}
+                  className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-lavender/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm"
+                >
+                  <div className="flex items-start gap-3">
+                    <Lightbulb size={20} className="text-stone-600 flex-shrink-0 mt-0.5" />
+                    <div>
+                      <p className="text-sm font-semibold text-stone-800 mb-1">
+                        {t("funFactTitle")}
+                      </p>
+                      <p className="text-sm text-stone-700 leading-relaxed">
+                        {t("funFactBody")}
+                      </p>
+                    </div>
                   </div>
-                </div>
+                </motion.div>
               </motion.div>
             </motion.div>
-          </motion.div>
 
-          {/* Tech Stack & Hobbies */}
-          <motion.div
-            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true, margin: "-100px" }}
-            variants={staggerContainer}
-            className="space-y-8"
-          >
-            <div>
+            {/* Hobbies Section */}
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, margin: "-100px" }}
+              variants={staggerContainer}
+              className="space-y-6"
+            >
               <motion.h3
                 variants={fadeInUp}
-                className="text-2xl font-bold text-stone-900 mb-6"
+                className="text-2xl font-bold text-stone-900"
+              >
+                {t("hobbiesTitle")}
+              </motion.h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {hobbies.map((hobby, idx) => (
+                  <motion.div
+                    key={`hobby-${hobby.text}-${idx}`}
+                    variants={fadeInUp}
+                    whileHover={{
+                      scale: 1.02,
+                      transition: { duration: 0.4, ease: "easeOut" },
+                    }}
+                    className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
+                      idx % 4 === 0
+                        ? "bg-gradient-to-r from-liquid-mint/25 to-liquid-sky/25 border-liquid-mint/50 hover:border-liquid-mint/70"
+                        : idx % 4 === 1
+                          ? "bg-gradient-to-r from-liquid-coral/25 to-liquid-peach/25 border-liquid-coral/50 hover:border-liquid-coral/70"
+                          : idx % 4 === 2
+                            ? "bg-gradient-to-r from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70"
+                            : "bg-gradient-to-r from-liquid-lime/25 to-liquid-teal/25 border-liquid-lime/50 hover:border-liquid-lime/70"
+                    }`}
+                  >
+                    <hobby.icon size={20} className="text-stone-700" />
+                    <span className="text-stone-800 font-semibold text-sm">
+                      {String(hobby.text)}
+                    </span>
+                  </motion.div>
+                ))}
+              </div>
+            </motion.div>
+          </div>
+
+          {/* Right Column: Tech Stack & Reading */}
+          <div className="space-y-16">
+            {/* Tech Stack */}
+            <motion.div
+              initial="hidden"
+              whileInView="visible"
+              viewport={{ once: true, margin: "-100px" }}
+              variants={staggerContainer}
+              className="space-y-8"
+            >
+              <motion.h3
+                variants={fadeInUp}
+                className="text-2xl font-bold text-stone-900"
               >
                 {t("techStackTitle")}
               </motion.h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 gap-4">
                 {techStack.map((stack, idx) => (
                   <motion.div
                     key={`${stack.category}-${idx}`}
@@ -308,12 +354,12 @@ const About = () => {
                     }}
                     className={`p-5 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
                       idx === 0
-                        ? "bg-gradient-to-br from-liquid-sky/25 to-liquid-mint/25 border-liquid-sky/50 hover:border-liquid-sky/70 hover:from-liquid-sky/35 hover:to-liquid-mint/35"
+                        ? "bg-gradient-to-br from-liquid-sky/20 to-liquid-mint/20 border-liquid-sky/40 hover:border-liquid-sky/60"
                         : idx === 1
-                          ? "bg-gradient-to-br from-liquid-peach/25 to-liquid-coral/25 border-liquid-peach/50 hover:border-liquid-peach/70 hover:from-liquid-peach/35 hover:to-liquid-coral/35"
+                          ? "bg-gradient-to-br from-liquid-peach/20 to-liquid-coral/20 border-liquid-peach/40 hover:border-liquid-peach/60"
                           : idx === 2
-                            ? "bg-gradient-to-br from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70 hover:from-liquid-lavender/35 hover:to-liquid-pink/35"
-                            : "bg-gradient-to-br from-liquid-teal/25 to-liquid-lime/25 border-liquid-teal/50 hover:border-liquid-teal/70 hover:from-liquid-teal/35 hover:to-liquid-lime/35"
+                            ? "bg-gradient-to-br from-liquid-lavender/20 to-liquid-pink/20 border-liquid-lavender/40 hover:border-liquid-lavender/60"
+                            : "bg-gradient-to-br from-liquid-teal/20 to-liquid-lime/20 border-liquid-teal/40 hover:border-liquid-teal/60"
                     }`}
                   >
                     <div className="flex items-center gap-3 mb-3">
@@ -330,12 +376,12 @@ const About = () => {
                           key={`${stack.category}-${item}-${itemIdx}`}
                           className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-800 font-semibold transition-all duration-400 ease-out backdrop-blur-sm ${
                             itemIdx % 4 === 0
-                              ? "bg-liquid-mint/25 border-liquid-mint/50 hover:bg-liquid-mint/35 hover:border-liquid-mint/70"
+                              ? "bg-liquid-mint/20 border-liquid-mint/40 hover:bg-liquid-mint/30"
                               : itemIdx % 4 === 1
-                                ? "bg-liquid-lavender/25 border-liquid-lavender/50 hover:bg-liquid-lavender/35 hover:border-liquid-lavender/70"
+                                ? "bg-liquid-lavender/20 border-liquid-lavender/40 hover:bg-liquid-lavender/30"
                                 : itemIdx % 4 === 2
-                                  ? "bg-liquid-rose/25 border-liquid-rose/50 hover:bg-liquid-rose/35 hover:border-liquid-rose/70"
-                                  : "bg-liquid-sky/25 border-liquid-sky/50 hover:bg-liquid-sky/35 hover:border-liquid-sky/70"
+                                  ? "bg-liquid-rose/20 border-liquid-rose/40 hover:bg-liquid-rose/30"
+                                  : "bg-liquid-sky/20 border-liquid-sky/40 hover:bg-liquid-sky/30"
                           }`}
                         >
                           {String(item)}
@@ -345,61 +391,29 @@ const About = () => {
                   </motion.div>
                 ))}
               </div>
+            </motion.div>
+
+            {/* Reading Section */}
+            <div className="space-y-10">
+              <motion.div
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true }}
+                variants={fadeInUp}
+              >
+                <CurrentlyReading />
+              </motion.div>
+
+              <motion.div
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true }}
+                variants={fadeInUp}
+              >
+                <ReadBooks />
+              </motion.div>
             </div>
-
-            {/* Hobbies & Reading Grid */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-              {/* Hobbies Column */}
-              <div className="space-y-6">
-                <motion.h3
-                  variants={fadeInUp}
-                  className="text-xl font-bold text-stone-900 mb-4"
-                >
-                  {t("hobbiesTitle")}
-                </motion.h3>
-                <div className="space-y-3">
-                  {hobbies.map((hobby, idx) => (
-                    <motion.div
-                      key={`hobby-${hobby.text}-${idx}`}
-                      variants={fadeInUp}
-                      whileHover={{
-                        x: 8,
-                        scale: 1.02,
-                        transition: { duration: 0.4, ease: "easeOut" },
-                      }}
-                    className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-[background-color,border-color,box-shadow] duration-500 ease-out backdrop-blur-md ${
-                        idx === 0
-                          ? "bg-gradient-to-r from-liquid-mint/25 to-liquid-sky/25 border-liquid-mint/50 hover:border-liquid-mint/70 hover:from-liquid-mint/35 hover:to-liquid-sky/35"
-                          : idx === 1
-                            ? "bg-gradient-to-r from-liquid-coral/25 to-liquid-peach/25 border-liquid-coral/50 hover:border-liquid-coral/70 hover:from-liquid-coral/35 hover:to-liquid-peach/35"
-                            : idx === 2
-                              ? "bg-gradient-to-r from-liquid-lavender/25 to-liquid-pink/25 border-liquid-lavender/50 hover:border-liquid-lavender/70 hover:from-liquid-lavender/35 hover:to-liquid-pink/35"
-                              : "bg-gradient-to-r from-liquid-lime/25 to-liquid-teal/25 border-liquid-lime/50 hover:border-liquid-lime/70 hover:from-liquid-lime/35 hover:to-liquid-teal/35"
-                      }`}
-                    >
-                      <hobby.icon size={20} className="text-stone-700" />
-                      <span className="text-stone-800 font-semibold">
-                        {String(hobby.text)}
-                      </span>
-                    </motion.div>
-                  ))}
-                </div>
-              </div>
-
-              {/* Reading Column */}
-              <div className="space-y-6">
-                {/* Currently Reading */}
-                <motion.div variants={fadeInUp}>
-                  <CurrentlyReading />
-                </motion.div>
-
-                {/* Read Books */}
-                <motion.div variants={fadeInUp}>
-                  <ReadBooks />
-                </motion.div>
-              </div>
-            </div>
-          </motion.div>
+          </div>
         </div>
       </div>
     </section>