MohFarawati
f7355b5356
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.
68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
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>
|
|
);
|
|
}
|