VANDORA — Experience Snack Bar

Modern, responsive tek sayfa landing page. Freelance showcase + 2026 web teknolojileri deneyi.

Canli Demo →

Ne Icin

@vando.raa — Iki kadin muhendislik ogrencisinin el yapimi, seker ilavesiz snack bar markasi. Bu site gercek bir freelance teklifi degil, "2026'da cutting-edge frontend neye benzer?" sorusunun pratik cevabi. Icerik ve gorseller gercek Instagram verileriyle uyumlu.

Ozellikler

Wow Momentleri

• Canvas particle hero — mouse-interactive, brand renkli particle sistemi
• Manuel char-split hero animasyonu — blur → netlik, elastic easing
• Text scramble — section basliklar viewport'a girerken decode efekti
• Magnetic butonlar — fare yaklasinca buton fareye dogru kayar
• Kart hover glow — mouse-tracking radial gradient
• Enhanced mini oyun — paket yirtilarak aciliyor, typewriter soru, progress dots, brand renk confetti

2026 Teknolojileri

• CSS scroll-driven animations (animation-timeline: view()) — Baseline 2026, sifir JS
• CSS spring easing (linear()) — native bounce/elastic
• <picture> + WebP (JPEG fallback ile)
• View Transitions uyumlu yapi

Performans & Kalite

• Zero CLS — tum <img>'lerde width/height
• Lazy loading hero disindaki tum gorsellerde
• SRI integrity hash'leri tum CDN script'lerinde
• Trimmed Google Fonts (15 weight → 8)
• Zero konsol hatasi

Erisilebilirlik

• Skip navigation link
• :focus-visible global stil
• aria-expanded hamburger'da
• role="navigation" + aria-label
• WCAG AA kontrast

SEO

• JSON-LD Organization schema
• Open Graph + Twitter Card meta
• robots meta + sitemap-ready canonical

Teknoloji

Alan	Stack
Markup	Vanilla HTML5
Styling	CSS3 (Custom Properties, Grid, Flexbox, Scroll-driven animations, Container queries)
Scripting	Vanilla JavaScript (ES6+)
Animasyon	GSAP 3.12 + ScrollTrigger
Smooth Scroll	Lenis 1.1
Fontlar	DM Sans (gövde) + Fraunces (başlıklar)
Gorseller	Google Imagen 4 (quality 92, WebP + JPEG)
Hosting	GitHub Pages

Renk Paleti

--green:      #1a4a2e   /* primary */
--pink:       #FF2D78   /* accent */
--gold:       #e8a838   /* tertiary */
--cream:      #FFFAF5   /* background */
--dark:       #1a1a1a   /* text */

Bolumler

1. Hero — Canvas particle arka plan, char-split title animasyonu, CTA butonlari
2. Stats — Animated counter (0 → hedef)
3. Hikaye — Kurucu hikayesi, parallax gorsel
4. Urunler — Yatay scroll snap + 3D tilt kartlar
5. Kullanim Senaryolari — 4 kart (Sinav, Spor, Diyet, Kahve)
6. Icerikler — 8 malzeme detayi + no-badges (seker/un/koruyucu yok)
7. Oyun — Interaktif paket acma + typewriter + progress + confetti
8. QR — Telefon mockup + scan animasyonu
9. CTA Kartlari — Deneyim paketi, Kurumsal, Bayilik
10. Instagram — Gercek IG verileriyle 4'lu grid

Kurulum

git clone https://github.com/mahsumaktas/vandora.git
cd vandora
python3 -m http.server 8000
# http://localhost:8000

Build step yok, bundler yok, dependency yonetimi yok. Tek HTML dosyasi + gorseller.

Dosya Yapisi

vandora/
├── index.html          # Tum site (CSS + JS inline, 1366 satir)
├── images/             # 7 gorsel (JPG + WebP variants)
├── README.md
├── LICENSE             # MIT
└── .gitignore

Lisans

MIT — bkz. LICENSE

Gelistirici

Mahsum Aktas — @mahsumaktas

Bu proje, claude-code ile el ele yazildi.