Geliştiricilerin, sadece keskin bir bıçağa ihtiyaç duyarken İsviçre çakıları inşa etme gibi kötü bir alışkanlığı var. İlk HTML satırı yazılmadan önce ağır frontend framework'lerine sarılıyoruz. Animasyon kütüphaneleri, durum yönetimi araçları ve küçük bir şirketi çalıştırabilecek kadar güçlü derleme süreçleri ekliyoruz. Sonra portfolyo sitelerimizin neden üç saniyede ekrana çizildiğini, navigasyonun mobilde neden bozulduğunu ve işe alım yöneticilerinin, aylarımızı verdiğimiz projeleri görmeden neden hemen siteden ayrıldığını merak ediyoruz.
Son portfolyomda farklı bir yol izledim. Sonsuz bağımlılıklar ekosisteminden uzaklaştım ve tüm siteyi semantik HTML ve temiz CSS ile inşa ettim. JavaScript framework'ü yok. Derleme adımları yok. Üçüncü taraf animasyon motorları yok. Sadece platformun kendisi, CSS Grid ve Flexbox ile yönetilen düzen ve hızı ve netliği birer düşünceden ziyade özellik olarak gören bir tasarım felsefesi.
Sonuç hafif, hızlı ve profesyonel. İşte tam olarak nasıl yaklaştığım.
Temelle Başlayın
Çoğu aşırı mühendislik (over-engineering) temelden başlar. Bir portfolyonun tek sayfalık bir uygulama (SPA) olmasına gerek yoktur. Çalışmalarınızı göstermesi, insanlara sizinle nasıl iletişime geçeceklerini söylemesi ve aradan çekilmesi gerekir. Semantik HTML kullandım çünkü tarayıcı zaten bir nav, bir article ve bir footer öğesini nasıl işleyeceğini biliyor. Doğru iş için doğru öğeyi kullandığınızda; erişilebilirlik, arama motoru görünürlüğü ve duyarlı (responsive) davranışları esasen bedavaya getirmiş olursunuz. Ayrıca daha az kod yazarsınız. Beş ARIA özniteliğine sahip bir div, sadece bir button öğesinin kelime kalabalığı yapan bir taklididir. Bundan tamamen kaçındım.
Düzen için CSS Grid ve Flexbox fazlasıyla yeterli. Grid makro yapıyı yönetir: genel sayfa bölümleri, proje galerisi, ana blokların hizalanması. Flexbox ise mikro etkileşimleri yönetir: o kapsül içindeki navigasyon bağlantıları, kartların içindeki metni ortalamak, bir footer'ı viewport'un en altına itmek. Birlikte, 2018 yılında on iki sütunlu bir grid framework'ü içe aktarmak için sahip olabileceğiniz her türlü nedeni ortadan kaldırıyorlar. Kod okunabilir kalıyor. CSS dosyası küçük kalıyor.
Renk, Tipografi ve Ölçülü Olmak
Portfolyonun yüklendiği an sakin bir his vermesini istedim. Arka plan, hafif radyal gradyanlara sahip açık bir temel kullanıyor. Agresif bir şey yok. Gradyan düşük opaklıkta durarak, sayfanın düz hissettirmesini engelleyen ancak dikkat çekmek için bağırmayan yumuşak bir derinlik yaratıyor. Saf CSS olduğu için anında yükleniyor. Sıkıştırılacak hero görselleri, yönetilecek WebP yedekleri veya yapılandırılacak JavaScript lazy-loading kütüphaneleri yok.
Kişiliği tipografi taşır. Outfit ile Ovo'yu eşleştirdim. Geometrik bir sans-serif olan Outfit, tüm UI metinlerini yönetiyor: navigasyon etiketleri, buton metinleri, gövde metni, meta detaylar. Ekranlarda keskin görünüyor ve küçük boyutlarda okunabilir kalıyor. Orta kontrastlı bir serif olan Ovo ise başlıklar ve ana manşetler için hizmet ediyor. Bu eşleşme sayfaya sessiz bir editoryal his veriyor. Bir tema gibi değil, tasarlanmış gibi görünüyor. En önemlisi, her iki font da bir font servisine yapılan tek bir çağrıdan veya kendi barındırılan (self-hosted) dosyalardan yükleniyor. Düzen kayması (layout shift), biçimlendirilmemiş metin parlaması veya ilk render'dan sonra script ile ağırlıkların değişmesi gibi durumlar yaşanmıyor.
Yüzen Kapsül Menü
Navigasyon, portfolyoların genellikle kendi ağırlıkları altında çöktüğü yerdir. Tam ekran overlay menüler, kademeli animasyon scriptleri ve bir sınıfı (class) değiştirmek için kırk satır JavaScript gerektiren hamburger ikonları... Bunların hiçbirini istemedim.
Yüzen, glassmorphic bir kapsül menü inşa ettim. Kenarları yuvarlatılmış, viewport'un üst kısmına yakın, sabit (fixed) konumlandırılmış tek bir yatay kapsayıcıdır. Glassmorphism, yarı saydam bir arka plan renginden ve bir backdrop-filter: blur() özelliğinden gelir. İçeriği kapatmadan üzerinde yüzer, her bölüme anında erişim sağlar ve tam bir yeniden tasarım gerektirmeden daha küçük viewport'larda zarif bir şekilde daralır. Efekt modern görünüyor çünkü kompozisyonu bir canvas kütüphanesi değil, tarayıcı hallediyor.