This commit is contained in:
MOH
@@ -10,6 +10,7 @@ import { useState } from "react";
|
||||
import { Container } from "@/components/layout/container";
|
||||
import { LocaleToggle } from "@/components/layout/locale-toggle";
|
||||
import { SiteLogo } from "@/components/layout/site-logo";
|
||||
import { SoundToggle } from "@/components/sound-toggle";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { getLocalizedPath, stripLocalePrefix } from "@/lib/locale";
|
||||
@@ -23,6 +24,41 @@ const navItems = [
|
||||
{ key: "contact", path: "/contact" },
|
||||
];
|
||||
|
||||
const brandTitleCharacters = [
|
||||
...Array.from("MOH").map((character) => ({ character, tone: "base" as const })),
|
||||
{ character: " ", tone: "space" as const },
|
||||
...Array.from("FARAWATI").map((character) => ({ character, tone: "accent" as const })),
|
||||
];
|
||||
const brandShellVariants = {
|
||||
hidden: {},
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: 0.035,
|
||||
delayChildren: 0.18,
|
||||
},
|
||||
},
|
||||
} as const;
|
||||
const brandCharacterVariants = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
y: 18,
|
||||
rotateX: -80,
|
||||
filter: "blur(8px)",
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
rotateX: 0,
|
||||
filter: "blur(0px)",
|
||||
transition: {
|
||||
type: "spring" as const,
|
||||
stiffness: 280,
|
||||
damping: 20,
|
||||
mass: 0.8,
|
||||
},
|
||||
},
|
||||
} as const;
|
||||
|
||||
type SiteHeaderProps = {
|
||||
isAdmin?: boolean;
|
||||
lightLogoUrl?: string | null;
|
||||
@@ -109,15 +145,52 @@ export function SiteHeader({
|
||||
<div className="col-start-1 flex items-center justify-self-start">
|
||||
<Link
|
||||
href={getLocalizedPath(locale)}
|
||||
className="inline-flex items-center rounded-pill px-1 py-1 sm:py-1.5 lg:py-2"
|
||||
className="inline-flex items-center gap-2.5 rounded-pill px-1 py-1 sm:gap-3 lg:py-2"
|
||||
>
|
||||
<SiteLogo
|
||||
lightLogoUrl={lightLogoUrl}
|
||||
darkLogoUrl={darkLogoUrl}
|
||||
alt="mohfarawati"
|
||||
priority
|
||||
className="h-7 opacity-88 sm:h-8 lg:h-9"
|
||||
/>
|
||||
<motion.span
|
||||
initial={{ opacity: 0, x: -18, scale: 0.82, rotate: -14, filter: "blur(10px)" }}
|
||||
animate={{ opacity: 1, x: 0, scale: 1, rotate: 0, filter: "blur(0px)" }}
|
||||
transition={{ type: "spring", stiffness: 240, damping: 20, mass: 0.9 }}
|
||||
className="relative inline-flex items-center justify-center [transform-style:preserve-3d]"
|
||||
>
|
||||
<SiteLogo
|
||||
lightLogoUrl={lightLogoUrl}
|
||||
darkLogoUrl={darkLogoUrl}
|
||||
alt="mohfarawati"
|
||||
priority
|
||||
className="relative h-10 opacity-95"
|
||||
/>
|
||||
</motion.span>
|
||||
<motion.span
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={brandShellVariants}
|
||||
className="flex flex-col justify-center"
|
||||
>
|
||||
<span className="flex flex-wrap items-center text-[1.28rem] font-black leading-[1.2]">
|
||||
{brandTitleCharacters.map(({ character, tone }, index) => (
|
||||
<motion.span
|
||||
key={`${character}-${index}`}
|
||||
variants={brandCharacterVariants}
|
||||
className={cn(
|
||||
character === " " ? "mr-[0.11em] w-[0.11em]" : "mr-[0.005em] inline-block",
|
||||
tone === "base" ? "text-[hsl(var(--hero-ink))] dark:text-foreground" : "",
|
||||
tone === "accent" ? "text-primary" : "",
|
||||
)}
|
||||
>
|
||||
{character === " " ? "\u00A0" : character}
|
||||
</motion.span>
|
||||
))}
|
||||
</span>
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 20, clipPath: "inset(0 0 100% 0)", filter: "blur(10px)" }}
|
||||
animate={{ opacity: 1, y: 0, clipPath: "inset(0 0 0% 0)", filter: "blur(0px)" }}
|
||||
transition={{ duration: 0.7, delay: 0.34, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="-mt-0.5 text-[0.65rem] font-light leading-[1.2] tracking-[0.008em] text-foreground/78"
|
||||
>
|
||||
Webdesigner Bremen | Freelancer
|
||||
</motion.span>
|
||||
</motion.span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -146,6 +219,12 @@ export function SiteHeader({
|
||||
locale={locale}
|
||||
className={desktopControlButtonClassName}
|
||||
/>
|
||||
<SoundToggle
|
||||
ariaLabel={t("soundMute")}
|
||||
mutedAriaLabel={t("soundUnmute")}
|
||||
variant="ghost"
|
||||
className={desktopControlButtonClassName}
|
||||
/>
|
||||
<ThemeToggle
|
||||
ariaLabel={t("themeToggle")}
|
||||
variant="ghost"
|
||||
@@ -154,7 +233,7 @@ export function SiteHeader({
|
||||
{isAdmin ? (
|
||||
<Button asChild variant="ghost" size="icon" className={desktopControlButtonClassName}>
|
||||
<Link href="/root" aria-label={t("root")}>
|
||||
<LayoutDashboard className="h-4 w-4" />
|
||||
<LayoutDashboard className="h-4 w-4 transition-transform duration-300 ease-out hover:scale-110" />
|
||||
</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
@@ -263,6 +342,12 @@ export function SiteHeader({
|
||||
className={mobileControlButtonClassName}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<SoundToggle
|
||||
ariaLabel={t("soundMute")}
|
||||
mutedAriaLabel={t("soundUnmute")}
|
||||
variant="ghost"
|
||||
className={mobileControlButtonClassName}
|
||||
/>
|
||||
<ThemeToggle
|
||||
ariaLabel={t("themeToggle")}
|
||||
variant="ghost"
|
||||
@@ -271,7 +356,7 @@ export function SiteHeader({
|
||||
{isAdmin ? (
|
||||
<Button asChild variant="ghost" size="icon" className={mobileControlButtonClassName}>
|
||||
<Link href="/root" aria-label={t("root")} onClick={() => setIsOpen(false)}>
|
||||
<LayoutDashboard className="h-4 w-4" />
|
||||
<LayoutDashboard className="h-4 w-4 transition-transform duration-300 ease-out hover:scale-110" />
|
||||
</Link>
|
||||
</Button>
|
||||
) : null}
|
||||
|
||||
Reference in New Issue
Block a user