add more rando

src/actions/portfolio/getJustifiedImages.ts

@@ -6,7 +6,7 @@ export async function getJustifiedImages() {
   const images = await prisma.portfolioImage.findMany({
     where: {
       variants: {
-        some: { type: "thumbnail" },
+        some: { type: "resized" },
       },
     },
     include: {
@@ -17,7 +17,7 @@ export async function getJustifiedImages() {
 
   return images
     .map((img) => {
-      const variant = img.variants.find((v) => v.type === "thumbnail");
+      const variant = img.variants.find((v) => v.type === "resized");
       if (!variant || !variant.width || !variant.height) return null;
 
       const bg = img.colors.find((c) => c.type === "vibrant")?.color.hex ?? "#e5e7eb";
@@ -29,7 +29,7 @@ export async function getJustifiedImages() {
         backgroundColor: bg,
         width: variant.width,
         height: variant.height,
-        url: variant.url ?? `/api/image/thumbnail/${img.fileKey}.webp`,
+        url: variant.url ?? `/api/image/resized/${img.fileKey}.webp`,
       };
     })
     .filter(Boolean) as JustifiedInputImage[];

src/app/portfolio/two/page.tsx

@@ -6,7 +6,7 @@ export default async function PortfolioTwoPage() {
 
   return (
     <main className="p-2 mx-auto max-w-screen-2xl">
-      <JustifiedGallery images={images} rowHeight={350} gap={12} />
+      <JustifiedGallery images={images} rowHeight={340} gap={12} />
     </main>
   );
 }

src/components/portfolio/ImageCard.tsx

@@ -56,7 +56,7 @@ export function ImageCard(props: ImageCardProps) {
   return (
     <div
       className={cn(
-        "overflow-hidden rounded-md",
+        "overflow-hidden",
         isSquare && "aspect-square shadow-sm hover:scale-[1.01] transition-transform",
         isMosaic && "w-full h-full"
       )}

src/components/portfolio/JustifiedGallery.tsx

@@ -33,14 +33,14 @@ export function JustifiedGallery({ images, rowHeight = 200, gap = 4 }: Props) {
   }, [images, containerWidth, rowHeight, gap]);
 
   return (
-    <div ref={containerRef} className="w-full">
+    <div ref={containerRef} className="w-full flex flex-col" style={{ rowGap: `${gap}px` }}>
       {rows.length === 0 && (
         <p className="text-muted-foreground text-center py-20">No images to display</p>
       )}
       {rows.map((row, i) => (
         <div
           key={i}
-          className="flex mb-4" // Vertical gap between rows
+          className="flex" // Vertical gap between rows
           style={{ columnGap: `${gap}px` }} // Horizontal gap between images
         >
           {row.map((img) => (