feat: add cloudinary image upload to project forms, fix project details gallery styling, add gallery preview to project list

app/api/upload/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server'
+import cloudinary from '@/lib/cloudinary'
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData()
+    const file = formData.get('file') as File
+
+    if (!file) {
+      return NextResponse.json({ error: 'Dosya bulunamadı.' }, { status: 400 })
+    }
+
+    // Convert file to buffer
+    const arrayBuffer = await file.arrayBuffer()
+    const buffer = Buffer.from(arrayBuffer)
+    const base64 = `data:${file.type};base64,${buffer.toString('base64')}`
+
+    // Upload to Cloudinary
+    const result = await cloudinary.uploader.upload(base64, {
+      folder: 'ayristech/projects',
+      transformation: [
+        { width: 1200, crop: 'limit' },
+        { quality: 'auto', fetch_format: 'auto' }
+      ]
+    })
+
+    return NextResponse.json({ url: result.secure_url })
+  } catch (error) {
+    console.error('Upload error:', error)
+    return NextResponse.json({ error: 'Yükleme başarısız oldu.' }, { status: 500 })
+  }
+}

components/AdminClient.tsx

@@ -95,6 +95,18 @@ export default function AdminClient({
   const [newGalleryItem, setNewGalleryItem] = useState("");
   const [formWebsite, setFormWebsite] = useState("");
 
+  const [uploadingImage, setUploadingImage] = useState(false);
+  const [uploadingGallery, setUploadingGallery] = useState(false);
+
+  const handleFileUpload = async (file: File) => {
+    const fd = new FormData();
+    fd.append('file', file);
+    const res = await fetch('/api/upload', { method: 'POST', body: fd });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || 'Yükleme başarısız');
+    return data.url;
+  };
+
   // Blog CRUD State
   const [posts, setPosts] = useState<BlogPost[]>(initialBlogPosts);
   const [blogSearchQuery, setBlogSearchQuery] = useState("");
@@ -1103,13 +1115,37 @@ export default function AdminClient({
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div className="space-y-1">
                     <label className="font-mono text-[9px] uppercase text-[#A0998E] block">Kapak Görseli URL Adresi</label>
-                    <input
+                    <div className="flex gap-2">
-                      type="text"
+                      <input
-                      value={formImage}
+                        type="text"
-                      onChange={(e) => setFormImage(e.target.value)}
+                        value={formImage}
-                      placeholder="https://images.unsplash.com/..."
+                        onChange={(e) => setFormImage(e.target.value)}
-                      className="w-full font-mono text-[11px] bg-[#EDE8E0] border border-[#C8C2B8] focus:border-[#0A0A0A] outline-none px-3 py-2 text-[#0A0A0A]"
+                        placeholder="https://images.unsplash.com/..."
-                    />
+                        className="flex-grow font-mono text-[11px] bg-[#EDE8E0] border border-[#C8C2B8] focus:border-[#0A0A0A] outline-none px-3 py-2 text-[#0A0A0A]"
+                      />
+                      <label className="border border-[#0A0A0A] px-3 flex items-center justify-center font-display font-black text-[9px] uppercase tracking-wider transition-colors cursor-pointer bg-[#F4F0E8] hover:bg-[#EDE8E0] shrink-0">
+                        {uploadingImage ? "YÜKLENİYOR..." : "YÜKLE"}
+                        <input
+                          type="file"
+                          accept="image/*"
+                          className="hidden"
+                          disabled={uploadingImage}
+                          onChange={async (e) => {
+                            const file = e.target.files?.[0];
+                            if (!file) return;
+                            setUploadingImage(true);
+                            try {
+                              const url = await handleFileUpload(file);
+                              setFormImage(url);
+                            } catch (err) {
+                              showToast("Resim yüklenemedi", "alert");
+                            } finally {
+                              setUploadingImage(false);
+                            }
+                          }}
+                        />
+                      </label>
+                    </div>
                   </div>
                   <div className="space-y-1">
                     <label className="font-mono text-[9px] uppercase text-[#A0998E] block">Website URL (Opsiyonel)</label>
@@ -1205,10 +1241,32 @@ export default function AdminClient({
                       placeholder="https://images.unsplash.com/..."
                       className="flex-grow font-mono text-[9px] bg-[#EDE8E0] border border-[#C8C2B8] focus:border-[#0A0A0A] outline-none px-3 py-2 text-[#0A0A0A]"
                     />
+                    <label className="border border-[#0A0A0A] px-3 flex items-center justify-center font-display font-black text-[9px] uppercase tracking-wider transition-colors cursor-pointer bg-[#F4F0E8] hover:bg-[#EDE8E0] shrink-0">
+                      {uploadingGallery ? "YÜKLENİYOR..." : "RESİM YÜKLE"}
+                      <input
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        disabled={uploadingGallery}
+                        onChange={async (e) => {
+                          const file = e.target.files?.[0];
+                          if (!file) return;
+                          setUploadingGallery(true);
+                          try {
+                            const url = await handleFileUpload(file);
+                            setFormGallery(prev => [...prev, url]);
+                          } catch (err) {
+                            showToast("Resim yüklenemedi", "alert");
+                          } finally {
+                            setUploadingGallery(false);
+                          }
+                        }}
+                      />
+                    </label>
                     <button
                       type="button"
                       onClick={handleAddGalleryItem}
-                      className="border border-[#0A0A0A] px-4 font-display font-black text-[9px] uppercase tracking-wider transition-colors cursor-pointer bg-[#F4F0E8]"
+                      className="border border-[#0A0A0A] px-4 font-display font-black text-[9px] uppercase tracking-wider transition-colors cursor-pointer bg-[#F4F0E8] shrink-0"
                     >
                       [ EKLE ]
                     </button>

components/WorkClient.tsx

@@ -120,6 +120,22 @@ export default function WorkClient({
                 <p className="text-[#7A7470] text-base leading-relaxed mb-8">
                   {study.desc}
                 </p>
+
+                {study.gallery && study.gallery.length > 0 && (
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+                    {study.gallery.slice(0, 3).map((src: string, i: number) => (
+                      <div key={i} className="aspect-[16/10] w-full overflow-hidden border border-[#C8C2B8] group-hover:border-[#0A0A0A] bg-[#EDE8E0] transition-colors relative">
+                        <img
+                          src={src}
+                          alt={`${study.title} preview ${i + 1}`}
+                          className="w-full h-full object-contain grayscale group-hover:grayscale-0 contrast-[1.1] brightness-[0.98] group-hover:scale-105 transition-all duration-700"
+                        />
+                        <div className="absolute inset-0 bg-[#0A0A0A]/5 opacity-100 group-hover:opacity-0 transition-opacity duration-300" />
+                      </div>
+                    ))}
+                  </div>
+                )}
+
                 <div className="flex flex-wrap items-center justify-between gap-4 pt-6 border-t border-[#D8D3CA]">
                   <div className="flex flex-wrap gap-2">
                     {(study.tech as string[]).map((t) => (

components/WorkDetailClient.tsx

@@ -431,7 +431,7 @@ export default function WorkDetailClient({ lang, dict, project, prev, next }: Pr
                     <img
                       src={src}
                       alt={`${project.title} screenshot ${idx + 1}`}
-                      className="w-full h-full object-cover grayscale group-hover:grayscale-0 contrast-[1.1] brightness-[0.98] group-hover:scale-105 transition-all duration-700"
+                      className="w-full h-full object-contain grayscale group-hover:grayscale-0 contrast-[1.1] brightness-[0.98] group-hover:scale-105 transition-all duration-700"
                     />
                     <div className="absolute inset-0 bg-[#0A0A0A]/5 opacity-100 group-hover:opacity-0 transition-opacity duration-300" />
                   </div>

lib/cloudinary.ts

@@ -0,0 +1,9 @@
+import { v2 as cloudinary } from 'cloudinary'
+
+cloudinary.config({
+  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
+  api_key: process.env.CLOUDINARY_API_KEY,
+  api_secret: process.env.CLOUDINARY_API_SECRET,
+})
+
+export default cloudinary

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -1,6 +1,18 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "standalone",
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+      {
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+      },
+    ],
+  },
 };
 
 export default nextConfig;

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@prisma/adapter-pg": "^7.8.0",
         "@prisma/client": "^7.8.0",
+        "cloudinary": "^2.10.0",
         "framer-motion": "^12.40.0",
         "next": "16.2.6",
         "pg": "^8.21.0",
@@ -1722,6 +1723,18 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cloudinary": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-2.10.0.tgz",
+      "integrity": "sha512-sY09kYg7wprkndAOjZBAYqFZqwL+SxnEGcAvksOvFA+5upnFn949UjkEkHKNSwkBtW/xRDd0p6NgbSXZcxkI3w==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.23"
+      },
+      "engines": {
+        "node": ">=9"
+      }
+    },
     "node_modules/confbox": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
@@ -2357,6 +2370,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
     "node_modules/long": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@prisma/adapter-pg": "^7.8.0",
     "@prisma/client": "^7.8.0",
+    "cloudinary": "^2.10.0",
     "framer-motion": "^12.40.0",
     "next": "16.2.6",
     "pg": "^8.21.0",