initial commit, setup

components/ProjectCard.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useState } from "react";
+import type { Project } from "@/data/content";
+
+type Props = {
+  project: Project;
+  visible: boolean;
+};
+
+export default function ProjectCard({ project, visible }: Props) {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <a
+      href={project.link}
+      target="_blank"
+      rel="noopener noreferrer"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        display: "block",
+        textDecoration: "none",
+        padding: 28,
+        background: hovered ? "var(--surface-hover)" : "var(--surface)",
+        border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
+        borderRadius: 8,
+        transition: "all 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
+        transform: visible
+          ? hovered
+            ? "translateY(-3px)"
+            : "translateY(0)"
+          : "translateY(12px)",
+        opacity: visible ? 1 : 0,
+        boxShadow: hovered ? "0 8px 32px rgba(0,0,0,0.12)" : "none",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          marginBottom: 12,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: "var(--mono)",
+            fontSize: 18,
+            fontWeight: 700,
+            color: hovered ? "var(--accent)" : "var(--fg)",
+            transition: "color 0.2s",
+          }}
+        >
+          {project.title}
+        </div>
+        <div
+          style={{
+            fontFamily: "var(--mono)",
+            fontSize: 11,
+            color: "var(--muted)",
+            padding: "2px 8px",
+            background: "var(--bg)",
+            borderRadius: 4,
+            border: "1px solid var(--border)",
+          }}
+        >
+          {project.year}
+        </div>
+      </div>
+      <p
+        style={{
+          fontFamily: "var(--sans)",
+          fontSize: 14,
+          lineHeight: 1.6,
+          color: "var(--fg-secondary)",
+          margin: "0 0 16px 0",
+        }}
+      >
+        {project.description}
+      </p>
+      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+        {project.tags.map((tag) => (
+          <span
+            key={tag}
+            style={{
+              fontFamily: "var(--mono)",
+              fontSize: 11,
+              fontWeight: 500,
+              color: "var(--accent)",
+              padding: "3px 10px",
+              background: "var(--accent-bg)",
+              borderRadius: 4,
+              letterSpacing: "0.02em",
+            }}
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    </a>
+  );
+}