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>
+  );
+}

components/ModGameSection.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useState } from "react";
+import type { ModdedGame } from "@/data/content";
+import ModList from "@/components/ModList";
+import "../styles/mods.css";
+
+type Props = {
+  game: ModdedGame;
+  visible?: boolean;
+  /** Collapsed by default on the smaller layout, where the full list is a long scroll. */
+  defaultOpen?: boolean;
+};
+
+/** One game and everything built for it: header, then the game's mod list. */
+export default function ModGameSection({ game, visible = true, defaultOpen = true }: Props) {
+  const [open, setOpen] = useState(defaultOpen);
+  const [hovered, setHovered] = useState(false);
+
+  const count = game.mods.length;
+
+  return (
+    <section
+      className="mod-game"
+      style={{
+        opacity: visible ? 1 : 0,
+        transform: visible ? "none" : "translateY(12px)",
+        borderColor: hovered ? "var(--border-strong)" : "var(--border)",
+      }}
+    >
+      <button
+        className="mod-game-head"
+        onClick={() => setOpen((v) => !v)}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        aria-expanded={open}
+      >
+        <span
+          className="mod-game-chevron"
+          style={{ transform: open ? "rotate(90deg)" : "rotate(0deg)" }}
+          aria-hidden="true"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor">
+            <path d="M3 1l4 4-4 4" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </span>
+
+        <span className="mod-game-heading">
+          <span className="mod-game-title" style={{ color: hovered ? "var(--accent)" : "var(--fg)" }}>
+            {game.title}
+          </span>
+          {game.platform && <span className="mod-game-platform">{game.platform}</span>}
+        </span>
+
+        <span className="mod-game-count">
+          {count} {count === 1 ? "mod" : "mods"}
+        </span>
+      </button>
+
+      {game.description && <p className="mod-game-description">{game.description}</p>}
+
+      {open && <ModList mods={game.mods} visible={visible} />}
+    </section>
+  );
+}

components/ModList.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import type { Mod } from "@/data/content";
+import ModCard from "@/components/ModCard";
+import "../styles/mods.css";
+
+type Props = {
+  mods: Mod[];
+  visible?: boolean;
+};
+
+/** The list of mods belonging to a single game. Two columns on desktop, one on mobile. */
+export default function ModList({ mods, visible = true }: Props) {
+  if (mods.length === 0) {
+    return <p className="mod-list-empty">Nothing published here yet.</p>;
+  }
+
+  return (
+    <div className="mod-list">
+      {mods.map((mod) => (
+        <ModCard key={mod.id} mod={mod} visible={visible} />
+      ))}
+    </div>
+  );
+}

components/ModsGrid.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { MOD_GAMES } from "@/data/content";
+import { useStaggerReveal } from "@/hooks/useAnimations";
+import ModGameSection from "@/components/ModGameSection";
+import "../styles/mods.css";
+
+/** The mods tab: every game I've modded, each with its own list. */
+export default function ModsGrid() {
+  const visible = useStaggerReveal(MOD_GAMES.length, 100);
+
+  return (
+    <div style={{ padding: "48px 0", minWidth: 0 }}>
+      <div
+        style={{
+          marginBottom: 8,
+          fontFamily: "var(--mono)",
+          fontSize: 11,
+          color: "var(--muted)",
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+        }}
+      >
+        {"# mods"}
+      </div>
+      <h2
+        style={{
+          fontFamily: "var(--sans)",
+          fontSize: 28,
+          fontWeight: 700,
+          color: "var(--fg)",
+          margin: "0 0 32px 0",
+          letterSpacing: "-0.01em",
+        }}
+      >
+        {"Games I've modded"}
+      </h2>
+
+      <div className="mod-games">
+        {MOD_GAMES.map((game, i) => (
+          <ModGameSection key={game.id} game={game} visible={visible.has(i)} />
+        ))}
+      </div>
+    </div>
+  );
+}

components/Nav.tsx

@@ -7,7 +7,7 @@ type Props = {
   section: string;
 };
 
-const items = ["profile", "project"];
+const items = ["profile", "project", "mods"];
 
 export default function Nav({ section }: Props) {
 

components/SimpleGallery.tsx

@@ -18,6 +18,9 @@ export default function SimpleGallery({
 
   const [active, setActive] = useState(0);
   const [isEnlarged, setIsEnlarged] = useState<Boolean>(false);
+  // Hovering the media itself mirrors the expand button's own hover state, so
+  // the button reads as the affordance for the click the media now accepts.
+  const [mediaHovered, setMediaHovered] = useState(false);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const fsPortalRef = useRef<HTMLDivElement | null>(null);
@@ -39,8 +42,8 @@ export default function SimpleGallery({
 
   function expandButton() {
     return (
-      <div 
-      className="gallery-action-button"
+      <div
+      className={`gallery-action-button${mediaHovered ? " is-hovered" : ""}`}
       style={{
           top: 8,
           right: 8,
@@ -63,7 +66,6 @@ export default function SimpleGallery({
           <path d="M13 13L8.5 8.5" strokeWidth="1.5" strokeLinecap="round" />
         </svg>
       </button>
-      Expand
       </div>
     );
   }
@@ -127,7 +129,8 @@ export default function SimpleGallery({
             alt={`${title} screenshot ${active + 1}`}
             width={800}
             height={600}
-            style={imageStyle}
+            onClick={() => setIsEnlarged(true)}
+            style={{ ...imageStyle, cursor: "zoom-in" }}
           />
         )}
 
@@ -316,7 +319,21 @@ export default function SimpleGallery({
   return (
     <>
       <div style={{ marginBottom: 8 }}>
-        <div style={{ position: "relative", display: "inline-block", width: "100%" }}>
+        {/* The border is always present but transparent when idle, so lighting it
+            up on hover can't nudge the surrounding layout. */}
+        <div
+          onMouseEnter={() => setMediaHovered(true)}
+          onMouseLeave={() => setMediaHovered(false)}
+          style={{
+            position: "relative",
+            display: "inline-block",
+            width: "100%",
+            padding: 3,
+            borderRadius: 7,
+            border: `1px solid ${mediaHovered ? "var(--border-strong)" : "transparent"}`,
+            transition: "border-color 0.15s ease",
+          }}
+        >
           {inlineMedia()}
         </div>
         {thumbnailStrip()}