Refine mobile layout updates

app/portfolio.css

@@ -247,6 +247,7 @@
   .type-hero-title {
     font-size: var(--text-hero-title);
     line-height: 1.08;
+    text-wrap: balance;
   }
 
   .navbar-brand-mobile {
@@ -255,16 +256,6 @@
     text-overflow: ellipsis;
   }
 
-  .hero-title-mobile-lines {
-    display: flex;
-    flex-direction: column;
-    gap: 0.08em;
-  }
-
-  .hero-title-mobile-lines span {
-    display: block;
-  }
-
   @media (min-width: 1024px) {
     .type-hero-title-latin {
       font-size: var(--text-hero-title-latin);
@@ -396,6 +387,14 @@
     box-shadow: var(--button-secondary-shadow);
   }
 
+  .hero-action-link {
+    min-width: 210px;
+    min-height: 58px;
+    padding: 0.95rem 1.6rem;
+    font-size: 16px;
+    line-height: 1.2;
+  }
+
   .display-face {
     font-family: var(--font-display), serif;
   }
@@ -685,6 +684,11 @@
       flex: 1 1 auto;
     }
 
+    .navbar-brand-mobile {
+      line-height: 1.12;
+      margin-bottom: 0.35rem;
+    }
+
     .navbar-logo-shell {
       padding: 0.45rem;
       border-radius: 18px;
@@ -733,12 +737,14 @@
 
     .navbar-specialty {
       display: block;
-      white-space: nowrap;
+      white-space: normal;
-      overflow: hidden;
+      overflow: visible;
-      text-overflow: ellipsis;
+      text-overflow: clip;
       font-size: 11px;
-      letter-spacing: 0.06em;
+      letter-spacing: 0.04em;
-      line-height: 1.35;
+      line-height: 1.4;
+      text-wrap: pretty;
+      margin-top: 0;
     }
 
     .type-page-title {
@@ -771,6 +777,18 @@
       padding: 1.25rem 1rem;
     }
 
+    .hero-action-group {
+      justify-content: flex-start;
+      gap: 0.75rem;
+    }
+
+    .hero-action-link {
+      min-width: 170px;
+      min-height: 46px;
+      padding: 0.7rem 1rem;
+      font-size: 13px;
+    }
+
     .line-frame::before,
     .line-frame::after {
       height: 56px;
@@ -779,6 +797,25 @@
   }
 
   @media (max-width: 430px) {
+    .navbar-brand-lockup {
+      align-items: flex-start;
+    }
+
+    .navbar-brand-copy {
+      min-width: 0;
+      padding-top: 0.15rem;
+    }
+
+    .navbar-brand-mobile {
+      margin-bottom: 0.45rem;
+    }
+
+    .navbar-specialty {
+      max-width: 100%;
+      font-size: 10.5px;
+      line-height: 1.45;
+    }
+
     .type-hero-title {
       font-size: clamp(30px, 11.5vw, 40px);
       line-height: 1.02;
@@ -799,16 +836,16 @@
 
     .hero-action-group {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
+      justify-content: flex-start;
       align-items: flex-start;
+      flex-wrap: wrap;
       gap: 0.75rem;
     }
 
     .hero-action-group > * {
       width: auto;
-      min-width: min(100%, 13.5rem);
+      min-width: 150px;
-      padding: 0.8rem 1.35rem;
-      font-size: 13px;
     }
   }
 
@@ -826,6 +863,11 @@
       font-size: clamp(18px, 5.8vw, 22px);
     }
 
+    .navbar-specialty {
+      font-size: 10px;
+      letter-spacing: 0.03em;
+    }
+
     .contact-card {
       padding: 1rem 0.875rem;
     }

components/home-page.tsx

@@ -16,11 +16,6 @@ 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"
@@ -68,12 +63,7 @@ export function HomePage({ language }: { language: Language }) {
                     language === "en" ? "type-hero-title-latin" : ""
                   }`}
                 >
-                  <span className="hidden sm:inline">{founderName}</span>
+                  {founderName}
-                  <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">
@@ -89,15 +79,15 @@ export function HomePage({ language }: { language: Language }) {
                 </div>
 
                 <div className={`hero-action-group mt-10 flex flex-wrap gap-4 ${dir === "rtl" ? "justify-start" : ""}`}>
-                  <Link href={`${basePath}#projects`} className="button-primary">
+                  <Link href={`${basePath}#projects`} className="button-primary hero-action-link">
                     {t.ui.viewProjects}
                   </Link>
                   {hasResume ? (
-                    <Link href={resumeFile.href} className="button-secondary" download>
+                    <Link href={resumeFile.href} className="button-secondary hero-action-link" download>
                       {t.ui.downloadCv}
                     </Link>
                   ) : (
-                    <Link href={`${basePath}/resume`} className="button-secondary">
+                    <Link href={`${basePath}/resume`} className="button-secondary hero-action-link">
                       {t.ui.onlineResume}
                     </Link>
                   )}

components/navbar.tsx

@@ -65,7 +65,7 @@ export function Navbar({ language }: { language: Language }) {
           </div>
         </div>
 
-        <div className={`navbar-mobile-controls flex items-center gap-2 md:hidden ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
+        <div className="navbar-mobile-controls flex items-center gap-2 md:hidden">
           <ThemeToggle language={language} />
           <LanguageToggle language={language} />
           <MobileNav

package-lock.json

@@ -20,6 +20,9 @@
         "postcss": "8.4.49",
         "tailwindcss": "3.4.17",
         "typescript": "5.7.2"
+      },
+      "engines": {
+        "node": "20.x"
       }
     },
     "node_modules/@alloc/quick-lru": {