From c228a5d0e2c29060852dba7c2c52731fc12c6e15 Mon Sep 17 00:00:00 2001
From: Sluijsens <bdslop@gmail.com>
Date: Mon, 17 Aug 2026 20:54:48 +0200
Subject: [PATCH] Maak fotoplaceholder rond, kleiner en met accentkleurige
 border

De fotoplek was een grote rechthoek (aspect-[4/5], volledige
kolombreedte) met een stippellijnrand. Vervangen door een kleinere,
gecentreerde ronde vorm (h-40/w-40, sm: h-48/w-48) met een dikkere
accentkleurige rand en schaduw, passend bij de rest van de site-stijl
(vgl. de accent-line/border-stijl in ContactSection).

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

diff --git a/src/features/landing/components/AboutSection.tsx b/src/features/landing/components/AboutSection.tsx
index 9777afb..349451d 100644
--- a/src/features/landing/components/AboutSection.tsx
+++ b/src/features/landing/components/AboutSection.tsx
@@ -16,9 +16,11 @@ export function AboutSection() {
               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 className="order-2 flex items-center justify-center sm:order-3 sm:col-start-2 sm:row-start-1 sm:row-span-2">
+            <div className="font-mono flex h-40 w-40 flex-col items-center justify-center gap-1 rounded-full border-2 border-accent-line bg-surface text-center text-[0.7rem] uppercase tracking-wider text-muted shadow-lg sm:h-48 sm:w-48">
+              <span>foto</span>
+              <span>Bryan Slop</span>
+            </div>
           </div>
           <div className="order-3 sm:order-2 sm:col-start-1 sm:row-start-2">
             {aboutContent.paragraphs.map((paragraph) => (