added project pages, updated page for FAM.

2026-06-08 22:25:39 -04:00
parent 0b161f3e2d
commit 89e5c2364c
27 changed files with 1860 additions and 55 deletions
--- a/components/ProjectsGrid.tsx
+++ b/components/ProjectsGrid.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import { PROJECTS } from "@/data/content";
+import { useStaggerReveal } from "@/hooks/useAnimations";
+import React, { useState, useCallback, useRef, useEffect } from "react";
+
+import ProjectCard from "@/components/ProjectCard";
+
+import {
+  Layout,
+  Responsive,
+  useContainerWidth,
+  DefaultBreakpoints,
+  verticalCompactor,
+} from "react-grid-layout";
+
+import "react-grid-layout/css/styles.css";
+import "react-resizable/css/styles.css";
+
+const ROW_HEIGHT = 100;
+const SMALL_BREAKPOINT = 768;
+
+function buildLayoutsFromHeights(activeId: number, heights: Record<string, number>): Record<DefaultBreakpoints, Layout> {
+  const selected = PROJECTS.find((p) => p.id === activeId);
+  const rest = PROJECTS.filter((p) => p.id !== activeId);
+
+  const h = (id: number, fallback: number) =>    
+    heights[id.toString()] ?? fallback;
+
+  function twoCols(): Layout {
+    let items: Layout = [];
+    const selH = selected ? h(selected.id, 2) : 0;
+
+    
+    if (selected) {
+      items = items.concat({
+        i: selected.id.toString(),
+        x: 0,
+        y: 0,
+        w: 2,
+        h: selH,
+      });
+    }
+
+    const colY = [selH, selH];
+    for (const p of rest) {
+      const pH = h(p.id, 3);
+      const col = colY[0] <= colY[1] ? 0 : 1;
+      items = items.concat({ i: p.id.toString(), x: col, y: colY[col], w: 1, h: pH });
+      colY[col] += pH;
+    }
+
+    return items;
+  }
+
+  return {
+    lg: twoCols(),
+    md: twoCols(),
+    sm: twoCols(),
+
+    // small screens get the horizontal scroll row
+    xs: twoCols(),
+    xxs: twoCols(),
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/*  Component                                                          */
+/* ------------------------------------------------------------------ */
+
+export default function Projects() {
+  const visible = useStaggerReveal(PROJECTS.length, 100);
+  const { width, containerRef, mounted } = useContainerWidth();
+  const isSmall = mounted && width > 0 && width < SMALL_BREAKPOINT;
+
+  const [selectedProject, setSelectedProject] = useState<number>(1);
+  const selectedRef = useRef(selectedProject);
+  selectedRef.current = selectedProject;
+
+  const [layouts, setLayouts] = useState<Record<DefaultBreakpoints, Layout>>(() => buildLayoutsFromHeights(1, {}));
+  const measuredHeights = useRef<Record<string, number>>({});
+  
+const updateHeight = useCallback((projectId: number, heightPx: number) => {
+  const key = projectId.toString();
+  const rowH = Math.max(1, Math.ceil(heightPx / ROW_HEIGHT));
+
+  if (measuredHeights.current[key] === rowH) return;
+  measuredHeights.current[key] = rowH;
+
+  setLayouts(buildLayoutsFromHeights(selectedRef.current, measuredHeights.current));
+}, []);
+
+ function setSelectedHandler(projectId: number) {
+  setSelectedProject(projectId);
+  measuredHeights.current = {};
+  setLayouts(buildLayoutsFromHeights(projectId, {}));
+}
+
+  const header = (
+    <>
+      <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>
+    </>
+  );
+
+  /* ---- small screen: horizontal scroll row ---- */
+  if (isSmall) {
+    return (
+      <div style={{ padding: "48px 0", minWidth: 0 }}>
+        {header}
+        <div
+          ref={containerRef}
+          style={{
+            display: "flex",
+            overflowX: "auto",
+            gap: 16,
+            paddingBottom: 12,
+            scrollSnapType: "x mandatory",
+            WebkitOverflowScrolling: "touch",
+          }}
+        >
+          {PROJECTS.map((project, i) => (
+            <div
+              key={project.id}
+              style={{
+                minWidth: 280,
+                maxWidth: selectedProject === project.id ? 500 : 280,
+                flexShrink: 0,
+                scrollSnapAlign: "start",
+                transition: "max-width 0.3s ease",
+              }}>
+              <ProjectCard
+                project={project}
+                visible={visible.has(i)}
+                selected={selectedProject === project.id}
+                setSelected={setSelectedHandler}
+                updateHeight={updateHeight}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  /* ---- normal: grid layout ---- */
+  return (
+    <div style={{ padding: "48px 0", minWidth: 400 }}>
+      {header}
+
+      <div ref={containerRef}>
+        {mounted && (
+          <Responsive
+            layouts={layouts}
+            breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+            cols={{ lg: 2, md: 2, sm: 2, xs: 2, xxs: 2 }}
+            width={width}
+            compactor={verticalCompactor}
+            rowHeight={ROW_HEIGHT}
+            dragConfig={{ enabled: false }}
+            resizeConfig={{ enabled: false }}
+          >
+            {PROJECTS.map((project, i) => (
+              <div
+                id={`project-${project.id}`}
+                key={project.id}>
+                <ProjectCard
+                  project={project}
+                  visible={visible.has(i)}
+                  selected={selectedProject === project.id}
+                  setSelected={setSelectedHandler}
+                  updateHeight={updateHeight}
+                />
+              </div>
+            ))}
+          </Responsive>
+        )}
+      </div>
+    </div>
+  );
+}