Skip to content

bintangyow/FashiNEach

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

⛩️ FashiNEach Minimalist Fashion Landing Page

Minimalist Fashion x Spirit Dust Repository

React Vite Tailwind CSS Framer Motion


📖 Deskripsi

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.


✨ Fitur Utama

  • 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.

🎨 Kredit & Aset

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.

🚀 Panduan Penggunaan

Ikuti langkah-langkah di bawah ini untuk menjalankan proyek secara lokal:

1. Persiapan Proyek

  • Clone Repositori: git clone https://github.com/USERNAME-KAMU/FashiNEach.git
  • Masuk ke Direktori: cd FashiNEach
  • Instalasi Dependensi: npm install

2. Menjalankan Mode Pengembangan

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).

3. Kustomisasi Konten

Kamu bisa mengubah detail produk dan narasi di dalam file utama:

  1. Buka File: src/App.jsx.
  2. Cari Teks/Gambar:
    • Ubah isi array collection untuk mengganti gambar produk.
    • Ubah teks di dalam section Soul untuk mengganti manifesto brand.
  3. Simpan & Cek: Tekan Ctrl + S dan lihat hasilnya di browser.

4. Struktur Aset

  • Video Hero: Simpan file video kamu di public/ichigo.mp4.
  • Gambar Produk: Simpan di folder public/ dengan nama seperti BX1 (1).png.
  • GIF Soul: Simpan koleksi GIF di public/assets/ dengan format penamaan bleach gif (1).gif.

📂 Struktur File

├── 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.

About

A minimalist fashion landing page inspired by the aesthetic of the anime Bleach, featuring interactive product orbits and a soul-infused narrative. Built with React, Vite, and Framer Motion.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors