From d30835a0c8cf480c67468853f28ba56f38afef2d Mon Sep 17 00:00:00 2001
From: Sluijsens <bdslop@gmail.com>
Date: Mon, 17 Aug 2026 13:59:47 +0200
Subject: [PATCH] Plaats foto onder de kop i.p.v. bovenaan op mobiel

De kop "// over" wordt nu los van de paragrafen gepositioneerd, zodat
op mobiel de volgorde kop -> foto -> tekst is in plaats van foto ->
kop -> tekst. Desktop-layout (tekst links, foto rechts naast kop +
paragrafen) blijft ongewijzigd via de grid-rijen/kolommen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../landing/components/AboutSection.tsx       | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/features/landing/components/AboutSection.tsx b/src/features/landing/components/AboutSection.tsx
index 237954b..10ab132 100644
--- a/src/features/landing/components/AboutSection.tsx
+++ b/src/features/landing/components/AboutSection.tsx
@@ -4,26 +4,26 @@ export function AboutSection() {
   return (
     <section id="over" className="py-[88px]">
       <div className="mx-auto max-w-[1080px] px-6">
-        <div className="grid grid-cols-1 items-start gap-12 sm:grid-cols-[1.2fr_0.8fr]">
-          <div className="order-2 sm:order-1">
-            <div className="mb-6">
-              <span className="font-mono block text-sm uppercase tracking-wider text-accent">
-                // over
-              </span>
-              <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
-                Eén ontwikkelaar, korte lijnen
-              </h2>
-            </div>
+        <div className="grid grid-cols-1 items-start gap-12 sm:grid-cols-[1.2fr_0.8fr] sm:grid-rows-[auto_1fr]">
+          <div className="order-1 mb-6 sm:col-start-1 sm:row-start-1 sm:mb-0">
+            <span className="font-mono block text-sm uppercase tracking-wider text-accent">
+              // over
+            </span>
+            <h2 className="font-display mt-3.5 text-3xl font-bold sm:text-4xl">
+              Eén ontwikkelaar, korte lijnen
+            </h2>
+          </div>
+          <div className="font-mono order-2 flex aspect-[4/5] w-full flex-col items-center justify-center gap-2 rounded border border-dashed border-line bg-surface p-6 text-center text-[0.8rem] uppercase tracking-wider text-muted sm:order-3 sm:col-start-2 sm:row-start-1 sm:row-span-2">
+            <span>foto</span>
+            <span>Bryan Slop</span>
+          </div>
+          <div className="order-3 sm:order-2 sm:col-start-1 sm:row-start-2">
             {aboutContent.paragraphs.map((paragraph) => (
               <p key={paragraph} className="mb-4 text-muted">
                 {paragraph}
               </p>
             ))}
           </div>
-          <div className="font-mono order-1 flex aspect-[4/5] w-full flex-col items-center justify-center gap-2 rounded border border-dashed border-line bg-surface p-6 text-center text-[0.8rem] uppercase tracking-wider text-muted sm:order-2">
-            <span>foto</span>
-            <span>Bryan Slop</span>
-          </div>
         </div>
       </div>
     </section>