Gazi Osman Paşa Yalısı Web Sitesi
Yüz elli yıllık bir hikâye, tek sitede.
BAU Gazi Osman Paşa Yalısı · Web Platformu · 2026
Sultan II. Abdülhamit'in emriyle Plevne kahramanı Gazi Osman Paşa için inşa edilen yalı, arkeolojik kazı ve ihya projesiyle Bahçeşehir Üniversitesi bünyesinde yeniden ayağa kalktı. Site bu dönüşümü anlatıyor: çizgi siluet animasyonuyla açılan hero, 1879'dan günümüze önce/sonra kaydırıcısı, tarihsel süreç, Balyan mimarisi, kazı buluntuları, Yalı Restoran menüsü ve etkinlik takvimi. Editörler sayfayı panelde açıp tıkladıkları metni ve görseli yerinde düzenliyor.
Zorluk
Yalının 1879'dan bugüne uzanan hikâyesi, kazı buluntuları ve yeni işlevleri (restoran, etkinlikler) tek bir yerde anlatılmıyordu. İçerik sık değişeceği için editörlerin kod bilmeden metin ve görsel güncelleyebilmesi gerekiyordu.
Çözüm
Sunucu tarafında üretilen, Supabase'de tutulan içerikle beslenen iki dilli bir site kurduk. Hero'da yalının cephesi çizgi çizgi beliriyor ve Vimeo videoya geçiyor; önce/sonra kaydırıcı, tarih şeridi ve arkeoloji bölümleri hikâyeyi taşıyor. Panelin canlı editörü sayfayı iframe'de açıyor, tıklanan alanı yan panelde düzenletiyor, iki saniyede otomatik kaydedip önbelleği temizliyor.
Neler yaptık
- Siluet animasyonu ve video hero: Yalının cephesi çizgi çizgi çiziliyor; ses ve genişletme kontrollü Vimeo video.
- Önce / sonra kaydırıcı: 1879 ilk yapım ile günümüz BAU kampüsü tek karede, sürükleyerek karşılaştırma.
- Tarihsel süreç ve mimari: 1879-1881 inşaat, 1908 mektep, 1927 yıkım ve BAU'da ihya; Balyan mimarisi ve saraylar aksı bölümleri.
- Arkeoloji: Harem ve selamlık temel kalıntıları, hamam, mozaik ve çini buluntuları; kazı galerisi.
- Yalı Restoran ve etkinlikler: Menü kalemleri, açılış saatleri ve rezervasyon; etkinlik listesi ve galerisi panelden yönetiliyor.
- Canlı editör: Sayfa panelde iframe içinde açılır, tıklanan bölüm yan panelde düzenlenir; medya kütüphanesi, SEO ve ayarlar aynı panelde.
Süreç
- İçerik ve hikâye: Tarihi kaynaklar ve katalogdan bölüm yapısının ve iki dilli metinlerin çıkarılması.
- Tasarım: Bordo ve altın palet, serif tipografi, yalı siluetinin çizimi ve hareket dili.
- Geliştirme: Next.js App Router, Supabase içerik ve medya, canlı editör, WebP görsel işleme.
- Yayın: yali.bau.edu.tr üzerinde dağıtım; katalog PDF, etkinlik ve restoran modüllerinin eklenmesi.
Sonuçlar
- 1879 Tarih şeridi (günümüze kadar)
- TR · EN İki dil (sunucu tarafı)
- Canlı Yerinde düzenleme (kod bilmeden)
Teknolojiler
- Next.js
- React
- TypeScript
- Supabase
- Framer Motion
- Tiptap
- Vimeo Player
- Docker / Coolify