initial commit, setup

components/Nav.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+
+type Props = {
+  section: string;
+  setSection: (s: string) => void;
+};
+
+const items = ["profile", "projects"];
+
+export default function Nav({ section, setSection }: Props) {
+  return (
+    <nav
+      style={{
+        display: "flex",
+        gap: 0,
+        borderBottom: "1px solid var(--border)",
+        fontFamily: "var(--mono)",
+        fontSize: 13,
+        userSelect: "none",
+      }}>
+
+      {items.map((item) => (
+
+        <button
+          key={item}
+          onClick={() => setSection(item)}
+          style={{
+            background: section === item ? "var(--surface)" : "transparent",
+            color: section === item ? "var(--accent)" : "var(--muted)",
+            border: "none",
+            borderBottom: section === item ? "2px solid var(--accent)" : "2px solid transparent",
+            padding: "12px 24px",
+            cursor: "pointer",
+            fontFamily: "inherit",
+            fontSize: "inherit",
+            fontWeight: 500,
+            letterSpacing: "0.03em",
+            textTransform: "lowercase",
+            transition: "all 0.2s",
+          }}
+          onMouseEnter={(e) => {
+            if (section !== item)
+              (e.target as HTMLElement).style.color = "var(--fg)";
+          }}
+          onMouseLeave={(e) => {
+            if (section !== item)
+              (e.target as HTMLElement).style.color = "var(--muted)";
+          }}>
+
+          <span style={{ opacity: 0.4, marginRight: 6 }}></span>
+          {item}
+        </button>
+      ))}
+
+    </nav>
+  );
+}