Opus Growth hosting sunucumdaki
[sunucu adı] sitesine,
[adım soyadım] için Linear ve Vercel sitelerinin koyu, sakin hissini veren statik bir kişisel portföy kur. Ben:
[unvanım, şehrim, kaç yıldır ne yaptığım, iki cümle]. Projeler: [her biri için ad, yıl, rolüm, müşteri adını yayımlama iznim olup olmadığı, kullandığım teknolojiler, bağlam, kısıtlar, yaklaşım ve sonuç notları, ekran görüntüsü bağlantısı]. Yazılar:
[başlık, tarih, metin ya da taslak]. Deneyim:
[yıl aralıkları ve roller]. İletişim:
[e-posta]; açıkça yayımlamak istediğim profiller:
[GitHub, LinkedIn vb. ya da "yok"]. Yeni işe açık mıyım:
[evet ve ne zamandan, ya da hayır]. Alan adı:
[alan adı].
Sayfalar: ana sayfa (kısa tanıtım, seçili işler, son yazılar, şu sıralar, SSS), projeler (/projeler/), her vaka çalışması için ayrı sayfa (/projeler/
[kısa-ad]/: bağlam, kısıtlar, yaklaşım, sonuç, künye), yazılar (/yazilar/), her yazı için ayrı sayfa (/yazilar/
[kısa-ad]/), hakkımda (/hakkimda/) ve 404.html. Müşteriden onaylı rakam yoksa vaka çalışmasına yüzde ya da süre yazma, sonucu nitel anlat.
Tarz: koyu minimal. Zemin #09090B civarı, kartlar bir ton açık, 1 piksellik koyu gri kenar, metin neredeyse beyaz, ikincil metin zeminde en az 7:1 kontrastlı gri, tek aksan rengi yalnız durum noktasında, odak halkasında ve bağlantıda. Bir Fontshare grotesk ailesinden iki ağırlık (ör. Bespoke Sans 400 ve 500); tarih ve etiketler için font indirmeden sistem monospace yığını (ui-monospace, SFMono-Regular, Menlo, Consolas). Rakamlar eski stil görünüyorsa `font-variant-numeric: lining-nums` ver. Hero görselsiz olsun; arkasında maskeyle sönen ince ızgara çizgileri CSS ile çizilsin.
Etkileşim kuralları:
1. GSAP, Lenis, Swiper ve hazır arama kütüphanesi (Fuse.js vb.) YÜKLENMEZ. Tüm sayfalara defer ile tek küçük bir `ix.js` (spot ışığı, komut menüsü tetikleyicisi, data-reveal), komut menüsünün kendisi için ayrı bir `ara.js`. ara.js sayfa yüklenirken inmez; tetikleyicinin üstüne gelince, odaklanınca ya da menü ilk açılınca indirilir. Demoda yazı sayfalarına ix.js konmayınca Ctrl K o sayfalarda çalışmadı; menü bütün sayfalarda aynı davranmalı.
2. Spot ışığı kartlar: kartın ::before katmanında `radial-gradient(420px circle at var(--mx) var(--my), ...)` ile yumuşak ışık, ::after katmanında 1 piksellik kenara mask-composite ile aksan renginde parıltı. JS, kartları saran kapsayıcıya tek bir pointermove dinleyicisi ekler, requestAnimationFrame ile kısar ve her kartın kendi kutusuna göre --mx ve --my değerlerini yazar; imleç çıkınca değerleri siler. Bu yalnız `(hover: hover) and (pointer: fine)` eşleşen ve hareket azaltmayı istemeyen cihazda çalışır; dokunmatikte kart sade kalır. Kart başlığındaki bağlantı ::after ile kartın tamamını kaplasın.
3. Komut menüsü: başlıktaki "Ara" öğesi HTML'de /projeler/'e giden gerçek bir bağlantıdır (JS kapalıyken iş görür) ve aria-keyshortcuts="Control+K Meta+K" taşır. JS tıklamayı yakalar; Ctrl K, Cmd K ve yazı alanında değilken / tuşu menüyü açar. Menü ilk açılışta JS ile oluşturulan bir `<dialog>`dır ve showModal ile açılır: içinde role="combobox", aria-expanded, aria-controls, aria-autocomplete="list" ve aria-activedescendant taşıyan bir arama kutusu, role="listbox" bir sonuç listesi ve sonuç sayısını okuyan role="status" bir bölge. Ok tuşları seçimi değiştirir, Enter seçili sayfaya gider, Esc dialog'un kendi davranışıyla kapatır, arka plana tıklamak kapatır ve odak kapanınca tetikleyiciye döner.
4. Arama dizini `/assets/ara.json`: her proje, yazı ve ana sayfa için başlık, tür (Proje, Yazı, Sayfa), adres, bir cümlelik özet ve anahtar kelimeler. Bu dosyayı elle yazma; projeler ve yazılar için kullandığın aynı veriden sayfalarla birlikte üret ki ikisi hiç ayrışmasın. Arama Türkçe karakterlere duyarsız olsun (toLocaleLowerCase("tr") sonra ı, ş, ğ, ü, ö, ç harflerini sadeleştir), bütün kelimeler eşleşmeli, başlıkta eşleşme daha üstte çıksın.
5. Vaka çalışması sayfasında üstte künye tablosu (yıl, rol, müşteri, teknoloji) ve LCP öğesi olan ekran görüntüsü (fetchpriority="high", lazy değil); liste sayfalarında kart başlıkları h2, ana sayfada h2 bölümün içinde h3.
Şema: ana sayfa ve hakkımda ProfilePage (mainEntity Person), Person (@id /#person: name, jobTitle, url, email, address içinde yalnız şehir ve ülke, knowsAbout, yalnız verdiğim profiller için sameAs). seo-stamp'in ürettiği Organization bloğu serbest çalıştığın şahıs işletmesini temsil eder; Person'ı worksFor ile ona bağla. Projeler CollectionPage ve hasPart; her vaka çalışması CreativeWork (creator Person, dateCreated, image, keywords); yazılar Blog ve her yazı BlogPosting (headline, image, datePublished, dateModified, author Person; seo-check image ve datePublished yoksa hata verir). Konuşma, ödül ve müşteri listesine yalnız doğrulanabilen bilgiyi yaz.
Kurulum ve bilinen tuzaklar (demo ölçümünde her biri puanı düşürdü, 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ı, `_src` şablonlarını 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 CSS'ini oku, her ağırlığın woff2 dosyasını ayrı ayrı site_fetch ile `assets/fonts/` altına indir ve @font-face kurallarını `font-display: swap` ile `assets/app.css` içine yaz; design-check özgün fontu orada arar. İndirdiğin CSS'teki font-family adını ve ailenin ı, İ, ş, ğ harflerini içerdiğini kontrol et (Tanker'de ı yok). İlk ekranda kullandığın HER ağırlığı `<link rel="preload" as="font" type="font/woff2" crossorigin>` ile önceden yükle ve bu satırları stil dosyası satırından önce yaz; üç dosyayı geçiyorsa ağırlık sayısını azalt. Demoda preload edilmeyen tek bir gövde ağırlığı mobil LCP'yi 2,6 saniyeye itti ve performansı 97'ye düşürdü. Fontshare fontlarının çoğunda ₺ işareti yok, fiyatları "TL" ile yaz.
4. Menüyü ve alt bilgiyi statik HTML yap. chrome.js, motion.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. Şablonlarda `{{...}}` yerine `
[[NAV]]` gibi yer tutucu kullan, uzantıları .html olmasın; yoksa design-check ve seo-check onları yarım sayfa sanar. Mobil menüyü JS'siz `<details>` ile kur. Alt bilgide işletme adı, adres ve telefon düz metin olarak dursun; alt bilgi ve kırıntı bağlantıları en az 44 piksel yüksekliğinde olsun.
5. Görselleri site_fetch ile indirirken dönüştür: aynı görseli resize="480x", "800x" ve "1200x", image_format="webp", quality=60 ile ayrı dosyalara yaz (site_fetch kırpmaz; kırpım gerekiyorsa kaynağı o oranda iste). Her `<img>` için srcset, sizes ve gerçek orana uyan width ve height ver. Sayfanın LCP öğesi olan görsel fetchpriority="high" olsun ve lazy olmasın; diğer bütün görseller loading="lazy" decoding="async" olsun. Mobilde ilk ekranı dolduran bir görsel varsa `<picture>` ile mobile daha küçük bir kırpım ver.
6. Her sayfaya `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` ekle ve logodan site_fetch ile resize="180x180" bir apple-touch-icon üret. Favicon bağlantısı yoksa tarayıcı /favicon.ico ister, konsola 404 düşer ve En İyi Uygulamalar puanı 96'ya iner.
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 her boşluk ` ` olsun ("Ara: 0212..." gibi önekteki boşluk dahil); style="" niteliği kullanma; her düğmeye type yaz; aria-label'ı yalnız landmark, form ya da etkileşimli öğeye koy (ul ya da rolsüz div'e koymak hata verdi); aynı adla etiketlenmiş iki landmark olmasın; satır sonunda boşluk bırakma.
8. Başlık sırası atlamasın: liste sayfasında h1'den sonra kart başlıkları h3 olunca erişilebilirlik 98'e düştü; kartları yeniden kullanırken başlık düzeyini sayfaya göre ver (liste sayfasında h2, bir h2 bölümünün içinde h3).
9. Hareket için niteliğin adı data-reveal olsun (design-check hareketi yalnız bu adla tanır). Gizli başlangıcı JS yalnız sayfa açıldığında ekranın altında kalan bloklara versin, ilk ekrandaki içerik hiç gizlenmesin; transform kullan, opaklıkla soldurma kontrast denetimini düşürür. Niteliği tek başlığa değil başlığı ve açıklamasını saran bloğa koy; demoda yalnız başlığa konunca bekleyen başlık alttaki paragrafın üstüne bindi. prefers-reduced-motion: reduce olduğunda hiçbir şey gizlenmesin ve animasyonlar kapansın.
SEO, AEO ve GEO:
1. Adresleri dizin biçiminde ve sonu eğik çizgili kur. site.config.js'in seo bloğunu doldur ve `node seo-stamp.mjs` çalıştır. Sayfaya özel şemayı 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 çok 60 karakter olsun (seo-check 25'in altını ve 65'in üstünü hata sayar), description 130 ile 158 karakter, her sayfada tek h1 ve her sayfanın ana içeriği en az 150 kelime. İletişim, gizlilik ve liste sayfaları bu sınırın altında kalmaya yatkın; sayfaya özgü bilgi ekle, dolgu yazma.
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 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 sabit konumlu öğeler (yapışkan çubuk gibi) sayfanın ortasında görünebilir ve aşağıdaki lazy görseller boş çıkabilir; bunları 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 (hedef 99 ile 100), Accessibility, Best Practices ve SEO 100; masaüstünde dördü de 100. 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.
Etkileşim kontrolü: site_preview hover, klavye kısayolu ve dialog gösteremez. Bana masaüstünde kartların üstünde imleci gezdirince ışığın imleci izlediğini; Ctrl K, Cmd K ve / ile menünün açıldığını, Türkçe karaktersiz yazınca da sonuç geldiğini ("erisilebilir" gibi), ok tuşları ve Enter ile bir yazıya gidildiğini, Esc ile kapanınca odağın Ara düğmesine döndüğünü ve JavaScript kapalıyken Ara bağlantısının projeler sayfasını açtığını nasıl kontrol edeceğimi yaz.
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 ve uyguladığın düzeltmelerin listesi.
