Bu Portföyü Nasıl Tasarladım? (Next.js 16, Sanity, next-intl)

1. Hedefi Netleştirmek: Sadece CV Değil, Ürün Gibi Portföy

Portföy tasarımına başlamadan önce kendime şu soruyu sordum:

• ▹

  “Bu siteyi ziyaret eden bir kişi, 30–60 saniye içinde benim hakkımda ne anlamalı?”

Bu soruya verdiğim cevaplar:

• ▹

  Ben sadece “frontend geliştirici” değilim; veri, ürün ve yazılım kesişiminde olmak istiyorum.

• ▹

  Hem Türkçe hem İngilizce iletişim kurabilmeliyim.- Gerçek projeleri, gerçek veri setlerini ve gerçek deneyimlerimi göstermek istiyorum.

• ▹

  Sadece görsel olarak güzel değil, teknik olarak da temiz ve modern bir yapı olmalı.

Bu yüzden siteyi tasarlarken:

• ▹ Bir ürün gibi düşündüm (navigasyon, akış, CTA’lar, içerik hiyerarşisi),
• ▹ Ve teknoloji seçimlerini de bu hedeflere göre yaptım.

---
2. Teknoloji Seçimi: Next.js 16, Sanity ve next-intl

Neden Next.js 16 (App Router)?

• ▹ Modern mimari: App Router ile `app/` tabanlı dosya yapısı, server components, route bazlı layout’lar gibi özellikler geliyor.
• ▹ SEO ve performans: Statik üretim + sunucu tarafı render iyi bir kombinasyon.
• ▹ Kolay deploy: Vercel ile doğal entegrasyon.

Bu projede özellikle işime yarayan özellikler:

• ▹ `app/[locale]/...` yapısıyla çok dilli routing,
• ▹ `generateMetadata` ile sayfa bazlı SEO ayarları,
• ▹ `loading.tsx`, `error.tsx`, `not-found.tsx` gibi durum sayfaları.

Neden Sanity?

Başta tüm içerikleri dosya içinde (JSON / çeviri dosyaları) tutmayı düşünüyordum; ama:

• ▹ Proje detayları, referanslar, deneyimler, sertifikalar ve blog yazıları zamanla büyüyecek ve değişecek.
• ▹ Kodda her değişiklik için deploy yapmak istemiyorum.

Bu yüzden:

• ▹ Proje, referans, deneyim, sertifika ve blog yazıları için Sanity schema’ları tanımladım.
• ▹ İçerikleri TR ve EN alanlarıyla birlikte Sanity üzerinden yönetiyorum.
• ▹ Next.js tarafında sadece locale’e göre doğru alanı seçen helper’lar yazdım.

Bu bana şunları sağladı:

• ▹ İçerik güncellemeleri için sadece Sanity Studio’ya girip kaydetmem yeterli.
• ▹ Blog gibi sürekli büyüyen alanlarda kod tarafı hep sade kalıyor.

Neden next-intl?

İki farklı katmanı ayırdım:

• ▹ UI metinleri (navigasyon, butonlar, hata mesajları vb.) → `next-intl` mesaj dosyalarında (`messages/tr.json`, `messages/en.json`)
• ▹ Dinamik içerik (projeler, deneyimler, referanslar, blog) → Sanity

`next-intl` ile:

• ▹ `app/[locale]/layout.tsx` içinde `NextIntlClientProvider` kurarak, tüm UI’da tip güvenli çeviri kullanıyorum.
• ▹ `middleware` + `routing` yapısı ile `/tr/...` ve `/en/...` rotalarını yönetiyorum.
• ▹ Navbar’daki TR / EN switcher ile route üzerinde locale değiştirme sağlıyorum.

Bu yapı sayesinde:

• ▹ Projenin görsel iskeleti ve UI metinleri kodda,
• ▹ Değişken içerikler ise CMS’de tutuluyor.

---

3. Tasarım Kararları: Bento Yapı, Karanlık Tema, Odaklı Navigasyon

Bento Tarzı Layout

Ana sayfa, about ve blog sayfasında benzer bir “bento” hissi var:

• ▹ Farklı içerik blokları, grid içinde kart gibi duruyor.
• ▹ Her blok bağımsız ama aynı görsel dilde:
• ▹ Yuvarlatılmış köşeler,
• ▹ İnce border,
• ▹ Hafif gradient’ler ve glow efektleri.

Neden böyle?

