Restructure about page bento layout

app/[locale]/(site)/about/page.tsx

@@ -1,15 +1,5 @@
 import type { Metadata } from "next";
-import {
-  ArrowRight,
-  Blocks,
-  BriefcaseBusiness,
-  Compass,
-  Layers3,
-  MessageSquareMore,
-  Sparkles,
-  Workflow,
-} from "lucide-react";
-import Image from "next/image";
+import { ArrowRight, BriefcaseBusiness, GraduationCap, Layers3, MapPin, Sparkles, Wrench } from "lucide-react";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 
@@ -17,10 +7,8 @@ import { Container } from "@/components/layout/container";
 import { PageHero } from "@/components/layout/page-hero";
 import { SiteLogo } from "@/components/layout/site-logo";
 import { MotionFade } from "@/components/motion-fade";
-import { AppCard } from "@/components/ui/app-card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { CardContent } from "@/components/ui/card";
 import { getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
 import { buildLocalizedMetadata } from "@/lib/metadata";
@@ -56,61 +44,43 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
   ]);
   const siteName = siteSettings.locales[localeKey].siteName;
 
-  const valueItems = [
+  const workItems = [
     {
-      icon: Compass,
-      title: t("valueA"),
-      text: t("valueAText"),
+      period: t("workOnePeriod"),
+      role: t("workOneRole"),
+      company: t("workOneCompany"),
+      text: t("workOneText"),
     },
     {
-      icon: Layers3,
-      title: t("valueB"),
-      text: t("valueBText"),
+      period: t("workTwoPeriod"),
+      role: t("workTwoRole"),
+      company: t("workTwoCompany"),
+      text: t("workTwoText"),
     },
     {
-      icon: MessageSquareMore,
-      title: t("valueC"),
-      text: t("valueCText"),
+      period: t("workThreePeriod"),
+      role: t("workThreeRole"),
+      company: t("workThreeCompany"),
+      text: t("workThreeText"),
     },
   ];
 
-  const processItems = [
+  const educationItems = [
     {
-      icon: Sparkles,
-      title: t("processOne"),
-      text: t("processOneText"),
+      title: t("educationOneTitle"),
+      place: t("educationOnePlace"),
+      text: t("educationOneText"),
     },
     {
-      icon: Blocks,
-      title: t("processTwo"),
-      text: t("processTwoText"),
-    },
-    {
-      icon: Workflow,
-      title: t("processThree"),
-      text: t("processThreeText"),
+      title: t("educationTwoTitle"),
+      place: t("educationTwoPlace"),
+      text: t("educationTwoText"),
     },
   ];
 
-  const statItems = [
-    {
-      value: t("statOneValue"),
-      label: t("statOneLabel"),
-      text: t("statOneText"),
-    },
-    {
-      value: t("statTwoValue"),
-      label: t("statTwoLabel"),
-      text: t("statTwoText"),
-    },
-    {
-      value: t("statThreeValue"),
-      label: t("statThreeLabel"),
-      text: t("statThreeText"),
-    },
-  ];
-
-  const highlightItems = [t("highlightOne"), t("highlightTwo"), t("highlightThree")];
+  const skillItems = [t("skillOne"), t("skillTwo"), t("skillThree"), t("skillFour"), t("skillFive"), t("skillSix")];
+  const toolItems = [t("toolOne"), t("toolTwo"), t("toolThree"), t("toolFour")];
+  const focusItems = [t("focusOne"), t("focusTwo"), t("focusThree")];
 
   return (
     <>
@@ -121,11 +91,10 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
         description={t("intro")}
       />
 
-      <Container className="relative z-10 flex flex-col gap-6 pb-12 lg:pb-16">
+      <Container className="relative z-10 flex flex-col gap-8 pb-12 lg:pb-16">
         <MotionFade delay={0.05}>
-          <section className="grid gap-6 lg:grid-cols-12">
-            <AppCard className="overflow-hidden lg:col-span-7">
-              <CardContent className="p-6 lg:p-8">
+          <section className="grid gap-8 border-b border-border/70 pb-8 lg:grid-cols-12">
+            <div className="lg:col-span-9">
               <Badge
                 variant="outline"
                 className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
@@ -137,7 +106,7 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
                 {t("storyTitle")}
               </h2>
 
-                <div className="mt-6 grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(12rem,15rem)] lg:items-start">
+              <div className="mt-6 grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(15rem,18rem)]">
                 <div className="space-y-4">
                   <p className="text-sm leading-7 text-muted-foreground sm:text-base">
                     {t("storyTextOne")}
@@ -147,11 +116,11 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
                   </p>
                 </div>
 
-                  <div className="grid gap-3">
-                    {highlightItems.map((item) => (
-                      <AppCard key={item} padding="sm" className="text-sm font-medium leading-6 text-foreground/84">
+                <div className="space-y-3">
+                  {focusItems.map((item) => (
+                    <div key={item} className="rounded-nested border border-border/70 bg-surface-2/70 px-4 py-4 text-sm font-medium leading-6 text-foreground/84">
                       {item}
-                      </AppCard>
+                    </div>
                   ))}
                 </div>
               </div>
@@ -174,22 +143,20 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
                   </Link>
                 </Button>
               </div>
-              </CardContent>
-            </AppCard>
+            </div>
 
-            <AppCard className="overflow-hidden lg:col-span-5">
-              <CardContent className="p-5">
-                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-                  <AppCard className="sm:col-span-2 lg:col-span-4">
-                    <CardContent className="p-4">
-                    <div className="flex items-center justify-between gap-4">
+            <aside className="flex flex-col gap-5 lg:col-span-3">
+              <div className="rounded-surface border border-border/70 bg-surface-2/65 p-5">
+                <Badge
+                  variant="outline"
+                  className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
+                >
+                  {t("snapshotEyebrow")}
+                </Badge>
+                <div className="mt-5 flex items-center justify-between gap-4">
                   <div>
-                        <p className="text-xs font-medium uppercase tracking-[0.18em] text-foreground/48">
-                          {t("logoEyebrow")}
-                        </p>
-                        <p className="mt-2 max-w-[16rem] text-sm leading-6 text-muted-foreground">
-                          {t("logoText")}
-                        </p>
+                    <h3 className="text-lg font-semibold text-foreground">{t("snapshotTitle")}</h3>
+                    <p className="mt-2 text-sm leading-6 text-muted-foreground">{t("snapshotText")}</p>
                   </div>
                   <SiteLogo
                     alt={siteName}
@@ -199,142 +166,161 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
                     className="h-10 sm:h-11"
                   />
                 </div>
-                    </CardContent>
-                  </AppCard>
+              </div>
 
-                  <AppCard padding="none" className="overflow-hidden sm:col-span-1 lg:col-span-2">
-                    <div className="relative min-h-[9rem] overflow-hidden rounded-nested">
-                      <Image
-                        src="/uploads/portfolio/demo-cover.svg"
-                        alt={t("galleryAltOne")}
-                        fill
-                        sizes="(min-width: 1024px) 16rem, (min-width: 640px) 50vw, 100vw"
-                        className="object-cover"
-                      />
+              <div className="rounded-surface border border-border/70 bg-background/40 p-5">
+                <div className="flex items-start gap-3">
+                  <MapPin className="mt-0.5 h-4 w-4 text-brand-primary" />
+                  <div>
+                    <p className="text-sm font-semibold text-foreground">{t("locationTitle")}</p>
+                    <p className="mt-1 text-sm leading-6 text-muted-foreground">{t("locationText")}</p>
                   </div>
-                  </AppCard>
-
-                  <AppCard className="min-h-[9rem] sm:col-span-1 lg:col-span-2">
-                    <CardContent className="flex h-full flex-col justify-between p-4">
-                      <div className="flex items-center gap-3 text-foreground/86">
-                        <BriefcaseBusiness className="h-5 w-5 text-brand-primary" />
-                        <span className="text-sm font-medium">{t("availabilityLabel")}</span>
                 </div>
-                      <p className="text-sm leading-6 text-muted-foreground">
-                        {t("availabilityText")}
-                      </p>
-                    </CardContent>
-                  </AppCard>
-
-                  <AppCard padding="none" className="overflow-hidden sm:col-span-2 lg:col-span-4">
-                    <div className="relative min-h-[13rem] overflow-hidden rounded-nested">
-                      <Image
-                        src="/uploads/portfolio/demo-cover.svg"
-                        alt={t("galleryAltTwo")}
-                        fill
-                        sizes="(min-width: 1024px) 28rem, (min-width: 640px) 100vw, 100vw"
-                        className="object-cover"
-                      />
               </div>
-                  </AppCard>
-                </div>
-              </CardContent>
-            </AppCard>
+            </aside>
           </section>
         </MotionFade>
 
         <MotionFade delay={0.1}>
-          <section className="grid gap-6 lg:grid-cols-12">
-            <AppCard className="lg:col-span-3">
-              <CardContent className="flex h-full flex-col p-6">
+          <section className="grid gap-8 border-b border-border/70 pb-8 lg:grid-cols-10">
+            <div className="lg:col-span-4">
+              <div className="flex items-start justify-between gap-4">
+                <div>
                   <Badge
                     variant="outline"
-                  className="w-fit border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
+                    className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
                   >
-                  {t("valuesEyebrow")}
+                    {t("experienceEyebrow")}
                   </Badge>
-                <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground sm:text-4xl">
-                  {t("valuesTitle")}
+                  <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
+                    {t("experienceTitle")}
                   </h2>
-                <p className="mt-4 max-w-[28rem] text-sm leading-7 text-muted-foreground">
-                  {t("valuesIntro")}
-                </p>
-              </CardContent>
-            </AppCard>
-
-            {valueItems.map((item) => {
-              const Icon = item.icon;
-
-              return (
-                <AppCard key={item.title} className="lg:col-span-3">
-                  <CardContent className="p-5">
-                    <div className="flex h-11 w-11 items-center justify-center rounded-full bg-[linear-gradient(135deg,hsl(var(--hero-left)/0.42),hsl(var(--hero-right)/0.26))]">
-                      <Icon className="h-5 w-5 text-foreground/80" />
                 </div>
-                    <h3 className="mt-4 text-lg font-semibold text-foreground">{item.title}</h3>
+                <BriefcaseBusiness className="h-5 w-5 text-brand-primary" />
+              </div>
+
+              <div className="mt-6 space-y-5">
+                {workItems.map((item, index) => (
+                  <div
+                    key={`${item.period}-${item.role}`}
+                    className={index === 0 ? "" : "border-t border-border/70 pt-5"}
+                  >
+                    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-foreground/50">
+                      {item.period}
+                    </p>
+                    <h3 className="mt-3 text-lg font-semibold text-foreground">{item.role}</h3>
+                    <p className="mt-1 text-sm font-medium text-foreground/72">{item.company}</p>
                     <p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
-                  </CardContent>
-                </AppCard>
-              );
-            })}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="lg:col-span-6">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <Badge
+                    variant="outline"
+                    className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
+                  >
+                    {t("educationEyebrow")}
+                  </Badge>
+                  <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
+                    {t("educationTitle")}
+                  </h2>
+                  <p className="mt-4 max-w-[34rem] text-sm leading-7 text-muted-foreground">
+                    {t("educationIntro")}
+                  </p>
+                </div>
+                <GraduationCap className="h-5 w-5 text-brand-primary" />
+              </div>
+
+              <div className="mt-6 grid gap-6 md:grid-cols-2">
+                {educationItems.map((item) => (
+                  <div key={item.title} className="rounded-surface border border-border/70 bg-surface-2/60 p-5">
+                    <p className="text-sm font-semibold uppercase tracking-[0.16em] text-foreground/50">
+                      {item.place}
+                    </p>
+                    <h3 className="mt-3 text-xl font-semibold text-foreground">{item.title}</h3>
+                    <p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
           </section>
         </MotionFade>
 
         <MotionFade delay={0.15}>
-          <section className="grid gap-6 lg:grid-cols-12">
-            <AppCard className="lg:col-span-4">
-              <CardContent className="flex h-full flex-col p-6 lg:p-7">
+          <section className="grid gap-8 lg:grid-cols-10">
+            <div className="lg:col-span-6">
+              <div className="flex items-start justify-between gap-4">
+                <div>
                   <Badge
                     variant="outline"
-                  className="w-fit border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
+                    className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
                   >
-                  {t("processEyebrow")}
+                    {t("skillsEyebrow")}
                   </Badge>
-                <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground sm:text-4xl">
-                  {t("processTitle")}
+                  <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground">
+                    {t("skillsTitle")}
                   </h2>
-                <p className="mt-4 max-w-[28rem] text-sm leading-7 text-muted-foreground">
-                  {t("processIntro")}
+                  <p className="mt-4 max-w-[34rem] text-sm leading-7 text-muted-foreground">
+                    {t("skillsIntro")}
                   </p>
+                </div>
+                <Layers3 className="h-5 w-5 text-brand-primary" />
+              </div>
 
-                <div className="mt-6 grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
-                  {statItems.map((item) => (
-                    <AppCard key={item.label} layer="single" padding="sm" className="shadow-none">
-                      <p className="text-3xl font-semibold tracking-[-0.05em] text-foreground">
-                        {item.value}
-                      </p>
-                      <h3 className="mt-2 text-sm font-semibold uppercase tracking-[0.14em] text-foreground/58">
-                        {item.label}
-                      </h3>
-                      <p className="mt-2 text-sm leading-6 text-muted-foreground">{item.text}</p>
-                    </AppCard>
+              <div className="mt-6 flex flex-wrap gap-3">
+                {skillItems.map((item) => (
+                  <span
+                    key={item}
+                    className="inline-flex items-center rounded-pill border border-border/70 bg-surface-2/70 px-4 py-2 text-sm font-medium text-foreground/84"
+                  >
+                    {item}
+                  </span>
                 ))}
               </div>
-              </CardContent>
-            </AppCard>
-
-            <div className="grid gap-6 lg:col-span-8 lg:grid-cols-2">
-              {processItems.map((item, index) => {
-                const Icon = item.icon;
-                const isWide = index === 0;
-
-                return (
-                  <AppCard key={item.title} className={isWide ? "lg:col-span-2" : ""}>
-                    <CardContent className="p-5 lg:p-6">
-                      <div className="flex items-center justify-between gap-4">
-                        <span className="inline-flex h-8 min-w-[2.5rem] items-center justify-center rounded-pill border border-border/70 px-3 text-xs font-semibold tracking-[0.18em] text-foreground/60">
-                          0{index + 1}
-                        </span>
-                        <Icon className="h-5 w-5 text-brand-primary" />
             </div>
-                      <h3 className="mt-5 text-xl font-semibold text-foreground">{item.title}</h3>
-                      <p className="mt-3 max-w-[34rem] text-sm leading-6 text-muted-foreground">
-                        {item.text}
-                      </p>
-                    </CardContent>
-                  </AppCard>
-                );
-              })}
+
+            <div className="lg:col-span-2">
+              <div className="flex items-center justify-between gap-3">
+                <Badge
+                  variant="outline"
+                  className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
+                >
+                  {t("toolsEyebrow")}
+                </Badge>
+                <Wrench className="h-4 w-4 text-brand-primary" />
+              </div>
+
+              <div className="mt-5 space-y-3">
+                {toolItems.map((item) => (
+                  <div key={item} className="rounded-surface border border-border/70 bg-surface-2/60 px-4 py-3 text-sm font-medium text-foreground/84">
+                    {item}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="lg:col-span-2">
+              <div className="flex items-center justify-between gap-3">
+                <Badge
+                  variant="outline"
+                  className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
+                >
+                  {t("focusEyebrow")}
+                </Badge>
+                <Sparkles className="h-4 w-4 text-brand-primary" />
+              </div>
+
+              <div className="mt-5 space-y-3">
+                {focusItems.map((item) => (
+                  <div key={item} className="rounded-surface border border-border/70 bg-background/40 px-4 py-4 text-sm leading-6 text-foreground/84">
+                    {item}
+                  </div>
+                ))}
+              </div>
             </div>
           </section>
         </MotionFade>

messages/ar.json

@@ -66,49 +66,58 @@
     "title": "من أنا",
     "heroBadge": "خلّيني عرّفك عليّي",
     "heroTitle": "معلومات عني",
-    "intro": "أبني تجارب رقمية واضحة للعلامات والمنتجات والفرق، مع تركيز على الهوية والواجهة والبنية القابلة للتوسع.",
-    "storyEyebrow": "نبذة سريعة",
-    "storyTitle": "أحوّل الأفكار المبعثرة إلى حضور رقمي مرتب وواضح.",
-    "storyTextOne": "هذا النص مؤقت حالياً. الفكرة هنا إن الصفحة تعطي انطباع جاهز: مين أنا، كيف أشتغل، وكيف أقدر أبني تجربة متماسكة من أول الفكرة لآخر الإطلاق.",
-    "storyTextTwo": "حالياً وضعت محتوى وهمي قريب من النبرة النهائية، حتى يصير أسهل استبداله لاحقاً بمحتوى فعلي بدون الرجوع لتعديل التصميم من جديد.",
-    "highlightOne": "هوية أوضح ومسار استخدام أنظف.",
-    "highlightTwo": "واجهة منظمة ومحتوى أسهل بالتبديل.",
-    "highlightThree": "بنية مناسبة للتطوير المستقبلي.",
+    "intro": "لمحة سريعة عن خبرتي، دراستي، والمهارات والأدوات التي أستخدمها في شغلي اليومي.",
+    "storyEyebrow": "نبذة شخصية",
+    "storyTitle": "أشتغل على بناء حضور رقمي واضح، مرتب، وقابل للنمو.",
+    "storyTextOne": "أنا محمد، أركز على الواجهات، الهوية، وتنظيم التجربة بشكل يخلي المنتج أو الخدمة مفهومة من أول نظرة. أحب الشغل الذي يجمع بين الوضوح البصري والتنفيذ العملي بدون تعقيد زائد.",
+    "storyTextTwo": "هذه الصفحة صارت الآن مهيأة لتعرض قصتي المهنية بشكل مرن: أين عملت، ماذا درست، وما هي المهارات والأدوات التي أعتمد عليها يومياً. كل النصوص الحالية قابلة للتبديل بسهولة لاحقاً.",
+    "focusOne": "أهتم بالوضوح قبل الزخرفة.",
+    "focusTwo": "أفضل الأنظمة القابلة للتوسع والصيانة.",
+    "focusThree": "أشتغل بطريقة مباشرة وسريعة المراجعة.",
     "primaryCta": "تواصل معي",
     "secondaryCta": "شوف معرض الأعمال",
-    "logoEyebrow": "الهوية الحالية",
-    "logoText": "الشعار مأخوذ من إعدادات الموقع حتى تبقى الصفحة متطابقة مع الهوية الحالية.",
-    "galleryAltOne": "صورة وهمية رئيسية لقسم معلومات عني",
-    "galleryAltTwo": "صورة وهمية ثانوية لقسم معلومات عني",
-    "availabilityLabel": "الوضع الحالي",
-    "availabilityText": "متاح حالياً لاستقبال مشاريع جديدة، وهذه الجملة أيضاً placeholder قابل للتعديل.",
-    "statOneValue": "06+",
-    "statOneLabel": "سنوات تقريبية",
-    "statOneText": "رقم تجريبي ليوضح مكان الخبرة أو عدد السنوات بعد تعبئة المحتوى الحقيقي.",
-    "statTwoValue": "24",
-    "statTwoLabel": "مشاريع مختارة",
-    "statTwoText": "مكان مخصص لعدد المشاريع أو العملاء أو الإطلاقات حسب الصياغة النهائية.",
-    "statThreeValue": "03",
-    "statThreeLabel": "مسارات خدمة",
-    "statThreeText": "يمكن تحويل هذا الرقم لاحقاً إلى تخصصات أو منتجات أو مجالات عمل رئيسية.",
-    "valuesEyebrow": "طريقة الشغل",
-    "valuesTitle": "كيف أعمل",
-    "valuesIntro": "هذا القسم صار جاهز لعرض المبادئ الأساسية بشكل سريع وواضح بدل فقرة نصية طويلة.",
-    "valueA": "الاستراتيجية أولاً",
-    "valueAText": "أبدأ بتحديد الهدف، الجمهور، وحدود النطاق حتى ما يتحول التنفيذ إلى تخمين.",
-    "valueB": "أنظمة نظيفة",
-    "valueBText": "أبني مكونات قابلة للصيانة والتوسعة حتى يظل المشروع مرتب بعد الإطلاق.",
-    "valueC": "تعاون قريب",
-    "valueCText": "أفضل دورات قصيرة وملاحظات مباشرة حتى يظل القرار واضحاً والنتيجة أدق.",
-    "processEyebrow": "من البداية للنهاية",
-    "processTitle": "آلية العمل",
-    "processIntro": "قسم مرتب يشرح الرحلة بثلاث خطوات سريعة، وبإمكانك لاحقاً تعديله حسب طريقتك الفعلية.",
-    "processOne": "اكتشاف وتحديد الهدف",
-    "processOneText": "نجمع الصورة العامة، نحدد الأولويات، ونرتب المطلوب قبل أي قرار بصري أو تقني.",
-    "processTwo": "تصميم ونمذجة أولية",
-    "processTwoText": "أصيغ الاتجاه العام، أبني تصور واجهات، وأجهز أساس بصري يسهّل بقية التنفيذ.",
-    "processThree": "بناء واختبار وإطلاق",
-    "processThreeText": "بعد تثبيت الاتجاه، يتحول العمل إلى تنفيذ منظم، مراجعة سريعة، ثم إطلاق جاهز."
+    "snapshotEyebrow": "حالياً",
+    "snapshotTitle": "أبني من برلين",
+    "snapshotText": "أشتغل عن بعد ومع فرق مختلفة، مع تركيز على المواقع، الواجهات، والأنظمة الصغيرة المرنة.",
+    "locationTitle": "القاعدة الحالية",
+    "locationText": "برلين، ألمانيا، مع قابلية للعمل مع فرق محلية أو عن بعد.",
+    "experienceEyebrow": "أين اشتغلت",
+    "experienceTitle": "خبرتي العملية",
+    "workOnePeriod": "2024 - الآن",
+    "workOneRole": "Frontend Developer",
+    "workOneCompany": "استوديو رقمي أو شركة منتج",
+    "workOneText": "مكان مخصص لذكر آخر جهة عمل، طبيعة المسؤوليات، ونوع المشاريع التي اشتغلت عليها.",
+    "workTwoPeriod": "2022 - 2024",
+    "workTwoRole": "UI Designer",
+    "workTwoCompany": "وكالة أو فريق داخلي",
+    "workTwoText": "هنا يمكن ذكر دور سابق يوضح المزج بين التصميم والتنفيذ أو بين البراند والواجهات.",
+    "workThreePeriod": "قبل ذلك",
+    "workThreeRole": "Freelance / Contract Work",
+    "workThreeCompany": "عمل حر أو تعاونات مستقلة",
+    "workThreeText": "خانة مناسبة لإضافة مشاريع خاصة، تعاونات قصيرة، أو مراحل انتقالية مهمة في المسار.",
+    "educationEyebrow": "شو درست",
+    "educationTitle": "الخلفية الدراسية",
+    "educationIntro": "هذا القسم مخصص لوضع الدراسة الأكاديمية أو الدورات المركزة التي أثرت على طريقة التفكير والشغل.",
+    "educationOneTitle": "اسم التخصص أو الشهادة",
+    "educationOnePlace": "اسم الجامعة أو المعهد",
+    "educationOneText": "وصف قصير يوضح ما الذي درسته فعلياً، وكيف انعكس ذلك لاحقاً على شغلك أو على طريقة تحليلك للمشاريع.",
+    "educationTwoTitle": "دورات أو تدريب متخصص",
+    "educationTwoPlace": "منصة أو جهة تدريب",
+    "educationTwoText": "مكان مناسب لذكر أي دراسة مكملة، تدريب عملي، أو برنامج صقل مهارات أخذته لاحقاً.",
+    "skillsEyebrow": "مهاراتي",
+    "skillsTitle": "المهارات التي أركز عليها",
+    "skillsIntro": "كتلة واسعة لعرض المهارات الأساسية التي تريد إظهارها بشكل سريع وواضح وقابل للتحديث.",
+    "skillOne": "تصميم واجهات",
+    "skillTwo": "بناء Design Systems",
+    "skillThree": "Frontend Architecture",
+    "skillFour": "تحويل الأفكار إلى صفحات واضحة",
+    "skillFive": "تنظيم المحتوى والتسلسل البصري",
+    "skillSix": "التعاون السريع مع العملاء والفرق",
+    "toolsEyebrow": "أدواتي",
+    "toolOne": "Figma",
+    "toolTwo": "Next.js",
+    "toolThree": "Tailwind CSS",
+    "toolFour": "WordPress"
   },
   "contactPage": {
     "title": "تواصل",

messages/de.json

@@ -66,49 +66,58 @@
     "title": "Über mich",
     "heroBadge": "Mehr über mich",
     "heroTitle": "Über mich",
-    "intro": "Ich baue klare digitale Erlebnisse für Marken, Produkte und Teams, mit Fokus auf Identität, Interface Qualität und skalierbare Struktur.",
-    "storyEyebrow": "Kurzprofil",
-    "storyTitle": "Ich verwandle verstreute Ideen in einen klaren und strukturierten digitalen Auftritt.",
-    "storyTextOne": "Das ist vorerst Platzhaltertext. Ziel ist eine Seite, die fast fertig wirkt: wer ich bin, wie ich arbeite und wie aus einer Idee ein stimmiger Launch wird.",
-    "storyTextTwo": "Der aktuelle Inhalt ist bewusst nah an einer finalen Tonalität, damit echter Text später ohne neues visuelles Rework eingesetzt werden kann.",
-    "highlightOne": "Klarere Identität und sauberer Nutzerfluss.",
-    "highlightTwo": "Geordnete Oberfläche und leicht austauschbarer Content.",
-    "highlightThree": "Struktur vorbereitet für spätere Weiterentwicklung.",
+    "intro": "Ein schneller Überblick über meine Erfahrung, Ausbildung sowie die Skills und Tools, die ich in der täglichen Arbeit nutze.",
+    "storyEyebrow": "Persönlicher Überblick",
+    "storyTitle": "Ich baue digitale Präsenz, die klar, geordnet und bereit zum Wachsen ist.",
+    "storyTextOne": "Ich bin Mohamad und arbeite mit Fokus auf Interfaces, Identität und klar strukturierte Nutzererlebnisse. Mich interessiert Arbeit, die visuelle Klarheit mit praktischer Umsetzung verbindet.",
+    "storyTextTwo": "Diese Seite ist jetzt so aufgebaut, dass sie meine berufliche Geschichte flexibel zeigen kann: wo ich gearbeitet habe, was ich studiert habe und welche Skills und Tools ich am häufigsten nutze.",
+    "focusOne": "Klarheit vor Dekoration.",
+    "focusTwo": "Systeme, die skalieren und wartbar bleiben.",
+    "focusThree": "Direkte Zusammenarbeit mit schnellen Feedback Schleifen.",
     "primaryCta": "Kontakt aufnehmen",
     "secondaryCta": "Portfolio ansehen",
-    "logoEyebrow": "Aktuelle Identität",
-    "logoText": "Das Logo wird aus den Site Settings geladen, damit die Seite mit der aktuellen Markenbasis übereinstimmt.",
-    "galleryAltOne": "Primäres Platzhalterbild für die Über mich Seite",
-    "galleryAltTwo": "Sekundäres Platzhalterbild für die Über mich Seite",
-    "availabilityLabel": "Aktueller Status",
-    "availabilityText": "Aktuell offen für neue Projekte, und auch diese Zeile ist als Platzhalter für später gedacht.",
-    "statOneValue": "06+",
-    "statOneLabel": "Jahre grob",
-    "statOneText": "Ein Platzhalter für Erfahrung oder Jahre in der Praxis, sobald die echten Inhalte feststehen.",
-    "statTwoValue": "24",
-    "statTwoLabel": "Ausgewählte Projekte",
-    "statTwoText": "Ein flexibler Platz für Projekte, Kunden, Launches oder einen später stärkeren Nachweis.",
-    "statThreeValue": "03",
-    "statThreeLabel": "Leistungsfelder",
-    "statThreeText": "Später kann das in Spezialisierungen, Produktlinien oder Kernbereiche umgewandelt werden.",
-    "valuesEyebrow": "Arbeitsweise",
-    "valuesTitle": "Wie ich arbeite",
-    "valuesIntro": "Dieser Bereich ist jetzt so aufgebaut, dass die Grundprinzipien schnell erfassbar sind statt in einem langen Absatz zu verschwinden.",
-    "valueA": "Strategie zuerst",
-    "valueAText": "Ich beginne mit Ziel, Zielgruppe und Scope, damit die Umsetzung nicht in Vermutungen abgleitet.",
-    "valueB": "Saubere Systeme",
-    "valueBText": "Ich baue wartbare Komponenten und ein klares System, das nach dem Launch weiter wachsen kann.",
-    "valueC": "Enge Zusammenarbeit",
-    "valueCText": "Ich arbeite lieber in kurzen Schleifen mit direktem Feedback, damit Entscheidungen klar bleiben.",
-    "processEyebrow": "Von Start bis Launch",
-    "processTitle": "Mein Ablauf",
-    "processIntro": "Ein kompakter Drei Schritte Ablauf, der sich später mit deinem echten Prozess ersetzen lässt ohne den Bereich neu zu gestalten.",
-    "processOne": "Discovery und Zieldefinition",
-    "processOneText": "Wir ordnen das Gesamtbild, priorisieren die Anforderungen und klären das Ziel vor der visuellen oder technischen Arbeit.",
-    "processTwo": "Design und Prototyping",
-    "processTwoText": "Ich forme die Richtung, entwickle erste Interface Ideen und setze ein visuelles System für die Umsetzung auf.",
-    "processThree": "Build, Test und Launch",
-    "processThreeText": "Sobald die Richtung steht, geht die Arbeit in strukturierte Umsetzung, Review und Launch Vorbereitung über."
+    "snapshotEyebrow": "Aktuell",
+    "snapshotTitle": "Ich arbeite aus Berlin",
+    "snapshotText": "Ich arbeite remote und mit verteilten Teams, mit Fokus auf Websites, Interfaces und flexible kleine Systeme.",
+    "locationTitle": "Aktueller Standort",
+    "locationText": "Berlin, Deutschland, mit Offenheit für lokale und remote Zusammenarbeit.",
+    "experienceEyebrow": "Wo ich gearbeitet habe",
+    "experienceTitle": "Berufserfahrung",
+    "workOnePeriod": "2024 - heute",
+    "workOneRole": "Frontend Developer",
+    "workOneCompany": "Digital Studio oder Produktfirma",
+    "workOneText": "Hier kann die aktuelle oder letzte Position mit Verantwortung und Projektart eingetragen werden.",
+    "workTwoPeriod": "2022 - 2024",
+    "workTwoRole": "UI Designer",
+    "workTwoCompany": "Agentur oder internes Team",
+    "workTwoText": "Ein früherer Schritt, der die Verbindung zwischen Design und Umsetzung oder zwischen Branding und Interface Arbeit zeigt.",
+    "workThreePeriod": "Davor",
+    "workThreeRole": "Freelance / Contract Work",
+    "workThreeCompany": "Unabhängige Zusammenarbeit",
+    "workThreeText": "Ein guter Platz für freie Projekte, Kooperationen oder wichtige Übergangsphasen im Werdegang.",
+    "educationEyebrow": "Was ich studiert habe",
+    "educationTitle": "Ausbildung und Studium",
+    "educationIntro": "Dieser Bereich ist für Studium oder fokussierte Weiterbildungen gedacht, die meine Denkweise und Arbeitsweise geprägt haben.",
+    "educationOneTitle": "Studiengang oder Abschluss",
+    "educationOnePlace": "Universität oder Institut",
+    "educationOneText": "Eine kurze Beschreibung davon, was ich tatsächlich gelernt habe und wie es später meinen Blick auf Projekte beeinflusst hat.",
+    "educationTwoTitle": "Kurse oder spezialisiertes Training",
+    "educationTwoPlace": "Plattform oder Trainingsanbieter",
+    "educationTwoText": "Ein geeigneter Platz für ergänzende Weiterbildung, praxisnahes Training oder Programme zur Vertiefung meiner Skills.",
+    "skillsEyebrow": "Skills",
+    "skillsTitle": "Worauf ich mich konzentriere",
+    "skillsIntro": "Ein breiter Block für die wichtigsten Fähigkeiten, die schnell, klar und später leicht aktualisierbar gezeigt werden sollen.",
+    "skillOne": "Interface Design",
+    "skillTwo": "Design Systems",
+    "skillThree": "Frontend Architektur",
+    "skillFour": "Ideen in klare Seiten übersetzen",
+    "skillFive": "Content Struktur und visuelle Hierarchie",
+    "skillSix": "Schnelle Zusammenarbeit mit Kunden und Teams",
+    "toolsEyebrow": "Tools",
+    "toolOne": "Figma",
+    "toolTwo": "Next.js",
+    "toolThree": "Tailwind CSS",
+    "toolFour": "WordPress"
   },
   "contactPage": {
     "title": "Kontakt",

messages/en.json

@@ -66,49 +66,58 @@
     "title": "About",
     "heroBadge": "A bit more about me",
     "heroTitle": "About me",
-    "intro": "I build clear digital experiences for brands, products, and teams, with focus on identity, interface quality, and scalable structure.",
-    "storyEyebrow": "Quick overview",
-    "storyTitle": "I turn scattered ideas into a clear and structured digital presence.",
-    "storyTextOne": "This is placeholder copy for now. The goal is to make the page feel nearly production-ready: who I am, how I work, and how I shape a cohesive experience from concept to launch.",
-    "storyTextTwo": "The current content is intentionally close to the final tone, so replacing it later with real copy should not require another visual rewrite.",
-    "highlightOne": "Sharper identity and cleaner user flow.",
-    "highlightTwo": "Organized interface and easy-to-update content.",
-    "highlightThree": "Structure prepared for future iteration.",
+    "intro": "A quick overview of my experience, education, and the skills and tools I rely on in day-to-day work.",
+    "storyEyebrow": "Personal overview",
+    "storyTitle": "I build digital presence that is clear, structured, and ready to grow.",
+    "storyTextOne": "I am Mohamad, focused on interfaces, identity, and shaping experiences that feel understandable from the first impression. I like work that connects visual clarity with practical execution.",
+    "storyTextTwo": "This page is now structured to present my professional story in a flexible way: where I worked, what I studied, and which skills and tools I use most often. The copy can be replaced easily later.",
+    "focusOne": "Clarity before decoration.",
+    "focusTwo": "Systems that scale and stay maintainable.",
+    "focusThree": "Direct work with fast review cycles.",
     "primaryCta": "Contact me",
     "secondaryCta": "View portfolio",
-    "logoEyebrow": "Current identity",
-    "logoText": "The logo is pulled from site settings so the page stays aligned with the current brand setup.",
-    "galleryAltOne": "Primary placeholder visual for the about page",
-    "galleryAltTwo": "Secondary placeholder visual for the about page",
-    "availabilityLabel": "Current status",
-    "availabilityText": "Available for new projects at the moment, and this line is also a placeholder ready for replacement.",
-    "statOneValue": "06+",
-    "statOneLabel": "Approx. years",
-    "statOneText": "A placeholder metric for experience or years in practice once the real content is ready.",
-    "statTwoValue": "24",
-    "statTwoLabel": "Selected projects",
-    "statTwoText": "A flexible slot for projects, clients, launches, or any stronger proof point later on.",
-    "statThreeValue": "03",
-    "statThreeLabel": "Service tracks",
-    "statThreeText": "This can later become specialties, product lines, or core work streams.",
-    "valuesEyebrow": "Work style",
-    "valuesTitle": "How I work",
-    "valuesIntro": "This section is now structured to present core principles quickly instead of relying on one long paragraph.",
-    "valueA": "Strategy first",
-    "valueAText": "I start by clarifying goals, audience, and scope so execution does not drift into guesswork.",
-    "valueB": "Clean systems",
-    "valueBText": "I build maintainable components and a clear system that can evolve after launch.",
-    "valueC": "Close collaboration",
-    "valueCText": "I prefer short loops and direct feedback so decisions stay sharp and momentum stays high.",
-    "processEyebrow": "From start to launch",
-    "processTitle": "My process",
-    "processIntro": "A compact three-step flow that can later be replaced with your exact process without redesigning the section.",
-    "processOne": "Discovery and goal definition",
-    "processOneText": "We frame the full picture, align priorities, and define the target before visual or technical work starts.",
-    "processTwo": "Design and prototyping",
-    "processTwoText": "I shape the direction, build interface concepts, and establish a visual system that supports implementation.",
-    "processThree": "Build, test, and launch",
-    "processThreeText": "Once the direction is locked, the work moves into structured implementation, review, and launch readiness."
+    "snapshotEyebrow": "Current",
+    "snapshotTitle": "Building from Berlin",
+    "snapshotText": "I work remotely and with distributed teams, focused on websites, interfaces, and flexible small systems.",
+    "locationTitle": "Current base",
+    "locationText": "Berlin, Germany, with flexibility to work with local and remote teams.",
+    "experienceEyebrow": "Where I worked",
+    "experienceTitle": "Work experience",
+    "workOnePeriod": "2024 - now",
+    "workOneRole": "Frontend Developer",
+    "workOneCompany": "Digital studio or product company",
+    "workOneText": "Use this slot for the latest role, the responsibilities, and the types of projects handled there.",
+    "workTwoPeriod": "2022 - 2024",
+    "workTwoRole": "UI Designer",
+    "workTwoCompany": "Agency or in-house team",
+    "workTwoText": "A previous role that shows the overlap between design and implementation or between branding and interface work.",
+    "workThreePeriod": "Before that",
+    "workThreeRole": "Freelance / Contract Work",
+    "workThreeCompany": "Independent collaborations",
+    "workThreeText": "A good place for personal projects, contract work, or key transition stages in the overall path.",
+    "educationEyebrow": "What I studied",
+    "educationTitle": "Educational background",
+    "educationIntro": "This block is meant for academic study or focused learning tracks that shaped the way I think and work.",
+    "educationOneTitle": "Degree or field of study",
+    "educationOnePlace": "University or institute",
+    "educationOneText": "A short description of what I actually studied and how it later influenced the way I approach projects.",
+    "educationTwoTitle": "Courses or specialized training",
+    "educationTwoPlace": "Platform or training provider",
+    "educationTwoText": "A good place for follow-up learning, hands-on training, or a program that sharpened my skills later on.",
+    "skillsEyebrow": "Skills",
+    "skillsTitle": "Skills I focus on",
+    "skillsIntro": "A wide block for listing the core skills you want to highlight in a quick and update-friendly way.",
+    "skillOne": "Interface design",
+    "skillTwo": "Design systems",
+    "skillThree": "Frontend architecture",
+    "skillFour": "Turning ideas into clear pages",
+    "skillFive": "Content structure and visual hierarchy",
+    "skillSix": "Fast collaboration with clients and teams",
+    "toolsEyebrow": "Tools",
+    "toolOne": "Figma",
+    "toolTwo": "Next.js",
+    "toolThree": "Tailwind CSS",
+    "toolFour": "WordPress"
   },
   "contactPage": {
     "title": "Contact",