Siteyi neden yaptım?
Projelerimi yalnızca adlarıyla listelemek, ne yaptığımı anlatmaya yetmiyordu. Bu nedenle her proje için ayrı bir yazı hazırladım. Yazının başında projenin amacı ve kullandığım araçlar, devamında ise geliştirme adımları ve karşılaştığım sorunlar yer alıyor. Gerçek ekran görüntüleri de anlatılan sonucu görünür kılıyor.
HTML, CSS ve JavaScript'in görevleri
HTML, başlıkların, metinlerin, görsellerin ve bağlantıların yapısını tanımlıyor. CSS, renkleri, yazı boyutlarını, boşlukları ve ekran küçüldüğünde düzenin nasıl değişeceğini belirliyor. JavaScript ise sayfadaki etkileşimleri yürütüyor. İçerik ağırlıklı bu yapı için ayrı bir veritabanı veya kullanıcı girişi gerekmiyor.
Proje yazıları ortak bir CSS dosyasını kullanıyor. Böylece metin genişliğini veya görsel düzenini değiştirdiğimde bütün yazılar aynı görünümü koruyor. Her yazının adresinin ayrı olması, belirli bir projeyi doğrudan paylaşmayı da kolaylaştırıyor.
Telefon görünümünü nasıl düzenledim?
Ana sayfada büyük ekranda yan yana duran alanlar telefonda alt alta geçiyor. Görseller bulundukları alanın genişliğine uyuyor; bağlantılar ve başlıklar da küçük ekranda taşmayacak şekilde düzenleniyor. Hem ana sayfayı hem uzun proje yazılarını farklı ekran genişliklerinde kontrol ettim.
Görseller ve içerik düzeni
Kapakta bir projenin gerçek ekranını kullanıyorum. Yazı içinde de o ekranın neyi gösterdiğini kısa bir açıklamayla belirtiyorum. Bir uygulamanın giriş ekranıyla tamamlanmış işlem sonucunu birbirine karıştırmamak önemli; görsel açıklamalarını buna göre yazıyorum.
Sunucuya nasıl yayınladım?
Hazırlanan dosyalar sunucuda sürüm klasörüne aktarılıyor. Kontrollerden sonra siteyi sunan bağlantı yeni sürüme çevriliyor. Önceki sürüm klasörleri kaldığı için sorunlu bir yayında eski dosyalara geri dönmek mümkün. Caddy, alan adına gelen istekleri siteye yönlendirip HTTPS bağlantısını sağlıyor.
Ne öğrendim?
Bir portfolyoda sadece kodun değil, yapılan işi anlatma biçiminin de önemli olduğunu gördüm. Teknik ayrıntıyı tamamen kaldırmak projeyi belirsiz bırakıyor; çok yoğun anlatmak ise okumayı zorlaştırıyor. Bu yüzden kısa konuşma özetiyle ayrıntılı geliştirme notlarını aynı yazıda bir araya getirdim.
Mülakatta sorulabilecek bir soru
Neden veritabanı kullanmadın?
Sitede kullanıcı hesabı veya sürekli değişen işlem verisi yok. İçerikleri statik sayfalar olarak tutmak, bu ihtiyaç için yayınlamayı ve bakımı kolaylaştırıyor.
Kısa Özet
Projelerimi ve geliştirme sürecimi göstermek için kişisel bir web sitesi hazırladım. HTML ile sayfa yapısını, CSS ile görünümü ve mobil düzeni, JavaScript ile etkileşimleri kurdum. Her proje için açıklama, gerçek ekran görüntüsü ve kaynak bağlantısı ekledim. Siteyi kendi sunucumda Caddy üzerinden yayınladım. Bu projede içerik düzenini, mobil görünümü ve canlıya alma sürecini birlikte yönetmeyi öğrendim.