first commit

components/header.jsx

@@ -0,0 +1,30 @@
+"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>
+  );
+}