29 Aralık 2024

Kişisel Sitemin Yeni Arayüzü: Next.js ve Tailwind CSS ile Geliştirildi

Next.js
Tailwind CSS

Merhaba! Uzun bir ara vermiştim, ancak artık kişisel sitemde yeniden yazılar paylaşmaya başladım. Bu yazımda, sitemin yeni versiyonunu neden ve nasıl Next.js ile Tailwind CSS kullanarak geliştirdiğimden bahsetmek istiyorum.

Kişisel sitemi her yıl farklı bir teknolojiyle baştan yazmaya çalışıyorum. Böylece hem o yılın popüler teknolojilerini pratik etme fırsatı buluyorum hem de sitemi güncel tutuyorum. Geçmişte sırasıyla HTML ile tek sayfalık bir site, PHP ile bir blog, GatsbyJS ile bir statik site ve 2022'de Next.js ile bir proje geliştirmiştim.

Kullanılan Teknolojiler

Sitemde Next.js ve Tailwind CSS'in yanı sıra shadcn/ui ve Magic UI gibi araçlarla hızlı ve modern bir arayüz tasarlamayı hedefledim. Uzun süredir kariyerimde Next.js'i aktif olarak kullanıyorum.

Kaynak kodlara Github üzerinden ulaşabilirsiniz.


Kişisel sitem için henüz bir logo çizebilmiş değilim. Bu konuda çok detaycı birisi olduğum için karar veremiyorum. Soyadımdan ötürü gül logosu kullanıyorum.

Eklenen Yenilikler

Yazıları Filtreleme

Sitenin yeni versiyonunda, blog sayfasında teknik ve kişisel makaleleri filtrelemek adına kategorilere ek olarak alt kategorilerde ekledim. Yazı sayısı arttığı için buna ihtiyaç duydum.

Blog kategoriler

Yer İmleri

Chrome'da kategorilere ayırarak sakladığım birçok linkim vardı. Bunları kişisel siteme ekleyerek hem başkalarının yararlanabileceğini düşündüm hem de kendim için kalıcı bir arşiv oluşturmuş oldum.

Yer imlerim

Yol Haritası

Bu aslında geçmişte aldığım bir karardı fakat gerçekleştirememiştim. Frontend Developer olmak isteyenler için bir yol haritası oluşturmak istiyordum. Bu tabi ki nacizane kendi tecrübelerim ve gözlemlerim üzerine oluşturduğum bir yol haritası, kişiden kişiye değişebilir.

Üst menü de eğitim > yol haritası adımında detaylara ulaşabilirsiniz. Kutulara tıkladığınızda ilgili konu hakkında detaylı bilgiye ulaşabilirsiniz.

Frontend yol haritası


Site henüz yapım aşamasında. Yeni özellikler eklemeye devam edeceğim.

GitHub üzerinden takip edebilir, projeyi beğenebilir, klonlayıp kendinize uyarlayabilirsiniz. Eğer bir hata görürseniz veya bir öneriniz varsa lütfen bana iletin.

Teşekkürler! 🌹