Bu site: portfolyo değil, kanıt dosyası

Bağlam

İş ararken elimde iki sorun vardı. Birincisi, CV’de “Meta Ads biliyorum” ya da “otomasyon kurdum” yazmak bir şey kanıtlamıyor; herkes aynı cümleyi yazıyor. İkincisi, yaptığım işlerin önemli bir kısmı (n8n akışı, GPT kural setleri, Photoshop scripti) bir PDF’e sığmıyor. Onları görmek için çalışırken görmek gerekiyor.

Karar: portfolyo değil, kanıt dosyası

Siteyi kurmadan önce tek bir kural koydum: rakam varsa yanında ekran görüntüsü de olacak. “CPA’yı düşürdüm” değil, “şu kampanyada konuşma başına 10,47 TL; panel görüntüsü burada, nasıl yaptığım da burada.”

Bu kural sitenin yapısını da belirledi. Kanıtı hazır olmayan iş sitede yok; koddan silinmiyor, draft olarak bekliyor. Üç eşit kartlık klasik bir ızgara yerine, kanıtı en güçlü işler büyük kartlarla öne çıkıyor.

Ne yaptım

1. Tasarım sistemi

Dil olarak “kontrol paneli”ni seçtim: koyu zemin, tek bir vurgu rengi, rakamlar monospace ve hizalı. Ekran görüntüleri sitenin baş tacı; her yüzey onların altlığı gibi davranıyor, kendi başına gösteri yapmıyor.

Renkler, cam yüzeyler, köşe yarıçapları ve boşluklar tek bir CSS dosyasında token olarak duruyor. Vurgu renginin iki tonu var: biri yazı için (küçük monospace metinde 7,3:1 kontrast), biri dolgular için. İlk denemede tek ton kullanmıştım ve küçük etiketler zeminde soluyordu.

2. Etkileşimli kanıt

En çok emek giden kısım burası. Etsy listeleme otomasyonunun n8n akışını ekran görüntüsü olarak koymak yerine tarayıcıda yeniden çizdim: 41 node, 49 bağlantı. Ziyaretçi şemayı sürükleyerek geziyor, bir node’a tıklayıp ne yaptığını okuyor ve akışı baştan sona oynatabiliyor.

GPT’lerin rulebook’larını paylaşamıyorum. Onların yerine “kural haritası” bileşeni kurdum: girdi, kontrol edilen kurallar ve çıktı sütunları yan yana. İşverenin asıl sorduğu soruya cevap veriyor: GPT’nin ne yazdığı değil, neye göre yazdığı. Photoshop scripti de ekran kaydıyla duruyor.

3. İçerik altyapısı

Her iş bir markdown dosyası. Başında rol, dönem, platformlar, rakamlar ve galeri; altında anlatım. Kategori, kart, menü ve detay sayfası bu dosyadan otomatik üretiliyor. Yeni bir iş eklemek bir dosya ve birkaç ekran görüntüsü demek.

Zaman çizelgesi, yetenek listesi ve otomasyon kartları da kodun içine gömülü değil, ayrı veri dosyalarında. Yetenek listesindeki marka logoları derleme anında simple-icons paketinden çiziliyor; ayrı görsel dosyası yok.

Site iki dilli: Türkçe kökte, İngilizce /en altında. Her bileşen dili adresten okuyor; dil seçici de öbür dilde aynı sayfaya götürüyor.

4. Hız ve yayın

Site statik: Astro derleme anında HTML üretiyor, tarayıcıya React ya da benzeri bir framework gitmiyor. Etkileşimli parçalar (akış şeması, zaman çizelgesi, menü) küçük ve bağımsız scriptler. Görseller derleme sırasında WebP’ye çevrilip boyutlarına göre üretiliyor.

Yayın Cloudflare Workers üzerinde. workers.dev ve önizleme adreslerini kapattım; aynı içeriğin iki adreste yayınlanması arama motoru tarafında yinelenen içerik demek. Bulunamayan adres Cloudflare’in sade sayfasına değil, sitenin kendi 404’üne düşüyor.

5. SEO ve ölçümleme

Her sayfada kanonik adres, Open Graph görseli ve Person şeması var. Case sayfaları CreativeWork olarak işaretli. Site haritası otomatik; her sayfa öbür dildeki karşılığını hreflang ile gösteriyor. GA4 ile hangi iş sayfasının okunduğunu görüyorum.

Sonuç

İlk sürüm Eylül 2026’da yayına çıktı ve o günden beri geliştiriyorum. Ziyaretçi bir rakam gördüğünde kaynağına iki tıklamada ulaşıyor. Benim için de bir çalışma aracı: yeni bir iş bitince ekran görüntülerini toplayıp bir markdown dosyası yazmak yetiyor.