From f7355b53564aa388a675798e9952e62c7a7c1200 Mon Sep 17 00:00:00 2001
From: MohFarawati <mf@planetmutlu.com>
Date: Tue, 14 Jul 2026 22:13:26 +0200
Subject: [PATCH] feat(portfolio): image-led project gallery with branded
 placeholders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 components/site/portfolio-cover.tsx        |  67 +++++++++++++
 components/site/portfolio-project-grid.tsx | 105 ++++++++++++++-------
 2 files changed, 138 insertions(+), 34 deletions(-)
 create mode 100644 components/site/portfolio-cover.tsx

diff --git a/components/site/portfolio-cover.tsx b/components/site/portfolio-cover.tsx
new file mode 100644
index 0000000..65cf00a
--- /dev/null
+++ b/components/site/portfolio-cover.tsx
@@ -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>
+  );
+}
diff --git a/components/site/portfolio-project-grid.tsx b/components/site/portfolio-project-grid.tsx
index 7e5a77e..627c43e 100644
--- a/components/site/portfolio-project-grid.tsx
+++ b/components/site/portfolio-project-grid.tsx
@@ -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>
+        <div className="rounded-surface border border-border bg-surface-1 px-6 py-16 text-center text-small text-muted-foreground">
+          {emptyLabel}
+        </div>
+      </section>
+    );
+  }
+
   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"
+    <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">
-                  <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">
+                  <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}
-                  </p>
+                  </span>
                 </div>
-                <h2 className="mt-3 text-xl font-semibold text-foreground">
-                  {getLocalizedValue(item.title, locale)}
+
+                <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 text-sm text-muted-foreground">
+
+                <p className="mt-2 line-clamp-2 text-small leading-relaxed 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">
-            {emptyLabel}
-          </CardContent>
-        </AppCard>
-      ) : null}
+                <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>
   );
 }