Improved image expansion in Projects. Introduced Mods page.

components/ModCard.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import type { Mod } from "@/data/content";
+import "../styles/mods.css";
+
+type Props = {
+  mod: Mod;
+  visible?: boolean;
+};
+
+/** One mod: the list item card inside a game's mod list. */
+export default function ModCard({ mod, visible = true }: Props) {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <a
+      className="mod-card"
+      href={mod.link}
+      target="_blank"
+      rel="noreferrer noopener"
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        background: hovered ? "var(--surface-hover)" : "var(--surface)",
+        border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
+        transform: visible ? (hovered ? "translateY(-2px)" : "none") : "translateY(8px)",
+        opacity: visible ? 1 : 0,
+        boxShadow: hovered ? "var(--shadow-md)" : "none",
+      }}
+    >
+      <div className="mod-card-head">
+        <span
+          className="mod-card-title"
+          style={{ color: hovered ? "var(--accent)" : "var(--fg)" }}
+        >
+          {mod.title}
+        </span>
+
+        {mod.version && <span className="mod-card-version">v{mod.version}</span>}
+      </div>
+
+      <p className="mod-card-description">{mod.description}</p>
+
+      <div className="mod-card-foot">
+        {mod.tags && mod.tags.length > 0 && (
+          <div className="mod-card-tags">
+            {mod.tags.map((tag) => (
+              <span key={tag} className="mod-tag">
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        <span
+          className="mod-card-link"
+          style={{
+            borderColor: hovered ? "var(--accent)" : "var(--border)",
+            color: hovered ? "var(--accent)" : "var(--fg-secondary)",
+          }}
+        >
+          {mod.linkLabel ?? "Repository"}
+          <svg
+            width="11"
+            height="11"
+            viewBox="0 0 14 14"
+            fill="none"
+            stroke="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path d="M5 1h8v8" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            <path d="M13 1L6 8" strokeWidth="1.5" strokeLinecap="round" />
+            <path
+              d="M11 9v4H1V3h4"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </span>
+      </div>
+    </a>
+  );
+}