Building My Developer Portfolio

A deep dive into the design decisions, architecture, and development process behind sametzengin.dev.

Neden Yaptım?

Her developer bir noktada LinkedIn profili veya klasik bir CV'nin yeterli olmadığını fark ediyor. Ben de sadece ne yaptığımı değil, nasıl düşündüğümü ve nasıl çalıştığımı gösteren bir alan istedim.

Hazır bir portfolio template kullanmak yerine, bir yazılım dokümantasyonu template'inden yola çıktım. Mantık basit: dokümantasyon framework'leri karmaşık teknik bilgiyi temiz ve navigasyon dostu şekilde sunmak için tasarlanmış. Aynı yapıyı kendimi sunmak için neden kullanmayayım?

Mimari

Site Next.js ve MDX (Markdown + JSX) üzerine kurulu. Bu sayede her sayfa bir MDX dosyası olarak hızlıca yazılabiliyor, ama aynı zamanda istediğim yere React component'i ekleyebiliyorum.

Temel teknik kararlar:

• MDX-first içerik : Experience, skills, blog, stack gibi her sayfa MDX dosyası. İçerik güncellemesi markdown düzenlemek kadar basit, ama interaktif React component'leri de inline olarak kullanılabiliyor.
• Framer Motion animasyonları : Ana sayfa ve projeler sayfasındaki kart hover efektleri useMotionValue ile radial gradient mask kullanıyor. Cursor'u takip eden bu efekt premium bir his veriyor.
• API-style contact form : Klasik bir form yerine, mesajınızı yazarken gerçek API request'ini birden fazla dilde (cURL, JavaScript, Python, PHP) gösteren interaktif bir code playground yaptım.
• CV Generator sistemi : Tracked link'ler, QR code'lar ve analytics içeren, pozisyona özel PDF CV'ler üreten dahili bir tool. Tamamı siteye entegre.

Tasarım Felsefesi

Üç prensiple yaklaştım:

1. Dokümantasyon-inspired navigasyon : Kategorize edilmiş bölümlerle (Career, Connect vs.) persistent sidebar, derin içeriği taranabilir kılıyor.
2. Dark-first, light-capable : Tüm tasarım sistemi koyu zinc paletinde emerald aksan renkleriyle kuruldu, ama her component light mode'da da çalışıyor.
3. Show, don't tell : Stack sayfası sadece araçları listelemiyor. Herhangi bir linkin üzerine geldiğinizde o aracın sitesinin canlı screenshot preview'ını gösteriyor, global cache ile anında yükleniyor.

Stack Sayfası

En sevdiğim feature'lardan biri. Productivity & Security, Development, AI & Intelligence ve MCP Servers gibi kategorilerle yapılandırılmış. Her araç neden kullandığımı açıklayan kişisel notlarla birlikte sunuluyor.

Ne Öğrendim?

Kendi portfolyonuzu yapmak bir kısıtlama egzersizi. Over-engineer veya over-design etmek çok kolay. En iyi portfolio'lar teknolojinin kaybolduğu ve içeriğin kendini anlattığı portfolio'lar.

Bu proje bana portfolyoma bir müşteri projesi gibi yaklaşmayı öğretti: net mimari, tutarlı tasarım sistemi ve gerçek geri bildirime dayalı iterasyon.