feat(portfolio): image-led project gallery with branded placeholders

Redesign the portfolio list/category grid into a premium, image-first gallery (Phase 3), applying the warm-premium tokens. - Add components/site/portfolio-cover.tsx: renders the stored cover image (next/image, object-cover, hover zoom) or a restrained branded placeholder (monogram + category) when none is set. Placeholders are temporary — the owner will swap in real artwork. - Rewrite portfolio-project-grid: responsive 1/2/3-col gallery, featured projects span two columns with a larger cover, cards use the type scale (text-h2/h3/caption), eyebrow category labels, line-clamped summaries, soft elevation and hover lift. Directly fixes the "portfolio shows no images" gap on the list and category pages. Verified: eslint clean, no new type errors, tailwind generates the utilities.
2026-07-14 22:13:26 +02:00
parent dcffa87be7
commit f7355b5356
2 changed files with 138 additions and 34 deletions
@@ -0,0 +1,67 @@
+import Image from "next/image";
+import { ImageIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type PortfolioCoverProps = {
+  src: string | null;
+  title: string;
+  category?: string;
+  sizes?: string;
+  priority?: boolean;
+  className?: string;
+};
+
+const DEFAULT_SIZES =
+  "(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw";
+
+/**
+ * Project cover. Renders the stored image when present, otherwise a restrained
+ * branded placeholder (owner will replace placeholders with real artwork).
+ * Fills a positioned, aspect-sized parent (`relative` + `aspect-*`).
+ */
+export function PortfolioCover({
+  src,
+  title,
+  category,
+  sizes = DEFAULT_SIZES,
+  priority = false,
+  className,
+}: PortfolioCoverProps) {
+  if (src) {
+    return (
+      <Image
+        src={src}
+        alt={title}
+        fill
+        sizes={sizes}
+        priority={priority}
+        className={cn(
+          "object-cover transition-transform duration-500 ease-out group-hover:scale-[1.04]",
+          className,
+        )}
+      />
+    );
+  }
+
+  const monogram = title.trim().charAt(0).toUpperCase() || "•";
+
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "relative flex h-full w-full flex-col items-center justify-center gap-3 bg-surface-2",
+        className,
+      )}
+    >
+      <span className="pointer-events-none absolute -top-1/3 left-1/2 h-2/3 w-2/3 -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,hsl(var(--brand-primary)/0.12),transparent)]" />
+      <span className="text-[clamp(3rem,7vw,4.5rem)] font-semibold leading-none text-foreground/12">
+        {monogram}
+      </span>
+      <span className="inline-flex items-center gap-1.5 text-caption text-muted-foreground/70">
+        <ImageIcon className="h-3.5 w-3.5" />
+        {category}
+      </span>
+    </div>
+  );
+}