İçeriğe geç
Yazılar

Yeni sitem açıldı

Üç boyutlu bir klavyeyle başladı, krem kâğıda döndü, araya bir tasarım denemesi girdi; sonunda bütün projelerimi yeniden çalıştırıp ekranlarını çektim. Nasıl olduğunu yazdım.

Yayın
Okuma
2 dakika
Konu
Site, Tasarım, Next.js

CV'mde altı yedi proje adı yazıyor ama bunların çoğu ya bir müşteri için yazıldı ya da deposu özel. Biri "PITH-PDKS nedir?" diye sorduğunda gösterebileceğim bir şey yoktu, ancak anlatabiliyordum. Bu siteyi o yüzden açtım: her projenin ne işe yaradığını, ekranlarını ve içinde ne yaptığımı tek yerde göstermek için.

İlk sürüm: bir klavye

Başlangıçta ana sayfada adımı yazan üç boyutlu bir klavye vardı. Tuşlara tıklayınca ya da bilgisayarın klavyesinde yazınca basılıyor, ses çıkarıyordu. React Three Fiber ile tuşları tek tek modellemek eğlenceliydi.

Sonra kaydırdıkça bölümden bölüme zıplayan küçük bir terminal karakteri ekledim. Klavye zamanla çıktı, karakter kaldı. Sayfayı aşağı kaydırırsanız hâlâ yanınızda.

Krem kâğıt

İkinci sürümde site sıcak krem bir zemine, iri serif başlıklara ve bordo vurgulara geçti. Şu an gördüğünüz tasarım bu.

Açılıştan önce bir kez de bambaşka bir tasarım denedim. impeccable, taste-skill ve awesome-design-md depolarını rehber alıp siteyi soğuk bir zemin, kobalt mavisi ve geniş bir yazı tipiyle baştan kurdum. Bu depolar, yapay zekâyla üretilen arayüzlerin sık düştüğü kalıpları açıkça listeliyor; krem zemin ve serif başlık o listenin ilk satırlarında. Yeni hali teknik olarak derli topluydu ama bana ait gelmedi. Krem kâğıda geri döndüm. O denemeden geriye proje sayfalarının yapısı kaldı.

Bütün projeleri yeniden çalıştırmak

İşin en uzun kısmı buydu. Ekran görüntüsü olmayan her projeyi kendi bilgisayarımda yeniden ayağa kaldırdım, demo veriyle doldurdum, Playwright ile gezip ekranlarını ve kısa videolarını çektim. Yol boyunca çıkanlar:

  • Docker açılmadı. Docker Desktop, eski bir soket dosyasını silemediği için açılışta çöküyordu. Ayarlardan kullanmadığım yerel model özelliğini kapatınca düzeldi.
  • PITH-PDKS iki adımlı doğrulama istiyordu. Projenin kendi kullanım kılavuzu hattı zaten demo bir firma kurup ekranları çekiyordu. Onu çalıştırdım, sonra aynı veritabanına bağlanıp temiz ekranları aldım.
  • E-ticaret mağazası anahtarsız açılmadı. Kimlik doğrulama Clerk üzerinden yapıldığı için gerçek anahtar olmadan sunucu tarafı hata veriyordu. Yerel kopyada kimlik katmanını atlayıp mağazanın demo modunu açtım. Sekiz temadan altısını aynı ürün verisiyle çektim; projenin asıl gösterdiği şey de bu: tasarım tek bir ayarla değişiyor.
Aynı mağaza, outdoor teması
Aynı mağaza, endüstriyel ekipman teması
  • Dernek programında gerçek üye bilgileri vardı. Depodaki ilk kurulum dosyası derneğin gerçek kayıtlarını içeriyor. Onları kullanmak yerine 240 uydurma üyelik, aidatı ve bağışıyla bir demo veri üretip programı onunla açtım. Sitedeki görüntülerde gerçek kimse yok.
  • BPM Finder'ı sınamak için bir ritim lazımdı. Python ile 124 BPM'lik bir davul döngüsü üretip uygulamaya verdim. Doğru buldu.

Dağıtım takip sisteminde şoför tarafını telefon boyutunda ayrıca kaydettim, çünkü o uygulamanın asıl kullanıcısı direksiyondaki kişi:

Bu turun büyük kısmını Claude Code ile birlikte yaptım: depoları okumak, projeleri ayağa kaldırmak, ekranları çekmek ve o tasarım denemesi.

Sırada ne var

Her projenin kendi sayfası var, ama bazılarının arkasındaki tasarım kararları ayrı yazıları hak ediyor. İlk aklımdakiler: PITH-PDKS'de telefonun konumundan mesaiye giriş çıkışı nasıl çıkardığımız ve saha uygulamalarında internet yokken alınan kaydın sunucuya kaybolmadan nasıl ulaştığı.

Bir hata görürseniz ya da bir proje hakkında soru sormak isterseniz bana yazın.