initial commit, setup

2026-03-26 23:50:36 -04:00
parent 1ec3a56705
commit 960f74a754
21 changed files with 865 additions and 120 deletions
--- a/components/Profile.tsx
+++ b/components/Profile.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useState } from "react";
+import { PROFILE } from "@/data/content";
+import LinkIcon from "./LinkIcon";
+import ContactMethods from "./ContactMethods";
+import { useStaggerReveal } from "@/hooks/useAnimations";
+
+export default function Profile() {
+  const [hovered, setHovered] = useState<number | null>(null);
+  const visible = useStaggerReveal(PROFILE.links.length + PROFILE.contactMethods.length, 100);
+  return (
+    <div style={{ padding: "48px 0", maxWidth: 640 }}>
+      <div
+        style={{
+          marginBottom: 8,
+          fontFamily: "var(--mono)",
+          fontSize: 11,
+          color: "var(--muted)",
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+        }}
+      >
+        {"# about"}
+      </div>
+      <h1
+        style={{
+          fontFamily: "var(--sans)",
+          fontSize: 42,
+          fontWeight: 700,
+          color: "var(--fg)",
+          margin: "0 0 4px 0",
+          lineHeight: 1.1,
+          letterSpacing: "-0.02em",
+        }}
+      >
+        {PROFILE.name}
+      </h1>
+      <div
+        style={{
+          fontFamily: "var(--mono)",
+          fontSize: 15,
+          color: "var(--accent)",
+          marginBottom: 32,
+          fontWeight: 500,
+        }}
+      >
+        {PROFILE.title}    
+      </div>
+      <p
+        style={{
+          fontFamily: "var(--sans)",
+          fontSize: 16,
+          lineHeight: 1.7,
+          color: "var(--fg-secondary)",
+          margin: "0 0 40px 0",
+          maxWidth: 560,
+        }}
+      >
+        {PROFILE.bio}
+      </p>
+      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
+        {PROFILE.links.map((link, i) => (
+          <a key={link.label}
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            onMouseEnter={() => setHovered(i)}
+            onMouseLeave={() => setHovered(null)}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "10px 18px",
+              fontFamily: "var(--mono)",
+              fontSize: 13,
+              fontWeight: 500,
+              color: hovered === i ? "var(--accent)" : "var(--fg-secondary)",
+              background: hovered === i ? "var(--accent-bg)" : "var(--surface)",
+              border: `1px solid ${hovered === i ? "var(--accent)" : "var(--border)"}`,
+              borderRadius: 6,
+              textDecoration: "none",
+              transition: "all var(--duration-slow)",
+              transform: hovered === i ? "translateY(-2px)" : "none",
+              opacity: visible.has(i) ? 1.0 : 0
+            }}
+          >
+            <LinkIcon type={link.icon} />
+            {link.label}
+          </a>
+        ))}
+      </div>
+      <ContactMethods methods={PROFILE.contactMethods} visibleCount={PROFILE.links.length} visibleComponent={visible} isVisible={visible.has(PROFILE.links.length-1)} />
+    </div>
+  );
+}