Bu siteyi nasıl yaptım?

Yeni portfolyomu yaparken üç şey istedim: hızlı açılsın, arama motorları içeriği eksiksiz görsün ve içerikleri koda dokunmadan güncelleyebileyim. Bu yazıda sitenin nasıl kurulduğunu özetliyorum.

Altyapı

Site Next.js 16 üzerinde çalışıyor. Sayfalar derleme sırasında hazır HTML olarak üretiliyor; yani ziyaretçi ya da arama motoru botu geldiğinde sunucunun bir şey hesaplamasına gerek kalmıyor.

İçerikler (projeler, deneyimler, blog yazıları) bir Postgres veritabanında duruyor. Canlıda Neon kullanıyorum; bilgisayarımda ise hiçbir kurulum gerektirmeyen gömülü bir Postgres (PGlite) açılıyor ve ilk çalıştırmada kendini başlangıç içeriğiyle dolduruyor.

Önbellek: sayfa ne zaman yenilenir?

Veriyi okuyan her fonksiyon önbelleğe alınıyor ve bir etiketle işaretleniyor:

export async function getProjects(locale: Locale) {
  "use cache";
  cacheLife("max");
  cacheTag("projects");
  return getProjectsUncached(await getDb(), locale);
}

Bir projeyi güncellediğimde sadece projects etiketini geçersiz kılmak yetiyor; o veriyi kullanan sayfalar yeniden üretiliyor, geri kalan her şey önbellekte kalıyor.

Tasarım

Tasarımda teknik çizim (blueprint) hissi istedim: ince ızgara, kesikli bölüm çizgileri, tek bir vurgu rengi ve monospace başlıklar. Yazılar Plus Jakarta Sans, kod ve etiketler Geist Mono ile. Tema sistem ayarını takip ediyor; istersen üstten açık ya da koyu seçebiliyorsun.

Canlı parçalar

Bazı bölümler her ziyarette değişiyor: Discord durumum, Spotify'da dinlediğim şarkı ve GitHub katkı grafiğim. Bunlar sayfanın geri kalanını yavaşlatmasın diye sabit boyutlu kutularda ve tarayıcı tarafında yükleniyor; bir servis cevap vermezse sayfa bozulmuyor, kutu sade bir duruma geçiyor.

Sırada ne var?

İçerikleri Discord hesabımla girdiğim bir yönetim panelinden düzenlemek. Blog, galeri ve projeler oradan yönetilecek; kaydettiğim anda ilgili sayfa yenilenecek.