30 lines
1.0 KiB
JavaScript
30 lines
1.0 KiB
JavaScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import Link from "next/link";
|
|
|
|
export function Header() {
|
|
const t = useTranslations("header")
|
|
|
|
const header = [
|
|
{"name": t("whoami"), "id": "whoami"},
|
|
{"name": t("skills"), "id": "skills"},
|
|
{"name": t("projects"), "id": "projects"},
|
|
]
|
|
|
|
return (
|
|
<header className="flex flex-col xl:flex-row gap-8 items-center justify-center xl:justify-between fixed top-0 left-0 right-0 py-4 xl:py-10 px-4 xl:px-8 z-50 backdrop-blur-lg bg-transparent">
|
|
<h1>{t("name")}</h1>
|
|
<div className="hidden xl:flex flex-row gap-10">
|
|
{header.map((link, index) => (
|
|
<Link href={`/#${link.id}`} key={index} className="hover:underline hover:decoration-3 hover:underline-offset-8">
|
|
<h1>{link.name}</h1>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<Link href="/#contact" className="hidden xl:block hover:underline hover:decoration-3 hover:underline-offset-8">
|
|
<h1>{t("contact")}</h1>
|
|
</Link>
|
|
</header>
|
|
);
|
|
} |