İçeriğe geç
← Projeler

başlangıç: 2026 · 11ty · Nunjucks · Tailwind CSS · Alpine.js · Markdown · Pagefind · Sveltia CMS · GitHub Actions

kadir.guelec.eu

YAYINDA

Almanca ve İngilizce portfolyom ve blogum: seçili projeler, kariyer yolum ve teknik yazılar. 11ty ile üretilen statik bir site; veritabanı yok, sunucu tarafı kod yok.

kadir.guelec.eu ekran görüntüsü

Hangi problemi çözüyor?

kadir.gulec.tr Türkçe defterim; kadir.guelec.eu ise profesyonel yüzüm. İşverenler, müşteriler ve meslektaşlar için Almanca ve İngilizce bir vitrin: seçili projeler, kariyer yolum (İçişleri Bakanlığı'nda yedi yıl, ardından Almanya'da yeniden eğitim ve IHK sınavı), sertifikalar ve teknik yazılar.

Neden statik?

Günlük işim Laravel ve Livewire, ama bir portfolyo aslında içerikten ibaret. Bunun için bir PHP uygulaması ve veritabanı kurmak gereğinden fazla olurdu. 11ty ile her sayfa önceden HTML olarak üretiliyor:

  • Hız: Sunucu hiçbir şey hesaplamıyor, dosyayı olduğu gibi veriyor.
  • Güvenlik: Veritabanı ve sunucu tarafı kod yok, saldırılacak bir yüzey de yok.
  • Bakım: Güncellenecek eklenti yok, içerik Markdown.

Neler var?

  • İki dil: Her sayfada EN/DE seçimi var, tercih tarayıcıda hatırlanıyor. ?lang=de ile paylaşılabilir bağlantı veriliyor; Almanca yazıların kendi adresleri var.
  • Blog: Kod renklendirme (derleme sırasında, istemcide JavaScript yok), okuma süresi, önceki/sonraki yazı, RSS.
  • Arama: Pagefind derleme sırasında bir indeks üretiyor, arama sunucu olmadan tarayıcıda çalışıyor.
  • CMS: Sveltia CMS ile yazıları ve proje verisini tarayıcıdan düzenliyorum; her kayıt bir Git commit'i.
  • Detay sayfaları: Canlı demosu verilemeyen projeler için uzun yazılar, örneğin kadir.gulec.tr ve CoMon.
  • Paylaşım görselleri: Her yazının OG görseli derleme sırasında sharp ile üretiliyor.
  • SEO: JSON-LD, sitemap ve Düren odaklı yerel anahtar kelimeler.

Teknik kararlar

Şablonlar Nunjucks, stiller Tailwind CSS v4. Alpine.js yalnızca menü, arama ve dil seçimi gibi küçük davranışlar için var. İki dil aynı HTML'de geliyor ve html[data-lang] birini gösteriyor. Bu yöntem basit, sayfalar da ikiye katlanmıyor; bedeli ise arama motorları için iki dilin tek sayfada karışması.

Her master push'unda GitHub Actions siteyi derleyip rsync ile sunucuya gönderiyor. CMS her yazıyı ayrı bir commit olarak kaydettiği için deploy'lar sıraya giriyor; iki rsync hiçbir zaman aynı anda çalışmıyor.

Öğrendiklerim

Doğru aracı seçmek, en iyi bildiğin aracı seçmek değil. Laravel'e alışkın biri için statik bir siteye geçmek önce geri adım gibi geldi; sonuçta daha az kod, daha az bakım ve daha hızlı bir site oldu.

Şu anki durum

Yayında. Sırada Almanca bir açılış sayfası ve hreflang var; böylece EN/DE yazı çiftleri arama motorlarına çeviri olarak bildirilecek.

Daha fazla ekran görüntüsü

kadir.guelec.eu: aynı sayfa, almanca
aynı sayfa, almanca
kadir.guelec.eu: seçili projeler
seçili projeler
kadir.guelec.eu: blog
blog
kadir.guelec.eu: derleme sırasında renklendirilen kod
derleme sırasında renklendirilen kod
kadir.guelec.eu: pagefind ile arama
pagefind ile arama
kadir.guelec.eu: proje detay sayfası
proje detay sayfası
kadir.guelec.eu: telefonda
telefonda