derinbartan.com: Next.js ve Framer Motion ile Şampiyon Sporcu Portfolyosu

ILCA 4 U16 Dünya ve Avrupa Şampiyonu kızım Derin Bartan’ın uluslararası yelken kariyerini dijital dünyada en iyi şekilde yansıtmak için Next.js ve Framer Motion teknolojilerini kullanarak modern, interaktif ve performanslı bir portfolio sitesi geliştirdim. Bu yazıda, projenin teknik detaylarını, animasyon stratejilerini ve bir dünya şampiyonu için dijital platform oluşturma deneyimimi paylaşacağım.

Proje Vizyonu: Şampiyonluğu Dijitale Taşımak

Derin’in Los Angeles’ta kazandığı Dünya Şampiyonluğu ve Polonya’daki Avrupa Şampiyonluğu gibi büyük başarılarını sadece listelemek yerine, ziyaretçilere bu başarıların büyüklüğünü hissettiren bir deneyim sunmayı hedefledim. Bu nedenle Next.js’in güçlü performansını Framer Motion’ın etkileyici animasyon yetenekleriyle birleştirerek, her scroll’da, her hover’da ve her tıklamada şampiyonluk ruhunu yansıtan bir site oluşturdum.

Teknik Mimari: Next.js 14 App Router

Projeyi Next.js 14’ün App Router mimarisi üzerine kurdum. Bu seçimin arkasındaki temel nedenler şunlardı:

Server Components sayesinde, büyük JavaScript bundle’larını client’a göndermeden, sunucu tarafında render edilen hızlı bir ilk yükleme deneyimi sağladım. Özellikle mobil cihazlarda, uluslararası yarışlarda takip eden aileler ve antrenörler için kritik olan hızlı erişim sağlandı.

Metadata API’yi kullanarak, her sayfanın SEO optimizasyonunu dinamik olarak yönettim. “ILCA 4 Dünya Şampiyonu”, “Türkiye Yelken Milli Takımı” gibi önemli anahtar kelimeleri stratejik olarak yerleştirdim.

Framer Motion ile Dinamik Animasyonlar

Sitenin can alıcı noktası, Framer Motion ile oluşturduğum animasyonlar oldu. Her animasyon, Derin’in yelkendeki dinamizmini ve başarı yolculuğunu yansıtacak şekilde özenle tasarlandı.

Hero Section Animasyonları

Ana sayfadaki hero section’da, şampiyonluk başlıklarının viewport’a girdikçe yumuşak bir şekilde belirmesi için scroll-triggered animasyonlar kullandım. “ILCA 4 U16 Dünya Şampiyonu 2025” başlığı, ziyaretçilerin dikkatini çekmek için özel bir reveal animasyonuyla sunuluyor.

// Hero başlık animasyonu örneği
const titleVariants = {
  hidden: { opacity: 0, y: 50 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.8,
      ease: "easeOut"
    }
  }
};