Kişisel Sitemi Bir Binaya Çevirdim

WordPress'ten statik Astro'ya geçerken sitemi kesiti görünen bir piksel binaya çevirdim. Maskot, asansör, gündüz/gece odalar ve arkasındaki teknik kararlar.

Eski sitem bir WordPress temasıydı. İşini görüyordu ama bana benzemiyordu. Yeni siteyi yaparken tek bir soru sordum: biri buraya girdiğinde ilk üç saniyede ne hissetsin?

Cevap şu oldu: bir yere girdiğini hissetsin.

Fikir: kesiti görünen bir bina

Ana sayfa artık bir menü ve altında ekranı dolduran altı odadan oluşuyor. Not defteri bir kütüphane, Pixel Shorts bir stüdyo, projeler bir atölye, güvenlik araştırmaları bir SOC, hakkımda benim odam, iletişim de bir kafe.

Bir odaya tıkladığında piksel halim yürüyerek oraya gidiyor. Başka kattaysa sağdaki asansöre biniyor. Varınca ekran kare kare kapanıyor ve sayfa açılıyor. Sayfanın başlığında da aynı oda duruyor; böylece gerçekten o odaya girmiş oluyorsun.

İlk denemelerim böyle değildi. İlk sürüm dikine uzayan bir binaydı ve aşağı kaydırmak bitmiyordu. İkincisinde binayı tek ekrana sığdırdım ama yanına koyduğum yazılar her şeyi kalabalıklaştırdı. Sonunda en sade hali kaldı: menü, odalar, footer. Başka bir şey yok.

Küçük ama sevdiğim detaylar

  • Gündüz ve gece. Koyu temada odalar loş, ilk girişte ışıklar sırayla yanıyor; açık temaya geçince bina olduğu yerde gündüze dönüyor ve güneş camdan içeri vuruyor. Maskot da Bursa saatine göre “muhtemelen” olduğum odada bekliyor: öğleden sonra SOC’ta, akşam stüdyoda, gece kütüphanede.
  • Yaşayan odalar. Kütüphanede lamba titriyor, kafede camdan yağmur akıyor, kahve makinesinden buhar çıkıyor, SOC’taki haritada noktalar yanıp sönüyor. Bunların hepsi çizimin kendi koordinatlarına bağlı; oda ekrana göre kırpılsa bile lamba lambanın üstünde kalıyor.
  • Stüdyonun TV’si. En son yayınlanan Pixel Shorts bölümünün afişi televizyonda oynuyor. Sıradaki bölümün konusu ise yayın saatine kadar sürpriz.
  • SOC’un zemininde bug’lar. Tıklarsan eziliyorlar. Bir güvenlik insanının sitesinde bu olmadan olmazdı.
  • Acelen varsa. Maskot yürürken bir daha tıklarsan beklemeden gidiyor. Hareket azaltma ayarı açıksa hiç animasyon yok.

Teknik taraf

  • Astro, tamamen statik. Veritabanı yok, yönetim paneli yok, sunucuda çalışan kod yok. Yazılar Markdown dosyası.
  • Yazı tipi Tiny5. Başlıklar için denediğim piksel fontların çoğunda “C” harfi “O” gibi okunuyordu. Tiny5’te karar kıldım ve sadece kullandığım harflerle küçülttüm (4,6 KB).
  • İki dil. Türkçe kökte, İngilizce /en/ altında. Türkiye dışından gelen ziyaretçi ana sayfada İngilizceye yönleniyor; dili kendisi değiştirirse seçimi hatırlanıyor.
  • Yapay zekâ dostu. Her sayfanın sonuna .md yazınca sade metin hali geliyor. llms.txt ile sitenin bir özeti var ve yapay zekâ tarayıcılarına açık.
  • Yayın. Kendi VPS’im, önünde Cloudflare. Sunucu her on dakikada depoyu kontrol ediyor; yeni bir commit ya da saati gelen bir Pixel Shorts bölümü varsa siteyi yeniden derliyor ve arama motorlarına IndexNow ile haber veriyor.
  • Bir de tuzak. /wp-admin gibi adresleri deneyen botlar sahte bir giriş sayfasıyla karşılanıyor; kimseyi engellemiyor, sadece dalga geçip kayıt tutuyor.

Görseller ve yapay zekâ

Maskotu, odaları ve yürüme animasyonunu yapay zekâ ile ürettim (gpt-image), sonra temizleyip kestim. Kurguyu, etkileşimi ve kodu ben yazdım; kodlamada Claude Code ile birlikte çalıştım. Bunu saklamak için bir sebep görmüyorum: bu sitenin konusu zaten yazılım, güvenlik ve yapay zekâ.

Sırada ne var

Pixel Shorts 20 Ekim’de başlıyor; ondan sonra her gün yeni bir bölüm stüdyonun televizyonuna düşecek. Binaya yeni odalar da gelebilir. Bir fikrin varsa kafeye uğra.