Bu proje, Yıldız Teknik Üniversitesi Müzik Kulübü (YTÜMK) tarafından düzenlenen "Yıldızlar Yarışıyor '24" etkinliği için SkyLab - WebLab ekibi tarafından geliştirilmiştir. Uygulama, katılımcılara ödül kategorileri, jüri üyeleri ve sponsorlar hakkında bilgi sunar. Ayrıca bir katılım formu sayfası içerir.
- ReactJS ve Tailwind CSS kullanılarak geliştirildi.
- Açık/Koyu mod desteği.
- Bölümlere yumuşak kaydırma ve yönlendirme.
- "Katılım Formu" için ayrı bir sayfa.
- Modern ve kullanıcı dostu arayüz.
src/
├── components/
│ ├── sections/
│ │ ├── Hero.js # Ana sayfa giriş bölümü
│ │ ├── CategorySection.js # Ödül kategorileri bölümü
│ │ ├── JurySection.js # Jüri üyeleri bölümü
│ │ ├── SponsorSection.js # Sponsorlar bölümü
│ ├── Footer.js # Sayfa alt bölümü
│ ├── Header.js # Sayfa üst navigasyonu (Navbar)
├── images/ # Görseller ve ikonlar
│ ├── cross.png # Sponsor logosu
│ ├── discord.png # Discord ikonu
│ ├── ing.png # İngilizce bayrak ikonu
│ ├── insta.png # Instagram ikonu
│ ├── konusmaci.png # Jüri placeholder görseli
│ ├── linkedin.png # LinkedIn ikonu
│ ├── mod-gece.png # Koyu mod ikonu
│ ├── mod-gunduz.png # Açık mod ikonu
│ ├── turk.png # Türkçe bayrak ikonu
│ ├── x.png # X (Twitter) ikonu
│ ├── ytumklogo.png # YTÜMK logo
├── pages/
│ ├── Form.js # Katılım formu sayfası
│ ├── Home.js # Ana sayfa bileşeni
├── App.js # Ana uygulama dosyası
├── index.css # Ana CSS konfigürasyonu
-
Hero (Giriş Bölümü)
- Uygulamanın ilk ekranında etkinlik hakkında kısa bilgi ve görsel yer alır.
-
Kategori Bölümü
- "Beste Kategorisi" ve "Cover Kategorisi" gibi ödül kategorilerini içerir.
- Bireysel ve grup performans alt kategorileri tanıtılır.
-
Jüri Bölümü
- Jüri üyelerinin placeholder görselleri ve isimleri listelenir.
-
Sponsorlar Bölümü
- Ana sponsor ve diğer sponsorların logoları görüntülenir.
-
Katılım Formu Sayfası
- Kullanıcıların etkinliğe katılmak için bilgilerini doldurabileceği bir form içerir.
- ReactJS: Kullanıcı arayüzü için.
- Tailwind CSS: Hızlı ve özelleştirilebilir CSS framework.
- React Router: Sayfa yönlendirme için.
- JavaScript (ES6): Dinamik işlevler için.
git clone https://github.com/skylab-kulubu/yildizlar-yarisiyor.git cd Yildizlar-Yarisiyor
npm install
npm start
Tarayıcınızda http://localhost:3000 adresini açarak uygulamayı görüntüleyebilirsiniz.
- Açık/Koyu Mod: Kullanıcılar mod arasında geçiş yapabilir.
- Bölümlere Yumuşak Kaydırma: Ana sayfadaki bölümlere tıklayarak yumuşak geçiş yapılır.
- Katılım Formu: "Katılım Formu" düğmesine tıklayarak form sayfasına yönlendirilirsiniz.