HTML/CSS/Sass/Tailwind/JS Temelleri ve Gym Projesi

2024'te front-end temellerimi sistemli biçimde çalıştım: semantik HTML, modern CSS (flex/grid), Sass ile modülerleştirme, Tailwind CSS ile tasarım token'ları ve yardımcı sınıflar, vanilla JS ile komponent davranışları. Bu süreçte responsive tasarım, erişilebilirlik (kontrast, odak halkaları, etiketleme) ve performans (boyutlandırılmış görseller, lazy-load) konularını benimsedim.

Bu öğrenimleri uygulamak için bir Gym projesi geliştirdim: ana sayfa kahraman alanı, üyelik planları, eğitmen kartları, ders takvimi, iletişim formu. Tasarımı bileşenlere böldüm, renk ve tipografiyi Tailwind konfigi üzerinden yönettim, layout'u grid/flex ile kurdum. Sayfa hiyerarşisini semantik olarak kurguladım ve Lighthouse ile ölçümleyip iyileştirdim.

Twitter Clone

TypeScript ve React öğrenme sürecimi pekiştirmek için bir Twitter Clone geliştirdim. Amaç; tip güvenliği, durum yönetimi, yeniden kullanılabilir UI ve esnek tema kurgusunu aynı projede birleştirmekti. Redux ile global state akışını kurdum; feed, beğeni, yorum ve profil akışlarını tek bir kaynaktan yönetecek şekilde veri modelini sadeleştirdim.

UI tarafında Tailwind ile tasarım sistemine yakın, token tabanlı bir yaklaşım izledim. Bileşenleri küçük parçalara böldüm (kart, avatar, etkileşim butonları, sayaçlar). Asenkron veri akışlarını önbellek stratejileriyle ele aldım; hata ve boş durum ekranları kurguladım. Kod kalitesini artırmak için TypeScript ile props tiplerini ve store dilimlerini açıkça tanımladım.

HairZoom

İlk profesyonel projem HairZoom: kullanıcılar saç stillerini önizleyebiliyor. Arayüz animasyonlarında GSAP kullandım; medya işleme tarafında ffmpeg tabanlı bir pipeline ile görsel ve klip üretimine yönelik denemeler yaptım. Next.js + TypeScript + Tailwind ile modern, performanslı ve responsive bir deneyim sundum.

Tanıtım sitesi ve uygulamanın görsel dili uyumlu olacak şekilde tasarlandı; SEO temel metaverileri, paylaşım görselleri ve yapılandırılmış veri ekledim. Sayfa geçişlerinde hafif mikro etkileşimlerle algılanan hız iyileştirildi.

Berber Tanıtım Sitesi

Berberler için hızlı açılış süresine sahip, SEO odaklı bir tanıtım sitesi şablonu hazırladım. SSR/SSG ile içeriklerin hızlı sunulmasını sağladım; sitemap ve canonical yapılandırmaları ekledim. Tipografi ve ikonografide farklı font kombinasyonları deneyerek okunabilirlik ve karakter kazandırdım.