xFrightfull Portfolyo
Bu web sitesi: Astro ve TypeScript ile statik olarak üretilen, çok dilli ve temalı kişisel bir portfolyo.
Genel bakış
Tamamen kontrol ettiğim, aşamalar hâlinde büyümesi için tasarlanmış kişisel bir portfolyo. 1. aşama temeli oluşturuyor: tasarım sistemi, üç tema, üç dil, proje vitrini ve GitHub bölümü.
Çözülen sorun
Başka bir platformdaki profil sayfası özgürce şekillendirilemez, tam olarak çevrilemez ve yaptığım işlerin uzun vadeli kaydını tutamaz. Bana ait, hızlı yüklenen ve kolay genişletilebilir tek bir yer istedim.
Uygulama ve tasarım kararları
Her renk, boyut ve boşluk değeri CSS özel özelliklerinde yaşar; bu yüzden üç tema yalnızca farklı token kümeleridir. Tüm metinler tek bir tipli sözlükten gelir ve her dil kendi statik sayfaları olarak önceden üretilir; tarayıcıda çalışan bir çeviri kodu yoktur.
İçerik (projeler, yetenekler, araçlar, bağlantılar) düz tipli veridir. Bileşenler veride tanımlananı gösterir; yani bir proje eklemek hiçbir bileşene dokunmayı gerektirmez.
Teknolojiler ve araçlar
- Astro
- TypeScript
- CSS
- Vercel (planned hosting)
Zorluklar ve çözümler
-
Zorluk
Çalışma zamanı i18n kütüphanesi olmadan üç dil.
Çözüm
Tek bir tipli sözlükten üretilen, dil önekli statik rotalar. Eksik anahtarlar derleme zamanında hata verir ve her sayfa tamamen çevrilmiş HTML olarak gelir.
-
Zorluk
Yanlış renklerin yanıp sönmesi olmadan tema değiştirme.
Çözüm
Belge başlığındaki küçük bir satır içi betik, kayıtlı temayı ilk boyamadan önce uygular.