Neden Portfolio Sitesi Yapmak İstedim?
Yazılım alanında öğrendiklerimi yalnızca bilgisayarımda duran projeler halinde bırakmak istemedim. Geliştirdiğim oyunları, mobil uygulamaları ve web çalışmalarını tek bir yerde gösterebileceğim kişisel bir portfolio oluşturmaya karar verdim.
Başlangıçta temel amacım projelerimi sergilemekti. Ancak siteyi geliştirdikçe web geliştirme konusunda öğrendiğim birçok konuyu doğrudan bu proje üzerinde uygulama fırsatı buldum.
HTML ve Tailwind CSS ile Arayüz
Sitenin temel yapısını HTML ile oluşturdum. Ana sayfa, projeler, blog, hakkımda ve iletişim gibi bölümleri ayrı sayfalar halinde hazırladım.
Tasarım tarafında Tailwind CSS kullanmak, responsive tasarım ve modern arayüz oluşturma konusunda pratik yapmamı sağladı. Koyu renkli bir tasarım, mor vurgu renkleri, kartlar, responsive grid yapıları ve hover efektleri kullandım.
JavaScript ile Dinamik İçerik
Proje ve blog kartlarını HTML içerisine tek tek yazmak yerine JavaScript üzerinden dinamik olarak oluşturmayı tercih ettim.
Böylece yeni bir proje eklemek istediğimde yalnızca JavaScript içerisindeki proje listesine yeni bir nesne eklemem yeterli hale geldi.
KARŞILAŞTIĞIM PROBLEM
Aynı JavaScript dosyası farklı HTML sayfalarında çalıştığı için bazı sayfalarda bulunmayan elementlere erişilmeye çalışılıyordu.
Elementin sayfada gerçekten bulunup bulunmadığını kontrol eden koşullar ekleyerek bu hatayı çözdüm.
GitHub Pages ile Yayınlamak
Siteyi GitHub üzerinde tutmak yalnızca kodlarımı saklamamı değil, GitHub Pages kullanarak doğrudan internet üzerinde yayınlamamı da sağladı.
Böylece yaptığım her değişikliği repository'ye commit ettikten sonra canlı site üzerinde görebiliyorum.
Bu süreç Git ve GitHub kullanımını gerçek bir proje içerisinde pratiğe dökmeme yardımcı oldu.
İletişim Formunu Çalıştırmak
Statik bir GitHub Pages sitesinde normal HTML formunun tek başına e-posta gönderemediğini fark ettim.
Bunun için Formspree kullanarak iletişim formunu gerçek mesajları alabilecek hale getirdim. Ad, e-posta ve mesaj alanlarını düzenledim ve formu spam gönderilerine karşı korumak için CAPTCHA sistemi kullandım.
Bu bölüm bana frontend tarafının zaman zaman farklı servislerle birlikte çalışması gerektiğini gösterdi.
SEO'yu Öğrenmek
Site yalnızca güzel görünmemeliydi; arama motorlarının içeriğini anlayabilmesi de önemliydi.
Bu nedenle sayfalara özgün başlıklar ve açıklamalar, canonical adresler, Open Graph bilgileri ve sosyal medya önizleme ayarları ekledim.
robots.txt
Arama motorlarının siteyi tarayabilmesi için robots.txt oluşturdum.
sitemap.xml
Site içerisindeki önemli sayfaları arama motorlarına bildiren bir site haritası oluşturdum.
Google Search Console
Daha sonra siteyi Google Search Console'a ekleyerek doğrulamasını gerçekleştirdim.
Sitemap dosyasını Google'a gönderdim ve ana sayfanın dizine eklenmesi için tarama isteği oluşturdum.
Böylece yalnızca bir web sitesi geliştirmekle kalmayıp, sitenin arama motorları tarafından nasıl keşfedildiği konusunda da deneyim kazandım.
Kullanıcı Deneyimini Geliştirmek
Siteyi geliştirirken yalnızca içerik eklemek yerine ziyaretçinin site içerisinde rahat hareket etmesini de düşünmeye başladım.
Mobil Menü
Küçük ekranlarda kullanılabilecek responsive hamburger menü oluşturdum.
Scroll Animasyonları
Bölümlerin sayfa kaydırıldıkça yumuşak şekilde görünmesini sağladım.
404 Sayfası
Geçersiz adresler için tasarımla uyumlu özel bir 404 sayfası oluşturdum.
Responsive Tasarım
Kartların, menülerin ve içeriklerin farklı ekran boyutlarına uyum sağlamasına çalıştım.
Bu Projede Neler Öğrendim?
Portfolio projesi bana küçük görünen bir web sitesinin aslında birçok farklı teknoloji ve kavramı bir araya getirebileceğini gösterdi.
Sonuç
Başlangıçta yalnızca projelerimi göstermek için hazırladığım portfolio sitesi, zamanla üzerinde birçok farklı web geliştirme konusu öğrendiğim gerçek bir projeye dönüştü.
Bundan sonra yeni projeler geliştirdikçe siteyi de güncellemeye devam etmeyi planlıyorum.
Böylece portfolio yalnızca tamamlanmış bir site değil, gelişimimi ve yaptığım çalışmaları zaman içerisinde gösterebilen yaşayan bir proje olacak.