• ▹ Aynı sayfada hem kısa özetler (skills, değerler, deneyimler) hem de daha büyük bloklar (öne çıkan projeler, blog featured) göstermek istedim.
• ▹ Klasik “tek sütun uzun makale” yerine, daha ürün odaklı ve modern bir düzen olsun istedim.

Karanlık Tema ve Renk Paleti

• ▹ Arka plan: neredeyse siyah `050505` + koyu gri tonlar
• ▹ Vurgu rengi: mavi (`2563eb` civarı)
• ▹ Yazılar: ana içerik için açık gri, başlıklar için beyaz

Bu seçimlerin sebebi:

• ▹ Veri / teknoloji / ürün dünyasında karanlık tema oldukça yaygın ve göze hoş görünüyor.
• ▹ Mavi, hem profesyonel hem de “tech” hissi veren bir renk.

Navigasyon: Az Ama Net

Navbar’da şu başlıklar var:

• ▹ Home
• ▹ About
• ▹ Projects
• ▹ Blog
• ▹ Contact

Neden bu kadar sade?

• ▹ Ziyaretçi ilk 5–10 saniyede “Nereye gideceğini” düşünmek zorunda kalmasın.
• ▹ Her sayfa belirli bir amacı taşıyor:
  • ▹ Home → Genel izlenim, kim olduğun, öne çıkanlar
  • ▹ About → Kariyer yolculuğun, değerlerin, referanslar
  • ▹ Projects → Ürettiğin işler- Blog → Düşünce şeklin, teknik derinliğin
  • ▹ Contact → Aksiyon (iletişim, iş teklifi, işbirliği)

---

4. Çok Dillilik: TR / EN İçin Hibrit Yaklaşım

Sitenin hem TR hem EN versiyonu var ama her şeyi birebir çevirmedim. Şöyle bir strateji izliyorum:

• ▹ UI ve kritik sayfalar (nav, footer, hata sayfaları, contact form) → Tam iki dil.
• ▹ Projeler ve blog yazıları → Öncelik TR, önemli / güçlü olanları EN’e de taşıyorum.

Teknik tarafta:

• ▹ Proje, deneyim, referans ve blog şemalarında:-`title_tr`, `title_en`
  • ▹ `description_tr`, `description_en`
  • ▹ `body_tr`, `body_en` gibi alanlar var.
• ▹ Next.js tarafında locale’e göre:
  • ▹ Önce ilgili dil,
  • ▹ Yoksa diğer dil,
  • ▹ O da yoksa basit bir fallback string kullanıyorum.

Bu sayede:

• ▹ İçerik yönetimi benim kontrolümde,
• ▹ Kodda “çeviri şişmesi” yaşamıyorum,
• ▹ Kullanıcı hangi dilde gezerse gezsin, boş / anlamsız alan görmüyor.

---

5. Sanity ile Yönetilen Alanlar: Neyi Neden CMS’e Taşıdım?

Bu portföyde Sanity üzerinden yönettiğim başlıca alanlar:

• ▹ Projects (projeler)
• ▹ Experiences (deneyimler)
• ▹ Testimonials (referanslar)
• ▹ Certificates (sertifikalar)
• ▹ Posts (blog yazıları)

5.1. Projeler

Projeler benim için sadece “kart” değil, case study:

• ▹ Her proje için:
  • ▹ Başlık (TR/EN),
  • ▹ Kısa açıklama,
  • ▹ Detaylı içerik (`body_tr/en`),
  • ▹ Kullanılan teknolojiler,
  • ▹ GitHub / demo linkleri,
  • ▹ Kapak ve galeri görselleri.

Liste sayfasında:

• ▹ Sanity’den gelen projeleri locale’e göre işleyip, kart grid’i olarak gösteriyorum.
• ▹ Filtreleme ve arama ile ziyaretçi hızlıca ilgilendiği projeleri bulabiliyor.

Detay sayfasında:

• ▹ `PortableText` ile Sanity’den gelen gövde içeriğini render ediyorum.
• ▹ Aynı proje hem TR hem EN metinlerle yönetilebiliyor.

5.2. Deneyimler ve Referanslar

Bu alanları CMS’e taşımanın sebebi:

• ▹ Zamanla yeni deneyimler ve referanslar eklenecek.
• ▹ İş değiştirdiğimde veya yeni bir referans aldığımda, kodu açmadan sadece Sanity’den güncellemek istiyorum.

