VYRON SİTE FABRİKASI · REHBER

Bu site nasıl kuruldu

MERCEK Studio kurgusal bir gezgin fotoğrafçı markası — VYRON'un “kişisel marka” da çıkarabildiğini gösteren bir vitrin. Aşağıda bu sayfanın arkasındaki tasarım ve mühendislik kararlarını açıyoruz. Amaç: hazır şablon değil, işin kendisinden doğan bir site.

İmza anı — “deklanşör gibi gezinme”

Fotoğrafçılığın özü iki şey: an ve keskinlik. Bu siteyi tek bir etkileşim fikrinin üstüne kurduk: scroll hızın enstantane hızın olur. Hızlı kaydırdığında ana başlığın değişken (variable) fontu kalınlaşıp genişler ve galeri kareleri uzun pozlama gibi hafif bulanır; durduğunda her şey cam gibi netleşir. Yani sayfayı okuma biçimin, fotoğrafçının işini taklit eder.

Teknik olarak bu, JavaScript'te ölçülen scroll hızının bir CSS değişkenine (font-variation-settings ve sınırlı filter: blur) bağlanmasıyla yapılıyor — sadece görünen kareye, sadece hareket anında. Kullanıcı “hareketi azalt” (reduced-motion) derse tüm bu efektler tamamen kapanır, site okunur kalır.

Palet

Galeri duvarı hissi: kırık beyaz zemin, mürekkep siyahı metin, tek keskin vermilyon aksan.

#EDEBE4 zemin #FBFAF6 kâğıt #131313 mürekkep #FF3B00 vermilyon #5C5C55 etiket

Erişilebilirlik (WCAG): metin/zemin kontrastı 15.58:1 (AAA). Vermilyon yalnızca iri/kalın öğelerde ve koyu zeminde metin olarak kullanılır; gövde metninde asla. Butonlarda vermilyon üstüne siyah yazı (5.2:1) tercih edildi.

Tipografi

Inter yasak (anayasa kuralı). İki karakterli aile seçtik:

• Anybody — değişken display fontu; genişlik ve ağırlık ekseni oynak. İmza etkileşiminin motoru bu: scroll ile canlı canlı nefes alır.
• Martian Mono — teknik monospace; ISO/enstantane/diyafram gibi EXIF etiketlerini gerçek bir vizör okuması gibi gösterir.

Performans & sağlamlık

• Framework yok — statik HTML/CSS/JS + lokal GSAP (sürüm sabit). İkinci yılda kim açsa anlar.
• Değişken fontlar tek dosya, latin alt kümesiyle preload; font-display: swap.
• Ekran-dışı hero videosu preload="none" + IntersectionObserver ile yönetilir.
• Bütçe hedefi: Lighthouse ≥90, JS ≤150KB gz, ilk yük ≤5MB, INP <200ms.

Ne gerçek, ne yer tutucu?

Fotoğraf kareleri şu an duotone SVG yer tutucular (her biri farklı kompozisyon): canlı sürümde fotoğrafçının kendi kareleriyle değişir. Yorumlar, basın adları, sayılar ve iletişim bilgisi örnektir — gerçek müşteri verisi gelmeden yayına alınmaz.

Kendi siten için tarih sor →