Kişisel Sitemin NextJS Versiyonu

Düzenli aralıklarla kişisel sitemi farklı yazılım dilleriyle baştan yazıyorum. Teknolojinin yanı sıra, tasarımsal olarakta daha minimal, sade ve şık bir arayüz yapmaya özen gösteriyorum.

v6 olarak isimlendirdiğim bir önceki versiyonda React başlangıç kiti olan Gatsby ile geliştirmiştim. Kaynak kodlara GitHub’tan ulaşabilirsiniz.

v7 yani NextJS ile geliştirilmiş olan versiyonu yayına almış bulunmaktayım. Detaylar ve performans testleri için okumaya devam edin.

Kullanılan Teknolojiler

NextJS’in yanı sıra, Tailwind Css’i de ilk kez denemiş oldum.

NextJS

React tecrübemden ötürü NextJS’e geçmek çok kolay oldu. Zaten neredeyse birebir aynısı. Kişisel sitemde SSG (Static Site Generation) render methodunu kullandım. Tüm site çıktısını HTML dosyaları olarak ürettiği için tam performans veriyor. Ayrıca tüm kaynak kod hazır bir şekilde sayfaya yüklendiği için SEO problemi ortadan kalkıyor.

Tailwind CSS

Tailwind CSS ilk çıktığında inline css yazmaya benzetmiş ve ısınamamıştım. Uzun bir sürede mesafeli yaklaştım. Deneyimledikten sonra gördüm ki, çok hızlı proje çıkılabiliyor. CSS’te körelmemek adına kendim yazma fikrine hâlâ sıcak bakıyorum fakat bu tarz projelerde zaman kaybı yaşamamak ve tutarlılık için çok mantıklı bir seçenek olduğuna aşikar.

Kaynak kodlara Github üzerinden ulaşabilirsiniz.

Yeni Arayüz

Blog sayfasında teknik ve kişisel makaleleri filtrelemek adına linkler ekledim. Makale sayısı arttığı için buna ihtiyaç duyulmaya başlanmıştı.

Tasarımsal olarak beyaz sade tasarımları beğeniyorum. Yine bu çizgide kaldım. Genelde her yeni sürümde tema rengimi değiştiririm. NextJS versionunda yeşilin #16a34a tonunu kullandım.

Sitemin yeni temasının renk kodu

Logo olarak henüz kendime bir logo bulabilmiş/çizebilmiş değilim. Sürekli değiştiriyorum. Bu sefer hem İstanbul’ın simgesi olması, hemde soyadıma bir çağrışım olabileceğini düşündüğüm için gül logosu ekledim.

omergulcicek.com Logo

Performans

SSG yani static HTML çıktıları ile site oluştuğu için performans harika. Mobile ve Desktop testlerinden 100’er puan alıyor.

omergulcicek.com — Lighthouse Performans Verileri

Eklenecek Yenilikler

Site teknoloji ve tasarımsal olarak yenilenmenin yanı sıra, içerik olarakta güncellendi. Fakat bu versiyona yeni farklı sayfalarda geliştirmek istiyorum.

Bu sayfalardan ilki Seyahat olacak. 2022 yılı içerisinde karış karış İstanbul’u gezme hayalime çok güzel devam ediyorum. Bunları bir kişisel gezi sayfasında arşivlemek istiyorum.

Ek olarak, Frontend Developer’lara nacizane bir yol haritası oluşturmak hedeflerim arasında. Youtube ve Udemy kaynaklarının çoğu giriş seviyesi yada eksik/yanlış bilgilerle dolu. Geçmiş yıllarda verdiğim Frontend eğitiminlerindeki konularla harmanlayıp, güncel ve temiz bir liste oluşturduğumda bu yol haritası sayfası ile ilgili detayları hakkımda sayfasında görebileceksiniz.

Site ile ilgili görüş/öneri/eleştirilerinizi tarafıma çekinmeden iletebilirsiniz.

Kişisel Blog Sitem: omergulcicek.com

Makaleyi alkışlayarak destek olabilirsiniz 🌹

--

--

Frontend Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store