1. Fikir ve yön
Endüstriyel/brütalist yön; keskin grid, yüksek kontrast neonlar, eğik CSS 3D metal plakalar ve titreşimli çizgi animasyonları kuruldu. Amaç, diğer dokuz siteden net şekilde ayrılan bağımsız bir görsel dünya kurmaktı; bu yüzden renk, tipografi, form dili ve animasyon karakteri baştan ayrı tasarlandı.
2. Teknik iskelet
Site tek başına çalışan statik HTML/CSS/JS dosyasıdır. Cloudflare Pages için ekstra backend gerekmez. Ana sayfa index.html, bu rehber ise /rehber/index.html yolundadır.
- Önce tema için 5 renkli palet seçildi.
- Başlık ve gövde için farklı karakterde iki font eşleştirildi.
- Hero bölümüne CSS 3D heykel ve canvas parçacık alanı eklendi.
- Kartlar, butonlar ve scroll reveal animasyonları aynı görsel dile göre ayarlandı.
3. Üç iterasyon geçişi
Geçiş 1: İlk kompozisyonda konsept, palet ve tipografi netleştirildi. Geçiş 2: Hero heykelindeki derinlik, hareket ve kontrast artırıldı. Geçiş 3: Mobil düzen, /rehber yolu, erişilebilirlik ve deploy yapısı kontrol edildi.
4. Aynısını nasıl çoğaltırsın?
Bu klasörü kopyala, :root renk değişkenlerini, font importlarını ve body sınıfını değiştir. Ardından hero metnini, özellik kartlarını ve rehber açıklamasını yeni konsepte göre yeniden yaz. En iyi sonuç için her yeni sitede en az üç kez ekran görüntüsü alıp “hangi detay daha özgün olabilir?” diye eleştir.