Akira — Japon Restoranı Web Sitesi

Live Demo GitHub Pages HTML5 CSS3 JavaScript

Minimalist Japon estetiğini modern web teknolojileriyle birleştiren, tek sayfalık yapıya sahip bir restoran web sitesi. Responsive tasarımı, filtrelenebilir menüsü ve rezervasyon formuyla kullanıcıya eksiksiz bir deneyim sunmayı hedefler.

Canlı demo: osmanbabayigit.github.io/Japanese-restaurant

Ana Sayfa — Masaüstü Ana Sayfa

Hakkımızda Bölümü Hakkımızda

Öne Çıkan Lezzetler Öne Çıkan Lezzetler

Menü Sayfası — Masaüstü Menü Sayfası

Mobil Görünümler

Genel

• Tüm ekran boyutlarına uyumlu responsive tasarım (mobil, tablet, masaüstü)
• Sayfa yüklenirken görüntülenen özel loading ekranı
• Smooth scroll ile bölümler arası geçiş

Ana Sayfa

• Otomatik geçişli ve manuel kontrollü görsel slider (carousel)
• Felsefe ve hikaye bölümü (Kaizen konsepti)
• Şefin öne çıkardığı imza yemekleri

Menü Sayfası

• Kategori bazlı filtreleme sistemi (Sushi & Sashimi, Ramen & Erişteler, Tempura, Başlangıçlar, Tatlılar, İçecekler)
• Her ürün için görsel, başlık, fiyat ve açıklama kartları

Rezervasyon & İletişim

• Müşteri adı, e-posta, tarih, kişi sayısı ve mesaj alanlarına sahip rezervasyon formu
• Form gönderimi sonrası kullanıcıya onay mesajı gösterimi
• Adres, telefon, e-posta ve çalışma saatleri bilgileri

Performans & SEO

• Tüm görseller .webp formatına dönüştürülerek dosya boyutu minimize edilmiştir
• Google Lighthouse metrikleri gözetilerek yapılandırılmış HTML semantiği
• meta description ve viewport etiketleriyle SEO ve mobil uyumluluk sağlanmıştır

Harici bir kütüphane veya framework kullanılmamıştır. Tüm bileşenler sıfırdan yazılmıştır.

Japanese-restaurant/
├── index.html # Ana sayfa
├── menu.html # Menü sayfası
├── css/
│ ├── anasayfa.css # Ana sayfaya özel stiller
│ ├── genel.css # Tüm sayfalarda ortak stiller (navbar, footer vb.)
│ └── menu.css # Menü sayfasına özel stiller
├── js/
│ ├── menu.js # Kategori filtreleme sistemi
│ ├── mobil.js # Mobil navigasyon ve hamburger menü
│ ├── script.js # Slider, loading ekranı, genel etkileşimler
│ └── search.js # Arama işlevselliği
└── images/ # WebP formatında optimize görseller

Projeyi klonlayın ve index.html dosyasını tarayıcıda açın:

git clone https://github.com/osmanbabayigit/Japanese-restaurant.git
cd Japanese-restaurant

Ardından index.html dosyasına çift tıklayın ya da tarayıcıya sürükleyin.

Proje, GitHub Pages üzerinde barındırılmaktadır. main dalına yapılan her push otomatik olarak canlı ortama yansır. Ayrı bir build adımı ya da CI/CD pipeline'ı gerekmemektedir.

main branch --> GitHub Pages --> https://osmanbabayigit.github.io/Japanese-restaurant/

Bu proje açık kaynak kodlu olup kişisel ve eğitim amaçlı inceleme serbesttir. Ticari kullanım için ekiple iletişime geçiniz.

© 2026 Akira — Tüm hakları saklıdır. 旭