Belge: Kişisel portföy sitesi — teknik yol haritası
Hedef: Statik, hızlı, mobil uyumlu, koyu bordo temalı vitrin
Referans ilham: brittanychiang.com (düzen ve bölüm mantığı)

1) Referans site analizi (Brittany Chiang)

Ne tür bir sistem? Brittany Chiang sitesi tipik olarak çoğunlukla statik içerik sunan bir portföydür. Kamuya açık bilgide “backend” genelde içerik teslimi ve barındırma düzeyindedir (ör. dosyaların sunucuda durması, CDN, SSL). Form, veritabanı veya kullanıcı hesabı yoksa PHP şart değildir.

Bölüm	Amaç
Sol sütun / menü	Hızlı gezinme (About, Experience, Projects…)
Ana içerik	Uzun metin + madde listeleri + iş deneyimi zaman çizelgesi
Sosyal linkler	GitHub, LinkedIn vb. dış bağlantılar
Alt bilgi	Teknoloji notu (hangi framework/hosting)

Frontend / backend ayrımı (bu projede):
• Frontend: HTML (yapı), CSS (görünüm), az miktarda JavaScript (menü, kaydırma, tema/odak).
• Backend: Yok veya minimal — dosyalar doğrudan sunucudan “statik hosting” ile servis edilir.
• PDF CV: Tarayıcıda cv.pdf dosyasına doğrudan link; PDF üretimi Word/LaTeX gibi araçlarla sizde kalır.

1.1 Mimari şema (mantıksal)

┌─────────────────────────────────────────────────────────────┐
│                        ZİYARETÇİ                            │
└───────────────────────────┬─────────────────────────────────┘
                            │ HTTPS
                            ▼
┌─────────────────────────────────────────────────────────────┐
│  Statik hosting (Netlify / Vercel / GitHub Pages / …)      │
│  • index.html  • css/  • js/  • assets/  • cv.pdf           │
└───────────────────────────┬─────────────────────────────────┘
                            │
              ┌─────────────┴─────────────┐
              ▼                           ▼
       (isteğe bağlı)              Dış bağlantılar
       özel domain DNS            LinkedIn, GitHub, ORCID

1.2 Veri akışı (CV indirme)

Kullanıcı "CV İndir" ──► GET /assets/cv.pdf ──► Tarayıcı indir / önizle
                              │
                              └── Sunucudan düz dosya (PDF binary)

2) Bu projede ihtiyaç duyulan çıktılar

index.html — tek sayfa veya birkaç bölüm (About, Experience, Projects, Skills, Contact).
css/styles.css — koyu arka plan, bordo vurgu, tipografi, responsive grid.
js/main.js — yumuşak kaydırma, mobil menü, isteğe bağlı “aktif bölüm” vurgusu.
assets/ — profil ve galeri görselleri (optimize edilmiş boyut önerilir).
cv.pdf — sizin hazırladığınız özgeçmiş (site kökünde veya assets altında).

3) Uygulama algoritması (adım adım)

İçerik dondurma: Metinler, tarihler, proje isimleri, iletişim bilgileri kesinleşir.
Bilgi mimarisi: Menü sırası ve bölüm başlıkları netleşir.
HTML iskeleti: Semantik etiketler (header, nav, main, section, footer).
CSS tema: CSS değişkenleri (renk paleti), tipografi, breakpoint’ler.
Erişilebilirlik: Kontrast, odak halkası, atlama bağlantısı (“Skip to content”).
Performans: Görsellerde uygun boyut, lazy loading (isteğe bağlı).
Test: Mobil / masaüstü tarayıcılar, harici linkler.
Yayın: Depo oluşturma → hosting bağlama → (sonra) domain DNS.

3.1 Karar ağacı: hangi teknoloji?

                    [Portföy + CV linki]
                              │
              ┌───────────────┴───────────────┐
              ▼                               ▼
      Sadece vitrin mi?                 Sunucu tarafı gerek mi?
              │                               │
             EVET                            HAYIR
              │                               │
              ▼                               ▼
      HTML + CSS + az JS              (Bu projede gerek yok)
      Statik hosting

4) Zaman çizelgesi (öğrenme + uygulama)

Gün/oturum 1 : İçerik + HTML iskelet + temel CSS
Gün/oturum 2 : Responsive + görsel düzen + JS iyileştirmeleri
Gün/oturum 3 : Son kontroller + PDF CV ekleme + yayına hazırlık

5) Domain ve hosting (özet)

Hosting: Dosyaların internete açıldığı yer.
Domain: İnsanların hatırlayacağı adres (ör. adsoyad.com).
DNS: Domain adını hosting sağlayıcısına yönlendiren kayıtlar.

6) PDF olarak kaydetme

Tarayıcıda bu dosyayı açın → Dosya → Yazdır → Hedef olarak PDF olarak kaydet (macOS: PDF menüsü). Böylece tek dosyada arşivlenmiş yol haritanız oluşur.

7) Yayına alma algoritması (GitHub Pages örneği)

BAŞLA
  │
  ├─► GitHub'da yeni repository oluştur (ör. portfolio)
  │
  ├─► Proje dosyalarını (index.html, css/, js/, assets/) push et
  │
  ├─► Repo Settings → Pages → Branch: main, folder: / (root)
  │
  ├─► Birkaç dakika sonra site URL'i üretilir (username.github.io/repo)
  │
  ├─► İsteğe bağlı: özel domain satın al → DNS A/CNAME kayıtlarını Pages talimatına göre ayarla
  │
  └─► BİTİR (HTTPS genelde otomatik)

7.1 DNS mantığı (özet)

domain.com  ──DNS sorgusu──►  Domain sağlayıcısı
                                      │
                                      ▼
                            Hosting IP veya CNAME
                                      │
                                      ▼
                            Ziyaretçi sitenize ulaşır

8) Risk ve kalite kontrol listesi

Görsellerin boyutu: çok büyük PNG’ler yükleme süresini artırır (sıkıştırma önerilir).
Harici linkler: rel="noopener noreferrer" ve yeni sekme tutarlılığı.
İçerik doğruluğu: tamamlanmamış deneyimleri “tamamlanmış staj” gibi yazmayın.
CV PDF: güncel tarih ve iletişim bilgileri.

Bu belge, proje kökündeki docs/proje-yol-haritasi.html dosyasıdır.