emirbalin.com 9 Ekim 2026’dan beri yeni tasarımıyla yayında. Adres aynı, içeriğin çoğu da aynı. Değişen şey, sitenin nasıl yapıldığı ve nasıl yönetildiği.
Bu yazıda yeni tasarım sürecini anlatıyorum: neden değiştirdiğimi, tasarımın nasıl ortaya çıktığını ve bu işi Claude ile nasıl yürüttüğümü. Sonunda da neyin bittiğini, neyin sırada olduğunu açıkça yazdım.
Neden değiştirdim
Eski site SvelteKit ile yazılmıştı. SvelteKit, web sitesi yapmak için kullanılan bir yazılım çatısı. Sorun şuydu: her küçük güncelleme kod demekti. Bir proje eklemek, bir cümleyi düzeltmek ya da deneyim listesine yeni bir satır koymak için dosyaları açmam, değiştirmem ve siteyi yeniden yayına almam gerekiyordu.
Üç şey istiyordum:
- Panelden yönetim. İçeriği, menüyü ve iletişim bilgilerini tarayıcıdan, kod açmadan değiştirebilmek.
- İki dil. Türkçe ve İngilizce sayfaların birbirine bağlı olması, ziyaretçinin tek tıkla dil değiştirebilmesi.
- Arama motorlarında doğru görünme. Her sayfanın kendi başlığı, açıklaması ve paylaşım görseli olsun; site haritası kendiliğinden güncellensin.
Bunları eski yapıya tek tek eklemek mümkündü. Ama her biri yine kod demekti ve beni başladığım yere geri götürecekti.
Neden WordPress
WordPress‘i paneli için seçtim. Yazı, sayfa, menü ve görsel aynı yerden yönetiliyor. Ama hazır ücretli bir tema ya da sürükle bırak çalışan bir sayfa oluşturucu kullanmadım. Sitenin her parçasının nasıl çalıştığını bilmek istedim.
Onun yerine bana özel bir tema yazdım. Tema iki katmanlı. Alttaki katman ortak renkleri, yazı tiplerini ve açık/koyu tema düğmesini taşıyor. Üstteki katman yalnızca emirbalin.com’a ait şablonları içeriyor. Temayı böyle ayırdım, çünkü aynı temeli ileride başka bir site de kullanacak.
Panelde neyin değişip neyin değişmeyeceğine de baştan karar verdim. İçeriği, menüyü, iletişim ve sosyal medya bilgilerini, ana sayfadaki bölümlerin sırasını ve görünürlüğünü, hazır renk varyantlarını panelden değiştirebiliyorum. Bölümlerin tasarımı ise kilitli. Şablonlar yalnızca kodda duruyor. Böylece panelde yanlış bir tıklama tasarımı bozamıyor.
Ana sayfa sekiz bölümden oluşuyor: tam ekran fotoğraflı bir açılış, kısa bir hakkımda yazısı, deneyim ve eğitim için bir zaman çizelgesi, projeler, konulara göre gruplanmış yetkinlikler, referanslar, son yazılar ve iletişim. Bir bölümde gösterilecek bir şey yoksa, örneğin henüz referans yoksa, o bölüm sayfada hiç görünmüyor. Sayfada boş bir başlık bırakmak istemedim; bölüm dolunca kendiliğinden geri geliyor.
Yeni tasarım nasıl çıktı
Başlangıç noktam açık bir zemin, fotoğrafın öne çıktığı bir ana sayfa ve dergi hissi veren bir tipografiydi. Koyu zemin üstüne parlayan camgöbeği ve buzlu cam efekti gibi çok sık görülen bir görünümden bilerek uzak durdum.
Palet
Metin rengi koyu lacivert (#19253b). Zemin sıcak bir kırık beyaz (#fbfaf7). Ana renk, turkuazdan maviye giden bir su geçişi (#2be0b7, #12b3ab, #009eff). Vurgu için az miktarda pembe kullandım (#fc6999). Panelden seçilebilen ikinci bir hazır palet daha var: su geçişinin yanında pembe yerine güneş tonları kullanan bir varyant.
Bir kuralım vardı: parlak tonlar doğrudan metin rengi olmuyor. Bağlantı gibi okunması gereken her şey için bu renklerin koyulaştırılmış hâllerini kullandım. Örneğin bağlantı rengi koyu bir turkuaz (#08756c). Böylece yazı zeminden yeterince ayrılıyor.
Yazı tipleri
Başlıklarda Fraunces, gövde metninde Plus Jakarta Sans var. Fraunces’i başlıklara karakter kattığı için, Jakarta’yı uzun metinde rahat okunduğu için seçtim. İkisini de kendi sunucumdan yüklüyorum. Dosyalar küçük kalsın diye yalnızca kullandığım kalınlıkları ve Türkçe için gereken karakterleri alıyorum. Türkçe harflerin (ğ, ş, ı, İ, ç, ö, ü) hepsinin doğru göründüğünü ayrıca kontrol ettim.
EB mührü
Header’daki logo, lacivert yuvarlak bir kare içinde Fraunces ile yazılmış “EB” harfleri. Sağ altta küçük pembe bir nokta var. Bu nokta eskiden adımın sonundaydı; yeni tasarımda mühre taşındı.
İlk denemede nokta B harfinin kıvrımına biniyordu. Ekranda yaklaşık bir piksellik bir fark, ama gözüme takıldı. Noktayı biraz sağa ve aşağı aldım. Artık harfle arasında ince bir boşluk var. Tarayıcı sekmesindeki küçük simge de bu mührün sadeleşmiş bir hâli: tek bir E harfi ve yine o pembe nokta.
Açık ve koyu tema
Varsayılan görünüm açık tema. Header’daki düğmeyle koyu temaya geçilebiliyor ve seçim tarayıcıda hatırlanıyor. Koyu temada zemin derin bir lacivert (#111a2b). Bağlantı ve vurgu renkleri de koyu zeminde okunacak şekilde ayrıca ayarlandı. Koyu temayı seçtiysen sayfa açılırken bir an beyaz görünüp sonra kararmıyor; tema daha ilk boyamadan önce uygulanıyor.
Header
Ana sayfada header, fotoğrafın üstünde saydam başlıyor. Aşağı kaydırınca gizleniyor, yukarı kaydırınca dolu bir zeminle geri geliyor. Bu geçişte mühür de renk değiştiriyor: koyu fotoğrafın üstünde açık renkte, dolu zeminde lacivert. Header’ın sağında dil değiştirici, tema düğmesi ve “İletişime Geç” düğmesi duruyor.
Deneyim ve eğitim bölümünde zaman çizelgesinin çizgisi sayfayı kaydırdıkça çiziliyor, kartlar da sırayla açılıyor.
Hareketler sayfanın içeriğini değiştirmiyor, yalnızca görünümü etkiliyor. Cihazında hareketi azaltma ayarı açık olanlar için animasyonlar tamamen kapanıyor. Sayfalar arasında geçerken kısa bir geçiş efekti var; bunu desteklemeyen tarayıcılarda sayfa normal şekilde açılıyor. Tam ekran bir “yükleniyor” ekranı ise yok.
Footer’da eski sitenin düzenini korudum, yalnızca görünümünü yeni tasarıma uydurdum. Blog yazılarında masaüstünde sağda sabit duran küçük bir “Hakkımda” kartı var. Telefonda bu kart yazının altına iniyor.
Claude ile nasıl çalıştım
Bu siteyi Claude ile birlikte çalışarak yaptım. Buna vibe coding deniyor: ne istediğini düz bir dille anlatıyorsun, kodu yapay zekâ yazıyor. Kulağa kolay geliyor. Ama işin büyük kısmı kod yazmak değil, ne istediğini netleştirmek.
Kendime dört kural koydum:
- Önce plan, sonra onay, sonra küçük adımlar. İşi turlara böldüm. Her turun başında planı okudum, onay verdim, sonra değişikliği küçük parçalar hâlinde gözden geçirdim.
- Önce prototip. Temaya geçmeden önce statik bir prototip hazırladım. İki paleti ve iki yazı tipi eşleşmesini yan yana koyup karşılaştırdım, kararı orada verdim.
- Tahmin değil ölçüm. “Hızlı oldu” ya da “erişilebilir” gibi sözlere güvenmedim. Kontrast, klavyeyle gezinme ve erişilebilirlik için otomatik testler yazdırdım ve değişikliklerden sonra koşturdum.
- Kararlar bende. Claude seçenekleri ve gerekçelerini yazdı. Hangi rengin kalacağına, hangi özelliğin bekleyeceğine ben karar verdim.
Bu çalışma biçimi bana bir şey öğretti. Yapay zekâ ile iyi bir iş çıkarmak, iyi bir iş tanımı yazmaktan geçiyor. Planlama, kontrol ve son söz bende kaldığı için ortaya çıkan iş de bana ait.
Küçük bir örnek vereyim. Yayından önceki son turda İngilizce metinleri taradım ve “Turkey” yazan dokuz yeri “Türkiye” olarak düzelttim. Kural benimdi; dokuz yeri bulup düzeltmek Claude’un işiydi. Sonra sonucu ben kontrol ettim.
Neyi hedefledim, neyi yaptım, sırada ne var
Hedefim, içeriğini kendim yönetebildiğim, iki dilde çalışan, sade bir kişisel siteydi. Bu arada altyapıyı da değiştirdim. Site artık kendi sunucumda, daha güvenli ve hızlı bir altyapıda çalışıyor.
Yapılanlar:
- Bana özel tema, açık ve koyu görünüm
- Türkçe ve İngilizce, birbirine bağlı sayfalar
- Panelden yönetilen içerik, menü ve ana sayfa bölümleri
- Her sayfa için başlık, açıklama ve site haritası
- Onaydan sonra yayımlanan referans formu
- Çerezsiz yapı: site ziyaretçiye çerez yazmıyor, bu yüzden çerez bandı da yok
Referans formunu da dikkatle kurdum. KVKK onay kutusu zorunlu. Gelen referans önce bana düşüyor ve ben onaylamadan yayımlanmıyor. Form verisini kimseyle paylaşmıyorum; bana gelen bildirimde de kişisel veri yok.
Her şey bitmedi. Bazı işleri sonraya bıraktım, çünkü önce temelin sağlam olmasını istedim. Sırada olanlar:
- Mola: sitenin mesai dışı köşesi
- Rehber: kondüktörler için bir yardım sitesi (ayrı bir yazıda anlatacağım)
- Çeviri kolaylığı: Türkçe metinleri panelden tek bir paket hâlinde çeviriye verip geri alabilmek
Mola: üzerinde çalışıyorum
Header’da “Mesai / Mola” yazan küçük bir anahtar göreceksin. Şimdilik “yakında” diyor. Mola, sitenin mesai dışı sayfası olacak. Orada ne dinlediğimi, ne izlediğimi, ne okuduğumu ve nereleri gezdiğimi paylaşacağım. Anahtara basınca site daha oyuncu bir renk moduna geçecek. Tasarımı onaylandı, altyapısı kuruldu. Açmadan önce birkaç kontrolü bitirmem gerekiyor. Yakında.
Bir göz at
Yeni tasarımı en iyi projelerde görebilirsin. Örneğin TCDD Taşımacılık Tarife Sistemi de vibe coding ile yaptığım bir iş. Bütün çalışmalarım Projeler sayfasında.
Benimle birlikte çalıştıysan, birkaç cümlelik bir referans yazarsan çok sevinirim. Referanslar ben onayladıktan sonra sitede görünüyor.