From fa1831644a8631c82ec31b87a8d161678de496f7 Mon Sep 17 00:00:00 2001
From: boutmoun123 <petersalamoun2004@gmail.com>
Date: Wed, 29 Apr 2026 20:36:53 +0300
Subject: [PATCH] Improve mobile name layout

---
 app/portfolio.css        | 54 ++++++++++++++++++++++++++++++++++++++--
 components/home-page.tsx | 12 ++++++++-
 components/navbar.tsx    | 24 ++++++++++++------
 3 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/app/portfolio.css b/app/portfolio.css
index f724c2c..e9f5b7f 100644
--- a/app/portfolio.css
+++ b/app/portfolio.css
@@ -249,6 +249,18 @@
     line-height: 1.08;
   }
 
+  .navbar-brand-mobile,
+  .hero-title-mobile-lines {
+    display: flex;
+    flex-direction: column;
+    gap: 0.08em;
+  }
+
+  .navbar-brand-mobile span,
+  .hero-title-mobile-lines span {
+    display: block;
+  }
+
   @media (min-width: 1024px) {
     .type-hero-title-latin {
       font-size: var(--text-hero-title-latin);
@@ -648,6 +660,39 @@
   }
 
   @media (max-width: 767px) {
+    .navbar-layout {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.875rem;
+    }
+
+    .navbar-brand-link {
+      max-width: none;
+    }
+
+    .navbar-brand-lockup {
+      justify-content: space-between;
+      gap: 0.875rem;
+    }
+
+    .navbar-brand-copy {
+      flex: 1 1 auto;
+    }
+
+    .navbar-logo-shell {
+      padding: 0.45rem;
+      border-radius: 18px;
+    }
+
+    .navbar-logo-image {
+      height: 52px;
+      width: 52px;
+    }
+
+    .navbar-mobile-controls {
+      align-self: flex-start;
+    }
+
     .site-container {
       padding-left: 1rem;
       padding-right: 1rem;
@@ -673,7 +718,8 @@
     }
 
     .navbar-shell .type-brand {
-      font-size: clamp(24px, 8vw, 30px);
+      font-size: clamp(25px, 8.2vw, 32px);
+      line-height: 1.03;
     }
 
     .navbar-shell .type-label {
@@ -687,6 +733,10 @@
       font-size: clamp(28px, 9vw, 42px);
     }
 
+    .hero-title-mobile-lines {
+      text-wrap: balance;
+    }
+
     .type-section-title {
       font-size: clamp(24px, 7vw, 32px);
     }
@@ -755,7 +805,7 @@
     }
 
     .navbar-shell .type-brand {
-      font-size: clamp(20px, 7.2vw, 26px);
+      font-size: clamp(22px, 7.4vw, 28px);
     }
 
     .contact-card {
diff --git a/components/home-page.tsx b/components/home-page.tsx
index 8e5b43a..98799f7 100644
--- a/components/home-page.tsx
+++ b/components/home-page.tsx
@@ -16,6 +16,11 @@ export function HomePage({ language }: { language: Language }) {
   const dir = getDirection(language);
   const t = portfolioContent[language];
   const founderName = language === "ar" ? sharedProfile.founderNameAr : sharedProfile.founderNameEn;
+  const founderNameParts = founderName.trim().split(/\s+/);
+  const mobileFounderNameLines =
+    founderNameParts.length > 2
+      ? [`${founderNameParts[0]} ${founderNameParts[1]}`, founderNameParts.slice(2).join(" ")]
+      : [founderName];
   const address = language === "ar" ? sharedProfile.addressAr : sharedProfile.address;
   const heroImageAlt =
     language === "ar"
@@ -63,7 +68,12 @@ export function HomePage({ language }: { language: Language }) {
                     language === "en" ? "type-hero-title-latin" : ""
                   }`}
                 >
-                  {founderName}
+                  <span className="hidden sm:inline">{founderName}</span>
+                  <span className="hero-title-mobile-lines sm:hidden">
+                    {mobileFounderNameLines.map((line) => (
+                      <span key={line}>{line}</span>
+                    ))}
+                  </span>
                 </h1>
 
                 <div className="mt-8 max-w-2xl space-y-4">
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 832f239..abcbc62 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -11,6 +11,9 @@ export function Navbar({ language }: { language: Language }) {
   const t = portfolioContent[language].ui;
   const brandName = language === "ar" ? sharedProfile.brandNameAr : sharedProfile.brandNameEn;
   const basePath = getBasePath(language);
+  const brandParts = brandName.trim().split(/\s+/);
+  const mobileBrandLines =
+    brandParts.length > 2 ? [`${brandParts[0]} ${brandParts[1]}`, brandParts.slice(2).join(" ")] : [brandName];
 
   const navItems = [
     { label: t.navAbout, href: `${basePath}#about` },
@@ -23,25 +26,30 @@ export function Navbar({ language }: { language: Language }) {
   return (
     <header className="navbar-shell sticky top-0 z-50 border-b backdrop-blur-xl">
       <div
-        className={`site-container relative flex items-center justify-between gap-4 py-4 ${
+        className={`site-container navbar-layout relative flex items-center justify-between gap-4 py-4 ${
           dir === "rtl" ? "md:flex-row-reverse md:justify-between" : "md:justify-between"
         }`}
       >
-        <Link href={basePath} className="min-w-0 max-w-[68vw] md:max-w-fit">
-          <div className={`flex items-center gap-4 ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
-            <div className="logo-shell overflow-hidden rounded-[20px] border p-2">
+        <Link href={basePath} className="navbar-brand-link min-w-0 max-w-[68vw] md:max-w-fit">
+          <div className={`navbar-brand-lockup flex items-center gap-4 ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
+            <div className="logo-shell navbar-logo-shell overflow-hidden rounded-[20px] border p-2">
               <Image
                 src={sharedProfile.logoImage}
                 alt={language === "ar" ? "\u0634\u0639\u0627\u0631 \u063a\u0631\u064a\u0633 \u0628\u0637\u0631\u0633 \u0633\u0644\u0645\u0648\u0646" : "Grace Butrus Salmoun logo"}
                 width={60}
                 height={60}
-                className="h-[60px] w-[60px] rounded-[14px] object-contain"
+                className="navbar-logo-image h-[60px] w-[60px] rounded-[14px] object-contain"
               />
             </div>
-            <div className={`min-w-0 ${dir === "rtl" ? "text-right" : ""}`}>
-              <p className="type-brand display-face text-[var(--color-ink)]">
+            <div className={`navbar-brand-copy min-w-0 ${dir === "rtl" ? "text-right" : ""}`}>
+              <p className="type-brand display-face hidden text-[var(--color-ink)] sm:block">
                 {brandName}
               </p>
+              <p className="type-brand display-face navbar-brand-mobile text-[var(--color-ink)] sm:hidden">
+                {mobileBrandLines.map((line) => (
+                  <span key={line}>{line}</span>
+                ))}
+              </p>
               <p className="type-label mt-1 hidden tracking-[0.18em] text-[var(--color-muted)] sm:block">
                 {t.architectureEngineer}
               </p>
@@ -62,7 +70,7 @@ export function Navbar({ language }: { language: Language }) {
           </div>
         </div>
 
-        <div className={`flex items-center gap-2 md:hidden ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
+        <div className={`navbar-mobile-controls flex items-center gap-2 md:hidden ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
           <ThemeToggle language={language} />
           <LanguageToggle language={language} />
           <MobileNav