VAKA 02 · CANLI ÜRÜN · 2025–2026
ehlisunnah.com
Türkçe bir İslamî ilim platformu. Bir blog değil — ortak bir tasarım dili altında toplanmış, 189 rotaya yayılmış etkileşimli modüller külliyatı.
02 — MESELE
Derinliği kaybetmeden
gezilebilir kılmak.
İçerik hem çok derin hem çok bağlantılıydı: âlimler, eserler, rivayetler, kavramlar, ibadet pratiği. Klasik bir menü yapısı bunu ya düzleştiriyor ya da kullanıcıyı boğuyordu.
Karar: gezinmeyi mekân metaforuna taşımak. Yedi kapı, kapıların altında odalar; her modül kendi ekranını hak edecek kadar farklıysa kendi ekranını alıyor.
03 — YAKLAŞIM
Önce sistem,
sonra sayfa.
Renk, tipografi ve boşluk jetonları tek yerde tanımlandı; beş atmosfer bu jetonların üstüne kuruldu.
Her modül bir brief ile başladı; keşif ve plan onaylanmadan kod yazılmadı.
İçerik şemayla bağlandı; kaynak künyesi olmayan kayıt derlemeyi düşürüyor.
Her modül ölçülerek kabul edildi — ekran görüntüsü ve sayı, "bence oldu" değil.
04 — TASARIM SİSTEMİ
Beş atmosfer,
tek bir dil.
Kâğıt & Mürekkep, Lâcivert Gece, Zümrüt Sessizliği, Gül Külü ve Rasathâne. Kullanıcı seçiyor; 189 rotanın tamamı aynı jeton kümesinden besleniyor.
06 — GENERATİF TEZHİP
Aynı girdi,
her zaman aynı eser.
Kullanıcı adını yazıyor; ruh hâli, renk ve kurgu seçiyor. Motor tarayıcıda vektörel bir tezhip levhası çiziyor — her tuş vuruşunda yeniden.
Motor bilerek saf ve deterministik yazıldı: ağ, depolama, zaman veya DOM girdisi yok. Aynı metin ve aynı seçimler her zaman aynı levhayı verir — bu, çıktının test edilebilir ve dışa aktarılabilir olmasını sağlıyor.
08 — VERİ GÖRSELLEŞTİRME
109 düğüm,
sekiz dal.
Merkezde kaynak; sekiz ilim dalı sektörlere, kuşaklar halkalara yerleşiyor. Kutupsal yerleşim elle yazılmış SVG ile çiziliyor — her düğümün açısı ve yarıçapı veriden hesaplanıyor.
Neden hazır bir graf kütüphanesi değil: burada okunması gereken şey rastgele bir ağ değil, kuşak sırası. Radyal düzen o hiyerarşiyi tek bakışta veriyor; kuvvet tabanlı yerleşim vermiyordu.
09 — USTURLÂB
Çalışan bir alet,
süs değil.
Rete döndürülüyor, vakit okunuyor, kıble yönü inceleniyor. Tüm hesap cihazda yapılıyor; harici bir vakit veya konum servisine bağlanmıyor.
Plaka ve rete SVG olarak çiziliyor; sürükleme denetleyicisi ve çizimin determinizmi kendi birim testlerine sahip.
10 — DUYARLI DENEYİM
Mobil, masaüstünün
küçültülmüşü değil.
320px'ten 1920px'e kadar tasarlandı. Üst çubuk simge sırasına iniyor, kahraman yeniden diziliyor, metro haritası yeniden akıyor.
11 — TEKNİK UYGULAMA
Ölçülen hâli.
| Çatı | Next.js 16 (App Router) · React 19 · TypeScript |
| Stil | Tailwind v4 · CSS Modules · styled-jsx |
| Hareket | framer-motion · GSAP (ScrollTrigger) · Lenis |
| Çizim | Elle yazılmış SVG · Three.js / R3F (bir sahne canlı) |
| Veri | Dosya tabanlı içerik · Zod şema doğrulama |
| Rota | 189 page.tsx · 873 bileşen |
| Test | 2.080 test (2.077 geçiyor) · Vitest + Playwright |
| Tip güvenliği | tsc --noEmit temiz |
| SEO | 45 dinamik OG kartı · 76 dosyada JSON-LD |
| Dağıtım | Vercel |
12 — KALİTE VE İTERASYON
Kapılar derlemede.
Derleme öncesinde 40'tan fazla içerik doğrulayıcı zincirleme çalışıyor. Kaynağı eksik bir kayıt siteyi yayına çıkarmıyor — içerik doğruluğu bir tercih değil, derleme koşulu.
Arayüz tarafında kabul ölçümle yapılıyor: ekran görüntüsü, piksel ölçümü, taşma denetimi. Bu portfolyonun kendisi de aynı yöntemle üretildi — 13 görünüm genişliğinde ölçülen bir üst çubuk çakışması bu şekilde bulundu ve düzeltildi.
Yapay zekâ destekli bir geliştirme akışıyla çalışıyorum. Yön, tasarım kararları, kabul kriterleri ve kalite kontrolü bana ait.
13 — SEÇİLMİŞ EKRANLAR
