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>
+  );
+}
@@ -2,10 +2,10 @@ import { ArrowUpRight, CalendarDays } from "lucide-react";
 import Link from "next/link";

 import { MotionFade } from "@/components/motion-fade";
-import { AppCard } from "@/components/ui/app-card";
-import { CardContent } from "@/components/ui/card";
+import { PortfolioCover } from "@/components/site/portfolio-cover";
 import { getLocalizedPath, type AppLocale } from "@/lib/locale";
 import { getLocalizedValue, type PortfolioProjectView } from "@/lib/portfolio";
+import { cn } from "@/lib/utils";

 type PortfolioProjectGridProps = {
  locale: AppLocale;
@@ -22,48 +22,85 @@ export function PortfolioProjectGrid({
  emptyLabel,
  openLabel,
 }: PortfolioProjectGridProps) {
+  if (projects.length === 0) {
    return (
-    <section className="grid gap-4 md:grid-cols-2">
-      {projects.map((item, index) => (
-        <MotionFade key={item.slug} delay={index * 0.05}>
-          <AppCard interactive>
-            <CardContent className="p-5">
-              <Link
-                href={getLocalizedPath(locale, `/portfolio/${item.slug}`, defaultLocale)}
-                className="group block"
-              >
-                <div className="flex items-center justify-between gap-3">
-                  <p className="text-sm text-muted-foreground/80">
-                    {getLocalizedValue(item.category.name, locale)}
-                  </p>
-                  <p className="inline-flex items-center gap-1 text-xs text-muted-foreground/80">
-                    <CalendarDays className="h-3.5 w-3.5" />
-                    {item.projectYear}
-                  </p>
-                </div>
-                <h2 className="mt-3 text-xl font-semibold text-foreground">
-                  {getLocalizedValue(item.title, locale)}
-                </h2>
-                <p className="mt-2 text-sm text-muted-foreground">
-                  {getLocalizedValue(item.summary, locale)}
-                </p>
-                <p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-foreground/80 group-hover:text-foreground">
-                  {openLabel}
-                  <ArrowUpRight className="h-4 w-4" />
-                </p>
-              </Link>
-            </CardContent>
-          </AppCard>
-        </MotionFade>
-      ))}
-
-      {projects.length === 0 ? (
-        <AppCard className="md:col-span-2">
-          <CardContent className="p-6 text-sm text-muted-foreground">
+      <section>
+        <div className="rounded-surface border border-border bg-surface-1 px-6 py-16 text-center text-small text-muted-foreground">
          {emptyLabel}
-          </CardContent>
-        </AppCard>
-      ) : null}
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+      {projects.map((item, index) => {
+        const featured = item.isFeatured;
+        const title = getLocalizedValue(item.title, locale);
+        const category = getLocalizedValue(item.category.name, locale);
+
+        return (
+          <MotionFade
+            key={item.slug}
+            delay={Math.min(index * 0.05, 0.3)}
+            className={cn(featured && "sm:col-span-2 lg:col-span-2")}
+          >
+            <Link
+              href={getLocalizedPath(locale, `/portfolio/${item.slug}`, defaultLocale)}
+              className="group flex h-full flex-col overflow-hidden rounded-surface border border-border bg-surface-1 shadow-card transition duration-300 ease-out hover:-translate-y-1 hover:shadow-panel focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+            >
+              <div
+                className={cn(
+                  "relative overflow-hidden",
+                  featured ? "aspect-[16/10]" : "aspect-[4/3]",
+                )}
+              >
+                <PortfolioCover
+                  src={item.coverImagePath}
+                  title={title}
+                  category={category}
+                  priority={index === 0}
+                  sizes={
+                    featured
+                      ? "(min-width: 1024px) 66vw, 100vw"
+                      : "(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
+                  }
+                />
+              </div>
+
+              <div className="flex flex-1 flex-col p-5 sm:p-6">
+                <div className="flex items-center justify-between gap-3">
+                  <span className="eyebrow text-caption text-muted-foreground">
+                    {category}
+                  </span>
+                  <span className="inline-flex items-center gap-1.5 text-caption text-muted-foreground">
+                    <CalendarDays className="h-3.5 w-3.5" />
+                    {item.projectYear}
+                  </span>
+                </div>
+
+                <h2
+                  className={cn(
+                    "mt-3 font-semibold tracking-tight text-foreground",
+                    featured ? "text-h3 sm:text-h2" : "text-h3",
+                  )}
+                >
+                  {title}
+                </h2>
+
+                <p className="mt-2 line-clamp-2 text-small leading-relaxed text-muted-foreground">
+                  {getLocalizedValue(item.summary, locale)}
+                </p>
+
+                <span className="mt-5 inline-flex items-center gap-2 text-caption font-medium text-foreground/70 transition-colors group-hover:text-brand-primary">
+                  {openLabel}
+                  <ArrowUpRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+                </span>
+              </div>
+            </Link>
+          </MotionFade>
+        );
+      })}
    </section>
  );
 }