Çalışan bir tasarımcı için portfolyo sitesi, garip bir orta noktada durur. Keskin görünmeli, anında yüklenmeli ve faturalandırılabilir çalışma saatlerinden çalmadan güncel kalmalıdır. Eski kurulumum Webflow üzerindeydi; Webflow, sürükle-bırak oluşturucular ile profesyonel çıktılar arasındaki boşluğu çoğu araçtan daha iyi dolduruyordu. Ancak 300 sterlinlik yıllık yenileme bildirimi geldiğinde kendime zor bir soru sormam gerekti: Değer için mi ödeme yapıyordum, yoksa sadece kolaylık için mi?

Sıfırdan yeniden inşa etmeye karar verdim. Yeni teknoloji yığınım (stack) Astro ve Sanity. Bir süre bununla yaşadıktan sonra, nelerin işe yaradığını, nelerin yaramadığını ve önceki araçlarıma kıyasla nerede durduğunu tam olarak aşağıda açıklıyorum.

Bir portfolyo için neden Astro?

Çoğu modern web framework'ü önce JavaScript gönderir, sonra diğer detayları düşünür. Astro bu varsayımı tersine çeviriyor. Derleme zamanında (build time) düz statik HTML oluşturur ve JavaScript'i yalnızca belirli bir bileşenin (component) gerçekten ihtiyaç duyduğu durumlarda tarayıcıya gönderir. Buna "adalar mimarisi" (islands architecture) diyorlar, ancak pratik sonuç daha basit: Portfolyo sayfalarımın ağırlığı neredeyse yok denecek kadar az.

Yönlendirme (routing) dosya tabanlıdır, bu nedenle yeni bir sayfa oluşturmak, bir dosyayı bir klasöre bırakmak kadar kolaydır. Bileşenler, eğer React, Vue veya Svelte ile uğraştıysanız size tanıdık gelecek bir sözdizimi (syntax) kullanır. Her yeni proje vaka çalışması (case study) eklemek istediğimde yeni bir paradigma aramak zorunda kalmıyorum.

Bununla birlikte, karmaşık bir web uygulaması oluşturmak için Astro'yu kullanmazdım. Eğer kimlik doğrulama süreçlerini kuruyor, global durumu yönetiyor veya gerçek zamanlı verileri işliyorsanız, framework ile savaşmak zorunda kalırsınız. Ancak pazarlama siteleri, bloglar ve portfolyolar için yoluma çıkmıyor. Sayfalar hızlı hissettiriyor çünkü gerçekten hızlılar. Bir başlığı veya paragrafı işlemek için bekleyen bir hydration yükü yok.

WordPress'ten Sanity'ye Geçiş

Bu yeniden inşa sürecinden önce, her zaman Advanced Custom Fields ile WordPress kullanıyordum. ACF, WordPress'e süper güçler kazandırıyor ancak yine de başkasının evini yapılandırıyorsunuz. Sanity ise tam tersi şekilde çalışıyor. İçerik modelinizin tam olarak nasıl görüneceğini tanımlayan bir şemayı (schema) kodla yazıyorsunuz ve Sanity, düzenleme arayüzünü sizin kararlarınızın etrafında inşa ediyor.

Bu kontrolü, yeniden kullanılabilir bloklardan oluşan basit bir sayfa oluşturucu (page builder) inşa etmek için kullandım. Bir kez hero bölümü tanımladım. Bir kez testimonial carousel'i tanımladım. Bir kez kart ızgarası (card grid) tanımladım. Artık yeni kod yazmadan veya bir sayfa şablonuna dokunmadan, bu blokları istediğim sırada üst üste dizerek yeni sayfalar oluşturabiliyorum.

Zihniyet farkı önemli. WordPress ile kendimi sık sık bir blog olmak isteyen bir araçla boğuşuyormuş gibi hissediyordum. Sanity ile ise yazılım geliştiriyormuş gibi hissediyorum. İçerik, shortcode'larla karışmış stillendirilmiş HTML yerine temiz, yapılandırılmış bir veriye dönüşüyor. Proje açıklamalarım, istersem bir mobil uygulamaya veya bir bültene aktarabileceğim taşınabilir nesneler olarak yaşıyor.

Temiz kalan bir dağıtım (deployment) iş akışı

Eski WordPress iş akışım; FTP yüklemeleri, staging alt alan adları ve her an en kötü zamanda bozulabilecek eklenti güncellemelerinin yarattığı bir karmaşaydı. Sadece bir yazım hatasını düzeltip yayınlamak için bile zihinsel bir kontrol listesi tutuyordum.

Yeni iş akışı ise kısa:

  • Değişiklikleri yerelde yapıyorum ve anında görüyorum.
  • Kod doğru hissettirdiğinde GitHub'a commit ediyorum.
  • Vercel, push işlemini algılıyor ve siteyi otomatik olarak yayına alıyor (deploy ediyor).

FTP istemcisi yok. Senkronize edilecek bir staging veritabanı yok. Depo (repository), tek gerçeklik kaynağıdır (source of truth).

İçerik de aynı şekilde çalışıyor. Sanity içinde bir yazıyı yayınladığımda veya güncellediğimde, bir webhook Vercel'e siteyi yeniden derlemesini söylüyor. Statik sayfalar taze içerikle yeniden oluşturuluyor ve bir sunucuya dokunmama gerek kalmadan CDN güncelleniyor. Her şey; manuel kopyalama, dışa aktarma veya bir eklenti veritabanı taşımasının (migration) gerçekten çalışması için dua etme gereği duymadan senkronize kalıyor.

Tasarım ve kodu token'lar ile birbirine bağlamak

Bu yeniden inşa sürecindeki daha sessiz ama önemli ilerlemelerden biri, düzgün bir token sistemi kurmaktı. Sitedeki her renk, tipografi ölçeği ve boşluk değerine sahip tek bir JSON dosyası tutuyorum. O dosya patron.

Aynı değerleri doğrudan Figma'ya çekmek için Token Studio kullanıyorum. Tasarım dosyam surface-default dediğinde, kodun kullandığı değerle tam olarak aynı sayıya işaret ediyor. Küçük bir script, derleme zamanında JSON'ı CSS custom properties'lerine dönüştürüyor; böylece stil sayfalarım sabitlenmiş (hardcoded) hex kodları yerine --color-surface-default gibi değişkenlere atıfta bulunuyor.

Bunun pratikte neden önemli olduğuna gelelim. Eğer marka kırmızımın mobil ekranlarda biraz fazla agresif olduğunu fark edersem, JSON dosyasındaki tek bir değeri değiştiriyorum. Figma kütüphanesi güncelleniyor. CSS güncelleniyor. Site genelindeki her örnek güncelleniyor. grep yapmama gerek kalmıyor.