Web sitemi nasıl yaptım ?
Kendime uzun zamandır bir site yapmayı planlıyordum. Bu planımı hayata geçirmek için bir çok deneme yaptım fakat bu tasarımlar beni tatmin etmiyordu. Bu durumları aşmak için bir kaç deneme yaptım fakat istediğim sonucu alamadım. Aramalarıma devam ederken Adem İlter’in web sitesini gördüm ve sade oluşu aynı zamanda içeriğe önem veren bir site olması beni etkiledi. Sonraki araştırmalarımda ise Faruk Oruç’un sitesine rastladım ve bu sitede bana çok büyük ilhamlar verdi. Bunların yanı sıra React, Nextjs ve Tailwindcss kullanarak bir web sitesi geliştirme fikri aklımdaydı. Bunu fırsat bilerek web sitemi Next js — TailwindCSS kullanarak yapmaya karar verdim. Hadi şimdi bunu nasıl yaptığımı konuşalım.
İlerleyiş
- Tasarım sadeliği
Örnek aldığım siteleri baz alarak ortaya bir iş çıkaracaktım ama birebir aynıları olmamalıydı kendi özgünlüğümü katıp gördüğüm iki siteyi ve bir kaç diğer siteyi harmanlayarak bir iş çıkarma kararı aldım.
- Geliştirmeye açık olma
Yapacağım sitenin aktif olarak geliştirmeye açık olması eklemek istediğim bir fikri direk içeriye ekleyebilmem için hızlı pratik bir yapıya kurup ardından eklemek istediğim işlemleri API ile bağlayıp kullanabilme
- Kullanılabilirlik
Bir kullanıcının siteye girdiğinde arayıp erişmek istediği içerikleri önüne doğrudan sunup onu kendi doğrultumda yönlendirmek kullanıcıyı yormamak ve kullanıcıyı ekstra görsellerle baymadan sadeliğin içinde tutmak
Neler Kullandım
- React — kullandığım frontend kütüphanesi
- Next js — bir react frameworkü
- Tailwind — utility base css frameworkü
- Jest — Test kütüphanesi
- Pnpm — paket yöneticisi
Adım adım projeyi oluşturma
Projeyi oluşturma
Öncelikle bir Next projesi oluşturdum. Ardından Prettier, lint gibi kullanacağım paketlerin yükledim. Burada gerekli paketleri indirmek için Pnpm kullandım. Sonrasında Github a yükleyip vercel otomatik deploy için hazırlıkları tamamladım.
Klasör yapısı
Next js için klasör yapısı önem arz ediyor. Bunu sebebi ise next js routing’i pages klasörünün altına oluşturduğumuz isimleri baz alarak yapıyor olması.
Tasarım Çıkarma
Kafamda örnek aldığım sitelerden bir renk, font ve ufak tefek çizimlerle kafama oturan bir tasarım çıkartıp bunu koda dökmeye başladım. Bu işlemde TailwindCSS kullanarak yaptım ama siz dilerseniz ChakraUI gibi kütüphanelerden yardım alabilirsiniz.
Son Aşama
Tasarımları tamaladıktan sonra ufak bir sayfa geçiş animasyonu ve dark-light tema eklemesi gerçekleştirdim. Gerek duyarsam diye mdx kütüphanesini kurdum bunu sebebi ise blog tarzı bir bölüm yaparsam bunları markdown dosyası olarak tutmak markdown ile hızlıca bir blog yazısı oluşturma imkanından faydalanmak.
Not: Bu medium’da paylaştığım ilk yazı olacak bundan dolayı bir hatam olduysa şimdiden özürlerimi iletiyorum. Gerekli diğer kaynaklar ve ilham aldığım linkleri referans olarak bırakıyorum.
referanslar
Adem Ilter websitesi ve githubda kodları bulunuyor.
Faruk Oruç sitesinde benim yazdığım makalenin daha güzelini ve svelte için yazılmış olan yazısını bulabilirsiniz.
