diff --git a/app/portfolio.css b/app/portfolio.css index e9f5b7f..5083921 100644 --- a/app/portfolio.css +++ b/app/portfolio.css @@ -249,14 +249,18 @@ line-height: 1.08; } - .navbar-brand-mobile, + .navbar-brand-mobile { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .hero-title-mobile-lines { display: flex; flex-direction: column; gap: 0.08em; } - .navbar-brand-mobile span, .hero-title-mobile-lines span { display: block; } @@ -663,16 +667,18 @@ .navbar-layout { flex-direction: column; align-items: stretch; - gap: 0.875rem; + gap: 0.7rem; } .navbar-brand-link { max-width: none; + order: 2; } .navbar-brand-lockup { justify-content: space-between; - gap: 0.875rem; + align-items: center; + gap: 0.75rem; } .navbar-brand-copy { @@ -685,12 +691,15 @@ } .navbar-logo-image { - height: 52px; - width: 52px; + height: 48px; + width: 48px; } .navbar-mobile-controls { - align-self: flex-start; + order: 1; + width: 100%; + justify-content: flex-start; + align-self: stretch; } .site-container { @@ -718,15 +727,18 @@ } .navbar-shell .type-brand { - font-size: clamp(25px, 8.2vw, 32px); - line-height: 1.03; + font-size: clamp(20px, 6.1vw, 24px); + line-height: 1.08; } - .navbar-shell .type-label { + .navbar-specialty { display: block; - max-width: 17rem; - font-size: 13px; - letter-spacing: 0.1em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 11px; + letter-spacing: 0.06em; + line-height: 1.35; } .type-page-title { @@ -805,7 +817,7 @@ } .navbar-shell .type-brand { - font-size: clamp(22px, 7.4vw, 28px); + font-size: clamp(18px, 5.8vw, 22px); } .contact-card { diff --git a/components/navbar.tsx b/components/navbar.tsx index abcbc62..a15e321 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -11,9 +11,6 @@ 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` }, @@ -46,11 +43,9 @@ export function Navbar({ language }: { language: Language }) { {brandName}

- {mobileBrandLines.map((line) => ( - {line} - ))} + {brandName}

-

+

{t.architectureEngineer}