Bu site nasıl yapıldı

Astro her sayfa ve dil için bir HTML dosyası üretir. Dosyaları Cloudflare sunar; sunucuda kod çalışmaz.

Renk

GitHub renkleri: tek vurgu rengi mavi, bir sarı ve bir yeşil bant. Her renk iki tema için light-dark() ile bir kez tanımlıdır. Bir test, her yazı ve zemin çiftinin iki temada da WCAG AA kontrastını kontrol eder.

Yazı

Metin için Inter, etiket ve sayılar için Martian Mono. İkisi de bu siteden gelir, sitenin kullandığı harflere kesilmiştir, birer dosyadır ve sayfanın ilk baytlarıyla istenir. 100 ms içinde gelmeyen font o sayfada kullanılmaz; yazı yer değiştirmez.

Hareket

Çizgiler çizilir, bloklar ekrana girdikçe belirir; bunlar CSS ile. Ana sayfadaki isim kendi harflerinden yerine oturur, fotoğraf bulunduğu yerden açılır, tema değişimi solar; her biri küçük bir script ile. Sayfalar geçiş animasyonu olmadan, anında değişir. Hareketi azalt açıkken hiçbir şey ekranda yer değiştirmez ya da büyümez; solma ve çizgi çizme kalır.

Ağırlık

Bir yazı sayfası ilk ziyarette beş istek ve 65 KB: içinde tema script’i olan HTML (4 KB), bir stylesheet (10 KB), bir script (1 KB) ve iki font (50 KB). Fotoğraflar build sırasında WebP’ye çevrilir, tarayıcı ekranına uyan boyutu seçer. Video yalnız oynatılınca yüklenir.

İçerik

Proje, rapor, not: her biri bir Markdown dosyası; bilgiler front matter’da durur ve build sırasında şemaya göre kontrol edilir. Bir yazının adresi, başlığının iki noktaya kadar olan kısmıdır: “Emler, solo” /tr/emler-solo olur.

Kontroller

Her push’tan önce: lint, tipler, unit ve component testleri, build, oluşan sayfaların kontrolü ve dört genişlikte tarayıcı testleri; hareketler ayrıca iPhone motorunda. Hız elle, Unlighthouse ile ölçülür.