💼

Claude Code Rehberi

Portfolyo

Tasarımcı, fotoğrafçı, geliştirici için kişisel showcase.

Kolay 3-6 saatÖrnek: Designer, fotoğrafçı, danışman

Portfolyo = sizin profesyonel kimliğiniz. Tasarımcı için Behance'ten daha kişisel, daha güçlü. Fotoğrafçı için Instagram'dan kalıcı. Geliştirici için GitHub'dan profesyonel. Modern portfolyo: hero + hakkımda + 8-15 proje grid + her proje detay + iletişim. Animasyonlar + dark mode + minimal tipografi = işveren etkilenir.

Kim İçin Uygun?

UI/UX tasarımcılar
Fotoğrafçı, video editör, motion designer
Freelance geliştiriciler
Danışmanlar (iş, pazarlama, kariyer)

Tipik Özellikler

Portfolyo için olmazsa olmazlar

Etkileyici hero

İsim + bir cümlede ne yapıyorsun + bir profesyonel foto.

Proje grid (8-15 proje)

Görsel ağırlıklı, hover animasyonlu. Her proje tıklanabilir detay.

Proje detay sayfası

Brief, sürec, çözüm, sonuç. Görseller, video, demo link.

Hakkımda + CV

Hikaye + yetenekler + iş deneyimi. PDF CV indirilebilir.

Dark mode

Tasarımcılar için olmazsa olmaz. Tailwind dark: prefix.

Animasyonlar

Framer Motion ile yumuşak geçişler. Cubic-bezier easing.

İletişim + form

E-posta + LinkedIn + form. 'Birlikte çalışalım' tonu.

Önerilen Yığın

Next.js 14 + Tailwind Framer Motion MDX (proje detayları) Vercel

Adım Adım Kurulum

6 adımda yayında

Proje listesi hazırla (30 dk)

Excel: proje adı, müşteri, yıl, kategori, 3 görsel, demo link. En iyi 10-12 projeyi seç.

Marka stili belirle (15 dk)

Renk: minimal, 1-2 vurgu. Font: 1 sans (Inter) + 1 serif (Playfair). Spacing: bol nefes.

Claude Code kur (60 dk)

'Portfolio sitesi: hero, projeler grid, hakkımda, iletişim. Framer Motion + dark mode.'

$ claude "Next.js 14 + Tailwind ile minimal portfolio. Sayfalar: /, /projeler/[slug], /hakkimda, /iletisim. Framer Motion ile scroll animasyonları. Dark mode default. Font: Inter (sans) + Playfair Display (serif vurgu)."

Projeleri ekle (90 dk)

Her proje için MDX dosya: frontmatter (title, year, client, tags, hero image) + içerik (brief, process, solution, result).

Animasyonlar + polish (60 dk)

'Proje kartlarına hover'da scale + tilt. Sayfa geçişlerinde fade. Hero'da typewriter efekti.'

SEO + deploy (30 dk)

Her proje sayfasına Article schema. Vercel deploy + custom domain. İlk işveren paylaşıma hazır.

Önemli · Video Slider Rehberi

Portfolyo'da Video / Slider Nasıl Yapılır?

Portfolyoda statik görsel yeter değil. Tasarımcı için animation reel, fotoğrafçı için ürün döner gif, video editör için before/after slider = işverenler hatırlar.

Video format kararı

MP4 (universal) + WebM (Chrome için, %30 küçük). Both ile fallback: <source> tag'leri ile.

<video autoPlay muted loop playsInline>
  <source src="/showreel.webm" type="video/webm" />
  <source src="/showreel.mp4" type="video/mp4" />
</video>

Hero showreel

Üst kısımda 30 sn loop animasyon reel. Sessiz, otomatik, dikkat çekici.

<div className="relative h-[80vh]">
  <video
    autoPlay muted loop playsInline
    className="absolute inset-0 w-full h-full object-cover"
  >
    <source src="/hero-reel.mp4" type="video/mp4" />
  </video>
  <div className="absolute inset-0 bg-black/40" />
  <div className="relative z-10 flex items-center h-full px-12">
    <h1 className="text-7xl text-white font-bold">İsim Soyisim</h1>
  </div>
</div>

Proje grid'inde video preview

Statik thumbnail, hover'da video oynar. Pinterest tarzı.

<div
  className="group relative aspect-square overflow-hidden rounded-xl"
  onMouseEnter={(e) => e.currentTarget.querySelector('video')?.play()}
  onMouseLeave={(e) => e.currentTarget.querySelector('video')?.pause()}
>
  <img src="/poster.jpg" className="group-hover:opacity-0 transition" />
  <video
    src="/preview.mp4"
    muted loop playsInline
    className="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition"
  />
</div>

Before/After slider (video editör için)

İki video yan yana, ortada slider — kullanıcı kaydırdıkça before/after gösterir.

npm install react-compare-slider

import { ReactCompareSlider } from 'react-compare-slider';

