FashiNEach adalah sebuah minimalist fashion landing page yang menggabungkan estetika teknologi modern dengan gaya ikonik dari anime Bleach. Proyek ini dirancang untuk memberikan pengalaman editorial fashion yang bersih, mentah, dan penuh jiwa melalui animasi presisi tinggi dan tata letak yang asimetris namun terkendali.
- Cinematic Hero Section: Latar belakang video imersif dengan efek partikel "Soul" yang merespons pergerakan kursor.
- Interactive Product Orbit: Galeri katalog produk yang melayang secara artistik dan responsif (Archive Section).
- Soul Manifesto: Narasi brand yang elegan dengan tipografi campuran high-fashion (Bodoni Moda & Tenor Sans).
- Full Page Snap Scrolling: Sistem navigasi yang mengunci setiap section secara presisi untuk pengalaman "Locked-In".
- Professional Animations: Koreografi animasi entry yang halus menggunakan Intersection Observer dan Framer Motion.
- Mobile First Optimization: Tata letak yang dirombak total untuk perangkat mobile guna menjaga kemewahan visual di layar kecil.
Project ini menggunakan berbagai aset visual sebagai bentuk apresiasi terhadap karya aslinya:
- Inspirasi Gaya: Karakter dan kostum dari anime Bleach (Karya Tite Kubo / Studio Pierrot).
- Video Background: Potongan cinematic Ichigo Kurosaki dari seri Bleach.
- GIF Soul: Koleksi momen ikonik Bleach yang digunakan untuk memperkuat atmosfer spirit-dust.
- Tipografi:
- Bodoni Moda: Digunakan untuk logo dan penekanan artistik.
- Tenor Sans: Digunakan untuk judul editorial.
- Space Grotesk & Inter: Digunakan untuk elemen teknis dan teks tubuh.
Ikuti langkah-langkah di bawah ini untuk menjalankan proyek secara lokal:
- Clone Repositori:
git clone https://github.com/USERNAME-KAMU/FashiNEach.git - Masuk ke Direktori:
cd FashiNEach - Instalasi Dependensi:
npm install
Untuk melihat tampilan website di komputermu:
- Jalankan perintah:
npm run dev - Buka browser dan akses link yang muncul (biasanya
http://localhost:5173). - Setiap perubahan kode akan langsung terlihat secara real-time (Hot Module Replacement).
Kamu bisa mengubah detail produk dan narasi di dalam file utama:
- Buka File:
src/App.jsx. - Cari Teks/Gambar:
- Ubah isi array
collectionuntuk mengganti gambar produk. - Ubah teks di dalam section
Souluntuk mengganti manifesto brand.
- Ubah isi array
- Simpan & Cek: Tekan Ctrl + S dan lihat hasilnya di browser.
- Video Hero: Simpan file video kamu di
public/ichigo.mp4. - Gambar Produk: Simpan di folder
public/dengan nama sepertiBX1 (1).png. - GIF Soul: Simpan koleksi GIF di
public/assets/dengan format penamaanbleach gif (1).gif.
├── public/ # Aset Statis (Video, Gambar, Icons)
├── src/
│ ├── App.jsx # Logika Utama, Komponen, & Animasi
│ ├── index.css # Konfigurasi Tailwind & Global Styles
│ └── main.jsx # Entry Point React
├── package.json # Dependensi & Scripts
└── README.md # Dokumentasi Panduan
Release The Soul. Bleach The System.