Zoro Portfolio adalah website portofolio interaktif yang dibuat untuk menampilkan karakter populer Roronoa Zoro dari anime One Piece. Proyek ini dibangun menggunakan HTML, CSS (Bootstrap), dan JavaScript untuk mendesain tampilan serta memberikan interaksi dinamis kepada pengguna. Website ini menampilkan informasi tentang Zoro, termasuk biografi singkat, keterampilan bertarung, serta berbagai fakta menarik tentang dirinya.
Website ini juga dioptimalkan untuk menampilkan layout yang responsif sehingga dapat diakses dengan baik di berbagai perangkat, baik desktop maupun mobile.
- Desain Responsif: Menggunakan Bootstrap untuk memastikan tampilan yang responsif dan optimal di berbagai ukuran layar.
- Profil Karakter: Menampilkan informasi mendalam tentang Roronoa Zoro, seperti latar belakang, kekuatan, dan prestasinya di dunia One Piece.
- Galeri Gambar: Galeri interaktif yang menampilkan gambar-gambar ikonik Zoro dari berbagai momen dalam cerita.
- Navigasi yang Mudah: Dengan menggunakan navbar Bootstrap, navigasi di website menjadi mudah dan intuitif.
- Efek Animasi dengan JavaScript: Menggunakan JavaScript untuk memberikan beberapa efek animasi interaktif pada elemen-elemen website.
- HTML5: Struktur halaman website.
- CSS3 (Bootstrap): Styling dan layout responsif.
- JavaScript: Memberikan interaktivitas seperti animasi dan efek hover.
- Bootstrap: Framework CSS untuk desain responsif yang cepat dan mudah.
Ikuti langkah-langkah berikut untuk menjalankan proyek ini secara lokal:
-
Clone repository ini:
git clone https://github.com/RusdyZain/Porto-Zoro.git cd Porto-Zoro
-
Buka file
index.html
: Setelah berhasil di-clone, buka fileindex.html
di browser Anda dengan mengklik dua kali pada file tersebut atau buka secara manual melalui browser:open index.html
Berikut adalah struktur direktori utama dari proyek ini:
.
├── index.html # Halaman utama portofolio Zoro
├── css/
│ └── style.css # File CSS kustom
├── js/
│ └── main.js # File JavaScript untuk efek interaktif
├── images/
│ └── ... # Folder berisi gambar-gambar Zoro
└── README.md # File dokumentasi proyek ini
- Header dan Navbar: Tampilan header menampilkan nama Roronoa Zoro dengan navigasi di bagian atas halaman.
- Biografi: Menyajikan ringkasan perjalanan hidup Zoro dari awal hingga saat ini.
- Keterampilan dan Kekuatan: Deskripsi tentang kemampuan bertarung Zoro, termasuk teknik tiga pedangnya yang legendaris.
- Galeri Gambar: Koleksi gambar yang diambil dari berbagai adegan penting Zoro di One Piece.
- Footer: Menampilkan tautan ke berbagai sumber referensi dan sosial media (jika diperlukan).
Jika Anda ingin berkontribusi untuk memperbaiki atau menambahkan fitur pada proyek ini, ikuti langkah berikut:
- Fork repository ini.
- Buat branch baru (
git checkout -b fitur-anda
). - Commit perubahan Anda (
git commit -m 'Menambahkan fitur baru'
). - Push branch ke GitHub (
git push origin fitur-anda
). - Ajukan pull request untuk review.
Anda dapat melihat demo website ini dengan mengakses file index.html
secara langsung di browser Anda atau menjalankan di server lokal.