54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { PROJECTS } from "@/data/content";
|
|
import { useStaggerReveal } from "@/hooks/useAnimations";
|
|
import ProjectCard from "./ProjectCard";
|
|
|
|
export default function Projects() {
|
|
const visible = useStaggerReveal(PROJECTS.length, 100);
|
|
|
|
return (
|
|
<div style={{ padding: "48px 0" }}>
|
|
<div
|
|
style={{
|
|
marginBottom: 8,
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 11,
|
|
color: "var(--muted)",
|
|
letterSpacing: "0.08em",
|
|
textTransform: "uppercase",
|
|
}}
|
|
>
|
|
{"# projects"}
|
|
</div>
|
|
<h2
|
|
style={{
|
|
fontFamily: "var(--sans)",
|
|
fontSize: 28,
|
|
fontWeight: 700,
|
|
color: "var(--fg)",
|
|
margin: "0 0 32px 0",
|
|
letterSpacing: "-0.01em",
|
|
}}
|
|
>
|
|
{"Things I've built"}
|
|
</h2>
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
|
|
gap: 16,
|
|
}}
|
|
>
|
|
{PROJECTS.map((project, i) => (
|
|
<ProjectCard
|
|
key={project.id}
|
|
project={project}
|
|
visible={visible.has(i)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|