<ReactCompareSlider
  itemOne={<video src="/before.mp4" autoPlay muted loop />}
  itemTwo={<video src="/after.mp4" autoPlay muted loop />}
/>

GIF alternatifi (Lightning fast)

Küçük loop'lar için GIF değil, WebM/MP4 kullan (%80 küçük dosya, daha kaliteli). 5 sn loop için max 500KB hedef.

# FFmpeg ile MP4'ten optimize WebM
ffmpeg -i input.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 -an output.webm

Performans: poster + preload

Sayfa açılışında video yüklenmesin. Sadece poster göster, oynamaya tıklarsa yükle.

<video poster="/poster.jpg" preload="none">
  <source src="/showreel.mp4" type="video/mp4" />
</video>

Hazır Promptlar

Claude Code'a Yapıştır

Köşeli parantezleri kendi içeriğinizle değiştirin.

Proje detay sayfa şablonu (MDX)

Aç ▾

MDX proje detay sayfa şablonu üret:

Frontmatter:
- title, client, year, role, duration
- tags (3-5)
- heroImage, posterVideo (varsa)
- demoUrl, githubUrl (varsa)

İçerik bölümleri:
1. Brief — müşteri kim, ne istedi (2 cümle)
2. Challenge — ana zorluk (1 paragraf)
3. Process — yaklaşım (3-5 adım, görselli)
4. Solution — final çözüm (büyük görsel + açıklama)
5. Result — sayısal metrik veya etki ('X% artış, Y memnuniyet')
6. Tech stack — kullanılan araçlar/teknolojiler
7. Next project — bir sonraki projeye link

Galerimde 4-6 görsel sunucu, lightbox ile büyütülebilir.

Showreel video hero

Aç ▾

Portfolio hero bölümü, video showreel ile:

- Tam ekran (h-screen) video background
- Video: autoplay, muted, loop, playsinline (mobil için zorunlu)
- Üstüne dark overlay (bg-black/40)
- Önde: isim (büyük) + bir cümle + iki CTA
- Scroll indicator alt orta (bouncing arrow)
- Mobilde: video yerine yüksek kalite hero image (performans)

Video format: WebM + MP4 fallback. Max 5MB. Süre 30 sn loop.
Poster image: video yüklenirken gösterilecek.

Hover animasyonlu proje grid

Aç ▾

Projeler grid'ini yeniden tasarla:

- Grid: 3 sütun (lg), 2 (md), 1 (mobil)
- Her kart: aspect-square veya aspect-4/3
- Hover'da:
  - Görsel: scale(1.05) + brightness(1.1)
  - Üzerine: overlay (gradient bottom)
  - Görünür: proje adı + kategori
  - Slight rotation (rotateX 2deg) for depth
- Mouse leave'de: yumuşak geri dön (300ms cubic-bezier)
- Loading: skeleton placeholder
- Click: shared element transition ile detay sayfasına

Framer Motion ile yap. prefers-reduced-motion respect et.

Gerçek Örnek

Bu rehberden gerçek bir vaka

Brief

Freelance UI/UX tasarımcı. 12 proje, çoğu mobile app + landing page. Lead toplamak istiyor.

Sonuç

3 saatte: hero video reel + 12 proje grid + hover animasyonları + dark mode default + iletişim formu. Vercel'de canlı, custom domain.

Next.jsFramer MotionMDXVercel

Sık Hatalar

Bunlardan kaçının

Hata

Çok fazla proje sergiledim — gerçek kalite gizleniyor

Çözüm

En iyi 8-12 proje. Geri kalanını gizle. 'Less is more' — işverenin attention span'i kısa.

Hata

Tek başlık 'Designer' yazdım

Çözüm

Belirgin ol: 'SaaS arayüzleri tasarlayan UI/UX designer' veya 'B2B startup'ları için brand designer'. Niş = işveren çeker.

Hata

İletişim sayfası çok genel

Çözüm

Belirli: 'Yeni proje için 2 hafta sonrası uygunum. €X-Y bütçe aralığı.' Net bilgi = ciddi lead.

SSS

Portfolyo için sık sorular

Behance/Dribbble varsa kendi portfolio gerekir mi?▾

Evet, kesinlikle. Kendi domain'iniz = profesyonel kimlik. Behance algoritmaya bağlı, kendi siteniz size ait. İşveren ikisini de görür ama 'kendi sitesi olan' daha ciddi algılanır.

Hangi platform — Webflow, Framer, Next.js?▾

Tasarımcıysanız Webflow/Framer (no-code, hızlı). Geliştiriciyseniz Next.js (geliştirici imajı). Fotoğrafçı: Pixieset veya custom Next.js (kontrol için).

Video reel uzunluğu?▾

Hero'da: 20-30 sn loop. Sessiz, autoplay. Detayda: 60-90 sn ses dahil. İşveren'in attention span: 7-10 sn — ilk hook orada.