Bu site nasıl yapıldı?

Klasik bir portfolyo sitesi genellikle aynı şeyi yapar: bir hakkımda bölümü, bir proje listesi, bir iletişim sayfası. Bu site ise başka bir yol deniyor. Ziyaretçi bir sayfayı kaydırmak yerine soru soruyor; Harun'un asistanı da yalnızca Harun'un paylaştığı ve doğrulanmış bilgilere dayanarak cevap veriyor.

Fikir: önce sohbet

Ana ekran bir sohbet penceresi. Harun kimdir?, Neler geliştiriyor? gibi hazır sorularla başlayabilir ya da kendi sorunuzu yazabilirsiniz. Projeler, sohbetin içinde kartlar olarak açılıyor; bağlantılar yalnızca herkese açık olan depolar için gösteriliyor.

Kenar çubuğundaki Keşif Küpü bu fikrin oyunlaştırılmış hâli. 3×3'lük ızgaradaki her çıkartma bir konuya ya da projeye karşılık geliyor; o konuyu keşfettikçe çıkartma renkleniyor ve dokuz parçanın hepsi bulunduğunda küp “çözülmüş” oluyor. Küp seçimi rastgele değil: Harun Rubik küplerine ilgi duyuyor ve 3×3, 2×2, 5×5, piramit, Megaminx gibi küpleri çözüyor. Sitenin kimliği bu gerçek hobiden geliyor.

Ziyaretçi sayfayı kaydırmak yerine soru soruyor; asistan da yalnızca bildiği şeyi söylüyor.

Asistan neyi bilir, neyi bilmez?

Cevaplar Groq üzerinde çalışan bir dil modelinden geliyor, ama model serbest bırakılmıyor. İstem (prompt) modelin yalnızca verilen bilgi bloğundaki konulara cevap vermesini istiyor; genel kültür, kod yazma, çeviri ya da tavsiye gibi Harun dışındaki istekler kapsam dışı sayılıyor. Model cevabını yapılandırılmış bir JSON olarak döndürüyor ve inScope ile supported gibi alanlarla sorunun kapsamda olup olmadığını ve cevabın bilgiyle desteklenip desteklenmediğini bildiriyor.

Sık sorulan sorular için hazır cevaplar var; bunlar modele hiç gitmeden gösteriliyor. Model hata verdiğinde ya da cevap doğrulamadan geçemediğinde de yine bu hazır cevaplara dönülüyor. Bilinmeyen bir ayrıntı sorulduğunda asistanın görevi tahmin etmek değil, bunu bilmediğini söylemek.

Akış ve güvenlik

Cevaplar kelime kelime ekrana akıyor (server-sent events). Burada küçük ama önemli bir ayrıntı var: modelden gelen metin, kapsam ve destek alanları okunup onaylanmadan istemciye gönderilmiyor. Kapsam dışı bir soru fark edildiğinde istek kesiliyor ve hazır kapsam cevabı gösteriliyor. Yani akış hızı artırıyor, güvenlik kontrolünü atlamıyor.

Ücretsiz ve paylaşılan bir model kotası kullanıldığı için istek sıklığı da sınırlanıyor: Cloudflare'in Rate Limiting bağlantısıyla hem IP başına hem genel bir sınır var; bu bağlantı yoksa bellek içi bir yedek sınır devreye giriyor.

Teknoloji yığını

• vinext — Vite üzerinde çalışan, Next.js App Router ile uyumlu bir çatı. Sayfalar ve API rotaları Next.js'teki gibi yazılıyor.
• Cloudflare Workers — site ve sohbet API'si Workers üzerinde çalışıyor.
• Groq — yapay zekâ cevapları için model sağlayıcısı; anahtar yalnızca sunucu tarafında, Worker secret'ı olarak duruyor.
• Kendi sunucusundan yüklenen yazı tipleri: başlıklarda Instrument Serif, metinde Geist, etiketlerde JetBrains Mono. Renkler Gruvbox paletinden.
• GitHub Actions — her push ve pull request'te tip kontrolü, testler, lint ve build; main dalına gelen değişiklikler bu kontrollerden geçince Cloudflare'a otomatik olarak yayınlanıyor.

Arama motorları için de sohbetin arkasında sunucuda üretilen, görünmez bir özet, yapılandırılmış veri (JSON-LD), paylaşım görseli ve site haritası bulunuyor. Okuduğunuz bu not da aynı amaçla, sohbet açmadan okunabilen düz bir sayfa olarak eklendi.

Süreç: kodu ajanlar yazıyor

Harun'un çalışma biçimi bu sitenin yapılışında da görülüyor: Harun planlama ve sistem tasarımında rol alıyor, kod yazma işlerini yapay zekâ ajanlarına devrediyor ve bu ajanları kendisi yönetiyor. Büyük projelerde Claude modellerini tercih ediyor; bu site de öyle geliştirildi.

Düzen şöyle: bir ana ajan, depodaki docs/PLAN.md dosyasında işi dalgalara ve görevlere bölüyor. Her görev, ayrı bir git worktree'sinde çalışan bir alt ajana veriliyor; böylece birbirinden bağımsız işler paralel ilerleyebiliyor. Ana ajan teslim edilen her işi gözden geçiriyor, kontrolleri çalıştırıyor ve ancak ondan sonra geliştirme dalına birleştiriyor. Commit geçmişi de bu sırayı takip ediyor: önce “Keşif Küpü” yeniden tasarımı, ardından kod düzeni, SEO, istek sınırlama, akışlı cevaplar, gerçek küp hamleleri ve CI/CD.

Harun'un yapay zekâ kodunu kabul etme ölçütü basit: kodu test ediyor; çalışıyorsa ve önemli bir güvenlik sorunu görmüyorsa kabul ediyor. Bu, kapsamlı bir güvenlik denetimi iddiası değil; paylaştığı kontrol yaklaşımı.

Harun planlıyor ve tasarlıyor; kodu, yönettiği ajanlar yazıyor.

Bu not hakkında

Bu yazının ilk taslağı da aynı süreçle, depo geçmişi ve sitedeki doğrulanmış bilgiler temel alınarak bir ajan tarafından hazırlandı. Harun gözden geçirene kadar taslak olarak işaretli kalacak.