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/ContactMethods.tsx
+++ b/components/ContactMethods.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+import type { ContactMethod } from "@/data/content";
+import { useStaggerReveal } from "@/hooks/useAnimations";
+
+function ContactIcon({ type }: { type: string }) {
+  const s = {
+    width: 16,
+    height: 16,
+    strokeWidth: 1.5,
+    stroke: "currentColor",
+    fill: "none" as const,
+  };
+
+  if (type === "tel")
+    return (
+      <svg {...s} viewBox="0 0 24 24">
+        <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z" />
+      </svg>
+    );
+
+  if (type === "email")
+    return (
+      <svg {...s} viewBox="0 0 24 24">
+        <rect x="2" y="4" width="20" height="16" rx="2" />
+        <path d="M22 4L12 13 2 4" />
+      </svg>
+    );
+
+  return (
+    <svg {...s} viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 16v-4M12 8h.01" />
+    </svg>
+  );
+}
+
+function maskValue(label: string, icon: string): string {
+  if (icon === "tel") {
+    const digits = label.replace(/\D/g, "");
+    return `•••-•••-${digits.slice(-4)}`;
+  }
+  return "•".repeat(Math.min(label.length, 12));
+}
+
+function getHref(label: string, icon: string): string {
+  if (icon === "tel") return `tel:${label.replace(/\D/g, "")}`;
+  if (icon === "email") return `mailto:${label}`;
+  return "#";
+}
+
+type Props = {
+  methods: ContactMethod[];
+  visibleCount: number;
+  visibleComponent: Set<Number>;
+  isVisible: boolean;
+};
+
+export default function ContactMethods({ methods, visibleComponent, visibleCount, isVisible }: Props) {
+  const [revealed, setRevealed] = useState<Set<number>>(new Set());
+  const [hovered, setHovered] = useState<number | null>(null);
+
+  return (
+    <div style={{ marginTop: 32 }}>
+      <div
+        style={{
+          marginBottom: 12,
+          fontFamily: "var(--mono)",
+          fontSize: "var(--text-xs)",
+          color: "var(--muted)",
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          opacity: isVisible ? 1.0 : 0.0
+        }}
+      >
+        {"contact"}
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        {methods.map((method, i) => {
+          const isRevealed = !method.masked || revealed.has(i);
+          const isHovered = hovered === i;
+
+          return (
+            <div
+              key={`${method.icon}-${i}`}
+              onMouseEnter={() => {
+                setHovered(i);
+                if (method.masked) {
+                  setRevealed((prev) => new Set(prev).add(i));
+                }
+              }}
+              onMouseLeave={() => setHovered(null)}
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 10,
+                padding: "8px 14px",
+                fontFamily: "var(--mono)",
+                fontSize: "var(--text-sm)",
+                color: isHovered ? "var(--fg)" : "var(--fg-secondary)",
+                background: isHovered ? "var(--surface-hover)" : "var(--surface)",
+                border: `1px solid ${isHovered ? "var(--border-strong)" : "var(--border)"}`,
+                borderRadius: "var(--radius-md)",
+                transition: `all var(--duration-normal) var(--ease-in-out)`,
+                cursor: isRevealed ? "pointer" : "default",
+                alignSelf: "flex-start",
+                opacity: visibleComponent.has(i + visibleCount) ? 1.0 : 0.0
+              }}
+              onClick={() => {
+                if (isRevealed) {
+                  window.location.href = getHref(method.label, method.icon);
+                }
+              }}
+            >
+              <span
+                style={{
+                  color: isHovered ? "var(--accent)" : "var(--muted)",
+                  transition: `color var(--duration-normal) var(--ease-in-out)`,
+                  display: "flex",
+                  flexShrink: 0,
+                }}
+              >
+                <ContactIcon type={method.icon} />
+              </span>
+
+              <span
+                style={{
+                  transition: `opacity var(--duration-normal) var(--ease-in-out)`,
+                }}
+              >
+                {isRevealed ? method.label : maskValue(method.label, method.icon)}
+              </span>
+
+              {method.masked && !revealed.has(i) && (
+                <span
+                  style={{
+                    fontSize: "var(--text-xs)",
+                    color: "var(--faint)",
+                    fontStyle: "italic",
+                    marginLeft: 4,
+                  }}
+                >
+                  hover to reveal
+                </span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}