Opus Growth hosting sunucumdaki
[sunucu adı] sitesine,
[stüdyo adı] için Awwwards'ta öne çıkan yaratıcı stüdyo sitelerinin hissini veren, çok sayfalı ve hızlı bir site kur. Stüdyo:
[ne tasarlıyor, kimler için], şehir ve semt:
[şehir, semt], ekip:
[kişi sayısı, adlar ve rolleri]. Hizmetler:
[3 hizmet]. İşler: [her biri için müşteri adı, iş türü, yıl, bir cümle soru, bir cümle çözüm, teslim edilen parçalar, görsel bağlantısı]. İletişim:
[e-posta],
[telefon],
[WhatsApp numarası],
[adres]. Alan adı:
[alan adı]. Renk tercihi:
[renk ya da "sen seç"].
Sayfalar: ana sayfa (/: dev başlıklı hero, kayan hizmet şeridi, seçili işler, ne yapıyoruz, süreç, SSS, kapanış çağrısı), işler (/isler/: her iş için soru, yaptığımız ve teslim), stüdyo (/studyo/: ekip ve çalışma kuralları), iletişim (/iletisim/), gizlilik ve KVKK (/gizlilik/) ve 404.html. İletişim sayfasında form olmasın; e-posta, telefon ve hazır mesajlı WhatsApp bağlantısı ile ilk mesajda istenen bilgilerin listesi olsun. Müşteriden onaylı rakam yoksa sonuçları nitel anlat, yüzde ya da artış yazma.
Tarz: Awwwards tarzı yaratıcı stüdyo. Kırık beyaz zemin, siyah metin ve yalnız zemin olarak kullanılan tek bir sinyal rengi (üstünde siyah metin, en az 4,5:1 kontrast). Fontshare'den çok büyük boyda iyi duran bir display (ör. Clash Display 600) ve sakin bir gövde fontu (ör. Ranade). Hero başlığı clamp ile 3,2rem ile 12,5rem arasında, sıkı harf aralığıyla ekranı doldursun ve 360 pikselde de taşmasın. İşler listesi büyük görsel ve büyük başlıklı satırlar halinde, sırayla 7/5 ve 5/7 sütunlu asimetrik bir ızgarada dursun.
Hareket kuralları (en zor kısım, harfiyen uygula):
1. Kütüphaneler: GSAP 3.13 çekirdeği, ScrollTrigger, SplitText ve Lenis, yalnız ana sayfada ve işler sayfasında. Stüdyo, iletişim ve gizlilik sayfalarında hiç betik olmasın. Swiper, WebGL ve video yükleme.
2. SplitText: ilk ekrandaki h1 LCP öğesidir, onu gizleyerek ya da aşağıdan kaydırarak başlatma. h1 AA kontrastını geçen soluk bir renkte görünür başlasın ve SplitText satırları sırayla tam renge geçirsin (type "lines", mask "lines", aria "auto"). Maskeli, aşağıdan kayan satır girişini ekranın altındaki h2'lere sakla ve ScrollTrigger ile once:true oynat. Satır kırılımı doğru çıksın diye bölmeyi document.fonts.ready sonrasına bırak.
3. Sonsuz şerit: hizmet adlarını HTML'de bir kez yaz. JS yokken ve hareket azaltıldığında bu liste sarılan statik bir satır grubu olarak görünsün; telefonda statik halin yazı boyutunu küçült, yoksa demoda ekranı altı satırlık bir duvar kapladı. JS grubu bir kez kopyalasın, kopyaya aria-hidden versin ve x değerini sonsuz döngüyle kaydırsın; kaydırma hızına göre geçici olarak hızlansın, şerit ekran dışındayken dursun. Beş saniyeden uzun süren hareket için WCAG 2.2.2 gereği görünür bir "Durdur" düğmesi koy (type="button", aria-pressed); düğme yalnız şerit gerçekten kayarken görünsün. Şeridin içine odak gelince de dursun.
4. Mıknatıs düğmeler: yalnız `(hover: hover) and (pointer: fine)` eşleşen cihazda, gsap.quickTo ile x ve y transform'unu imlecin düğme merkezine uzaklığının yüzde 30 ile 40'ı kadar kaydır, imleç çıkınca elastik geri dönsün. Düğmenin tıklanabilir alanı değişmesin.
5. İmleç izi: yalnız masaüstünde ve aynı ince imleç koşulunda, hero alanında. JS hero'ya aria-hidden, pointer-events:none ve başlığın ALTINDA (z-index) duran bir katman eklesin. İz görselleri sayfa açılışında inmesin; ilk imleç hareketinde 280 piksellik küçük WebP'ler yüklensin. İmleç her 90 piksel ilerlediğinde havuzdaki sıradaki görsel imlecin konumunda küçükten büyüyerek belirsin ve aşağı kayarak sönsün; konumu left/top ile değil transform ile değiştir.
6. Lenis'i yalnız `(pointer: fine)` cihazlarda aç ve gsap.ticker'a bağla; dokunmatikte yerel kaydırma kalsın. Sayfa içi bağlantılarda hedefe kaydırdıktan sonra odağı hedefe taşı.
Kurulum ve bilinen tuzaklar (demo ölçümünde her biri puanı düşürdü ya da bir şeyi bozdu, atlama):
1. Sunucuda yayında bir site varsa önce bana söyle, çünkü kurulum index.html ve assets klasörünü ezer. scaffold_site'ı önce confirm=false ile önizle, onayımla confirm=true çağır. Sonra site_design_guide ve site_seo_guide'ı oku. Koda başlamadan tasarım yönünü (tipografi, renk, ızgara, imza öğesi, hareket dili ve YÜKLENMEYECEK kütüphaneler) assets dışında kısa bir ART.md dosyasına yaz ve bana göster.
2. Tailwind'i derle, CDN'den yükleme. site_run_command ile background=true vererek `npm i -D tailwindcss@3` kur ve sonucu site_command_status ile izle. `tailwind.config.js` içindeki content yolları bütün HTML dosyalarını, şablonları ve sınıf yazan JS dosyalarını kapsasın. `_src/tw.css` dosyası `@import "../assets/app.css";` satırı ve üç `@tailwind` satırından oluşsun; `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify` ile tek dosyaya derle. Sayfalardan cdn.tailwindcss.com betiğini ve satır içi tailwind.config'i kaldır, yalnız `/assets/site.css` bağla. Her HTML değişikliğinden sonra yeniden derle.
3. Fontları kendi sunucunda barındır. Seçtiğin Fontshare ailesinin Türkçe harfleri (ş, ğ, ı, İ, ç, ö, ü) içerdiğini önce kontrol et: demoda Tanker ailesinde noktasız ı, Outfit ailesinde ş, ğ ve İ yoktu, bu harfler başlıkta yedek fonta düşerdi. Her ağırlığın woff2 dosyasını site_fetch ile `assets/fonts/` altına ayrı ayrı indir, @font-face kurallarını `font-display: swap` ile `assets/app.css` içine yaz (design-check özgün fontu orada arar) ve indirdiğin CSS'teki font-family adını kontrol et. İlk ekrandaki başlığın ve gövdenin fontunu her sayfada `<link rel="preload" as="font" type="font/woff2" crossorigin>` ile stil dosyasından önce yükle; ikiden fazla dosyayı preload etme, demoda üçüncü ağırlığı da preload etmek mobil LCP'yi 0,2 saniye uzattı. Fontshare fontlarının çoğunda ₺ işareti yok, fiyat yazacaksan "TL" kullan.
4. Menüyü ve alt bilgiyi statik HTML yap. chrome.js ve site.config.js'i sayfalara yükleme. site.config.js'teki nav listesini okuyup `_src/header.tpl` ve `_src/footer.tpl` şablonlarını her sayfadaki `<!-- nav:start --><!-- nav:end -->` ve `<!-- footer:start --><!-- footer:end -->` işaretlerinin arasına basan küçük bir `chrome-stamp.mjs` yaz; etkin sayfanın bağlantısına aria-current="page" eklesin. Şablonların uzantısı .html olmasın ve içlerinde `{{...}}` yerine `
[[NAV]]` gibi yer tutucu kullan. Mobil menüyü JS'siz `<details>` ile kur. Alt bilgide kurum adı, adres ve telefon düz metin olsun; alt bilgi ve kırıntı bağlantıları dahil her dokunma hedefi en az 44x44 piksel olsun.
5. Görselleri site_fetch ile indirirken dönüştür: aynı fotoğrafı resize="480x", "800x" ve "1200x", image_format="webp", quality=65 ile ayrı dosyalara yaz. site_fetch kırpmaz; Unsplash fotoğrafında farklı oran gerekiyorsa adresin sonuna `?w=1600&h=1200&fit=crop` gibi parametre ekleyerek kırpılmış hali indir. Her `<img>` için srcset, sizes ve gerçek orana uyan width ve height ver. İlk ekrandaki ana görsel fetchpriority="high" olsun ve lazy olmasın; diğerleri loading="lazy" decoding="async" olsun. Mobilde ana görsel ekranı dolduruyorsa `<picture>` ile mobile daha küçük bir kırpım ver.
6. Logonun SVG halini site_write_file ile favicon.svg olarak yaz ve her sayfaya `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` ekle. Favicon yoksa tarayıcı konsola 404 yazar ve En İyi Uygulamalar puanı 96'ya düşer.
7. HTML doğrulayıcısının kuralları: belge büyük harfli `<!DOCTYPE html>` ile başlasın, tel: bağlantılarının görünen metnindeki boşluklar ` ` olsun, style="" niteliği kullanma, her düğmeye type="button" yaz, `<details>` bir `<figure>` içinde figcaption'dan sonra gelmesin.
8. Hareket kütüphanelerini (GSAP, ScrollTrigger, SplitText, Lenis) jsdelivr'den site_fetch ile `assets/vendor/` altına indir, sürümü sabitle ve yalnız ana sayfada ve işler sayfasında yükle. `<script defer>` kullanma; sayfanın sonuna küçük bir yükleyici koy: load olayından sonra iki requestAnimationFrame ve ardından requestIdleCallback beklesin, betikleri sırayla async=false ile eklesin. `<head>` içindeki tek satırlık bir betik `<html>`'e `js` sınıfını, prefers-reduced-motion "reduce" değilse `anim` sınıfını eklesin; yükleyici `anim` yoksa hiçbir şey indirmesin. Gizli başlangıç durumlarını yalnız `.anim` altında tanımla ve kütüphane gelmezse diye gizlenen her öğeyi 2,5 saniye sonra görünür yapan bir CSS animasyonu güvenlik ağı olarak ekle. Önceki demolarda defer ile yüklenen kütüphaneler mobil LCP'yi 3,2 saniyeye itti; bu yükleyiciyle 99 ile 100 arası ölçüldü. Kaydırınca beliren öğelerin niteliği data-reveal olsun; design-check hareketi bu adla tanır.
SEO, AEO ve GEO:
1. Adresleri dizin biçiminde ve sonu eğik çizgili kur (/isler/, /studyo/, /iletisim/, /gizlilik/). site.config.js'in seo bloğunu doldur ve `node seo-stamp.mjs` çalıştır. Sayfaya özel şemayı (ana sayfa WebPage ve FAQPage; işler CollectionPage ve her iş için hasPart içinde CreativeWork; stüdyo AboutPage ve ekip için Person; iletişim ContactPage; iç sayfalarda BreadcrumbList. Ofisi olan bir stüdyo için site.config.js'te businessType ProfessionalService) ayrı `<script type="application/ld+json">` bloklarına yaz ve @id ile temel grafiğe bağla. BreadcrumbList'i @graph içine gömme, kendi bloğunda dursun; seo-check onu yalnız böyle görür.
2. Title en fazla 60 karakter olsun (seo-check 65'i aşanı hata sayar), description 120 ile 158 karakter, her sayfada tek h1 ve başlık sırası atlamasın (h1'den sonra h3 gelince erişilebilirlik 98'e düştü). Her sayfanın ana içeriği en az 150 kelime olsun; iletişim ve gizlilik sayfaları bu sınırın altında kalmaya yatkın.
3. Her sayfanın ilk paragrafı sayfanın sorusuna doğrudan cevap versin. Sayfaya özgü SSS'yi `<details>` ile yaz ve FAQPage olarak işaretle. Yayımlayan kurumu ve "Son güncelleme" tarihini `<time>` ile göster.
4. robots.txt'te GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot ve CCBot için kararını gerekçesiyle yaz ve sitemap'i göster. sitemap.xml'de gerçek lastmod olsun. llms.txt'te sitenin iki cümlelik doğru özeti, önemli bilgiler ve önemli sayfaların listesi bulunsun.
5. Uydurma yok: bana sormadan yorum, puan, ödül, müşteri sayısı, sertifika, çalışma saati, koordinat ya da fiyat yazma. Bilmediğin alanı şemaya hiç koyma.
Kapılar (sırayla; hepsi geçmeden "bitti" deme):
1. site_run_command ile `node chrome-stamp.mjs`, Tailwind derlemesi, `node seo-stamp.mjs`, `node seo-check.mjs` (0 hata, 0 uyarı), `node design-check.mjs` (0 hata; kalan uyarıyı gerekçesiyle yaz) ve `npx html-validate "**/*.html"` (0 hata).
2. Her sayfayı site_preview ile view="mobile" ve view="desktop" olarak gör. site_preview sayfayı hareket kapalıyken (reduced-motion) çeker; bu görüntüde içerik eksiksiz görünmüyorsa hareketsiz hal bozuk demektir. Tam sayfa görüntüsünde aşağıdaki lazy görseller boş çıkabilir; bunu hata sayma ama yolunu kontrol et.
3. Her sayfa için core_web_vitals'ı strategy="mobile" ve strategy="desktop" ile çalıştır. Kabul: mobilde Performance en az 95, Accessibility, Best Practices ve SEO 100; masaüstünde dördü de en az 95. Tutmayan sayfada resources=true ile hangi dosyanın geciktirdiğini bul, düzelt ve yeniden ölç. Ardından ana sayfada seo_audit'i strategy="mobile" ve runs=2 ile çalıştır. Ağ istekleri listesinde kendi alan adın dışında bir adres kalmamalı.
4. 360, 390, 768 ve 1440 piksel genişlikte yatay kaydırma olmasın, dokunma hedefleri en az 44 piksel olsun, konsolda hata olmasın. Site, prompt sayfalarındaki gibi 390x790 ve 1440x898 boyutlu bir çerçevede de kusursuz görünmeli.
Hareket kontrolü: site_preview hareketi gösteremediği için bana kendi tarayıcımda neye bakacağımı tarif et. Masaüstünde hero başlığının satırları sırayla koyulaşmalı, şerit kayıp kaydırınca hızlanmalı ve Durdur düğmesiyle durmalı, düğmelerin üstünde imleç gezerken düğme hafifçe imlece çekilmeli, hero'da imleci gezdirince arkasında görseller belirip sönmeli ve metin hep görsellerin üstünde kalmalı. Telefonda imleç izi ve mıknatıs olmamalı, kaydırma yerel kalmalı. İşletim sisteminde hareketi azalt açıkken hiçbir şey hareket etmemeli, şerit statik liste olarak görünmeli. Tab ile gezerken odak halkası her yerde görünmeli.
Yayından sonra: site_headers ile `/assets/* Cache-Control: public, max-age=31536000, immutable` kuralını önizle ve onayımla uygula; bundan sonra CSS ya da JS değiştiğinde dosya adını sürümle (site-v2.css gibi). gsc_submit_sitemap ile sitemap.xml'i gönder ve gsc_url_inspect ile ana sayfanın durumuna bak. En sonda bana şunları ver: sayfa sayfa puan tablosu (sayfa, mobil dört puan, masaüstü dört puan, LCP, CLS), kapıların sonucu, tarayıcıda denediğin etkileşimlerin sonucu ve uyguladığın düzeltmelerin listesi.