Deneyimler:

• ▹ Şirket adı, pozisyon (TR/EN), tarih aralığı, logo / logo path, sıralama alanları var.
• ▹ Frontend’de bu verileri about sayfasında “kariyer kartları” olarak gösteriyorum.

Referanslar:

• ▹ İsim, şirket, pozisyon, e-posta ve sıralama alanları var.
• ▹ About sayfasındaki referans kartlarında, e-postalar UX bozulmadan görünecek şekilde tasarlandı.

5.3. Blog

Blog, bu portföyün “dinamik” tarafı:

• ▹ Uzun vadede:
  • ▹ Teknik notlar,
  • ▹ Proje vaka çalışmaları,
  • ▹ Kariyer ve öğrenme yolculuğu içerikleri burada olacak.
• ▹ Sanity şemasında:
  • ▹ `title_tr/en`, `excerpt_tr/en`, `body_tr/en`,
  • ▹ `tags`, `publishedAt`, `readingTime`, `coverImage`.

Liste sayfasında:

• ▹ En güncel yazı featured kart olarak büyük gösteriliyor.
• ▹ Diğer yazılar bento grid yapısında, tarih ve okuma süresiyle listeleniyor.

Detay sayfasında:

• ▹ Kapak görseli, başlık, tarih, okuma süresi, etiketler ve `PortableText` içeriğiyle tam bir blog makalesi görünümü var.

---

6. Kullanıcı Deneyimi: Küçük Ama Önemli Dokunuşlar

Bu projede özellikle dikkat ettiğim bazı UX detayları:

• ▹ Yüklenme durumları:
  `loading.tsx` dosyalarıyla, sayfalar veri çekerken skeleton / spinner ile boş beyaz ekran yerine anlamlı bir geçiş sunuyor.
• ▹ Hata ve 404 sayfaları:
  `error.tsx` ve `not-found.tsx` ile, hem çok dilli hem de tasarımla uyumlu özel sayfalar var.
• ▹ Sosyal paylaşım:
  Proje detaylarında `navigator.share` ve platform linkleriyle hem mobil hem web uyumlu paylaşım butonları.
• ▹ Yatay scroll + butonlar:
  Özellikle teknolojiler ve sertifikalar alanında, sadece touch scroll’a güvenmek yerine, masaüstü kullanıcılar için de sol/sağ butonlarla daha sezgisel bir deneyim sağladım.
• ▹ İletişim formu:
  Başta `mailto` ile başlasam da, sonrasında Next.js API route + Resend kombinasyonu ile gerçek bir iletişim akışı kurdum.

---

7. Düşünce Tarzım: Neyi Bilerek Yapmadım?

Bu portföyü tasarlarken, özellikle yapmamayı seçtiğim bazı şeyler de oldu:

• ▹ Her sayfayı animasyonla doldurmadım. Sade ama akıcı birkaç Framer Motion efekti yeterli; performans ve okunabilirlik öncelikli.
• ▹ Her şeyi tek sayfaya sıkıştırmadım. One-page yerine, net ayrılmış sayfalar:
• ▹ Hakkımda → Ben kimim?- Projeler → Ne ürettim?
• ▹ Blog → Nasıl düşünüyorum?- İletişim → Ne yapmak istiyorsun?
• ▹ Sırf “havalı” görünmek için gereksiz teknoloji eklemedim. Kullandığım her teknoloji (Next.js, Sanity, next-intl, Resend vb.) gerçek bir ihtiyacı çözüyor.

---

8. Sonuç: Bu Portföy Benim İçin Ne İfade Ediyor?

Bu portföy benim için:

• ▹ Sadece “CV koyduğum bir sayfa” değil,- Düşünce tarzımı, teknik yaklaşımımı ve ürün odaklı bakış açımı gösteren canlı bir vitrin.

Zamanla:

• ▹ Yeni projeler eklendikçe,
• ▹ Blog yazıları arttıkça,
• ▹ Deneyimler ve referanslar güncellendikçe,

bu site de benimle birlikte büyüyecek.

Bu yazıyı hem kendime bir dökümantasyon olsun diye, hem de benzer bir yol izlemek isteyenlere somut bir örnek olsun diye yazdım. Eğer aklında benzer bir portföy veya teknik blog fikri varsa ve nereden başlayacağını bilemiyorsan, bu mimariyi kendine göre uyarlayarak kullanabilirsin.