97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
"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>
|
|
);
|
|
}
|