Cara Membuat Website Portofolio Profesional Modern (Dark Mode, Animasi, Loading Bar) Tanpa Coding Ribet
Tutorial lengkap untuk pemula | Bisa diedit sendiri | Gratis 100%
• Source code lengkap bisa diambil dari https://xiagame.github.io/demo-portofolio (klik kanan -> save as atau lihat source)
• Website ini sudah memiliki fitur Dark Mode, Loading Bar, Scroll To Top, Animasi AOS, Navbar Glassmorphism.
• Tidak perlu menginstal apapun, cukup copy-paste kode HTML ke file index.html atau postingan blog (mode HTML).
• Jangan lupa ganti nama, foto, deskripsi, dan link sosial media dengan data Anda sendiri.
Demo Website Portofolio
Berikut adalah tampilan dari website yang akan Anda buat. Klik tombol di bawah untuk mengunjungi demo langsung.
Kunjungi Demo Langsung →
Dokumentasi Lengkap Website Portofolio
Dokumentasi ini akan membantu Anda memahami struktur, fitur, dan cara mengedit setiap bagian dari website portofolio.
Struktur File
Website ini hanya terdiri dari SATU file HTML (index.html). Semua style CSS dan JavaScript sudah berada di dalam file yang sama. Berikut struktur utamanya:
Fitur dan Cara Kerjanya
- Dark Mode: Tombol di navbar untuk mengaktifkan mode gelap. Preferensi tersimpan di local storage browser sehingga tidak hilang saat refresh.
- Loading Bar: Progress bar di bagian atas halaman yang bergerak sesuai posisi scroll.
- Scroll To Top: Tombol bulat di pojok kanan bawah yang muncul setelah scroll melewati 300px.
- Animasi AOS: Library Animate on Scroll memberikan efek fade, flip, zoom saat elemen masuk ke viewport.
- Navbar Glassmorphism: Background transparan dengan efek blur, border tipis, dan menyusut saat scroll.
- Responsive: Menggunakan Bootstrap 5 grid system, tampilan optimal di semua ukuran layar.
Panduan Mengedit Setiap Bagian
1. Mengganti Nama & Profesi
Cari kode berikut di dalam file HTML:
Ganti "Bima Sakti" dengan nama Anda, dan "Fullstack Creative" dengan profesi Anda.
2. Mengganti Foto Profil
Cari kode:
Ganti URL dengan link foto Anda sendiri. Bisa upload ke hosting gambar gratis seperti ImgBB, Postimages, atau Google Drive.
3. Mengedit Teks Tentang Saya
Cari section dengan id "tentang":
Ubah paragraf sesuai dengan latar belakang dan pengalaman Anda.
4. Mengedit Keahlian (Skills)
Setiap skill berada dalam card dengan class "card-skill":
Anda bisa copy-paste block ini untuk menambah skill baru. Ganti icon dengan class Bootstrap Icons (bi-*), judul, dan deskripsi.
5. Mengedit Pengalaman Kerja
Setiap pengalaman menggunakan class "timeline-item":
6. Mengedit Proyek
Proyek menggunakan class "card-project":
Ganti gambar, judul, deskripsi, dan teknologi yang digunakan.
7. Mengedit Kontak & Sosial Media
Cari di section "kontak":
Untuk sosial media, cari:
Ganti "#" dengan link profil GitHub, LinkedIn, Instagram, atau Twitter Anda.
8. Mengganti Warna Tema
Cari kode CSS di bagian :root (sekitar baris 20-35):
Ganti kode hex dengan warna solid favorit Anda. Contoh warna solid populer:
- Merah: #ef4444
- Hijau: #22c55e
- Biru Tua: #1e40af
- Ungu: #a855f7
- Oranye: #f97316
9. Footer & Credit
Jangan hapus baris credit pembuat:
Library yang Digunakan
| Library | Fungsi | CDN |
|---|---|---|
| Bootstrap 5 | Layout responsif, komponen UI | https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css |
| Bootstrap Icons | Ikon-ikon modern | https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css |
| AOS (Animate on Scroll) | Animasi saat scroll | https://unpkg.com/aos@2.3.1/dist/aos.css |
| Google Fonts (Inter) | Font modern | https://fonts.googleapis.com/css2?family=Inter:wght@300..800 |
Semua library diambil dari CDN, sehingga Anda tidak perlu mengunduh apapun. Pastikan koneksi internet aktif.
Struktur Warna per Section
Setiap section memiliki warna aksen berbeda untuk tampilan yang tidak monoton:
- Tentang Saya → Warna Ungu (secondary)
- Keahlian → Warna Hijau (success)
- Pengalaman → Warna Oranye (warning)
- Proyek → Warna Pink (accent)
- Kontak → Warna Biru (primary)
Langkah-Langkah Membuat Website Portofolio
Buka tautan https://xiagame.github.io/demo-portofolio. Klik kanan pada halaman, pilih View Page Source atau Save As. Salin semua kode HTML ke editor teks (Notepad, VS Code, atau editor online).
Buka file HTML dengan teks editor. Gunakan panduan dokumentasi di atas untuk mengganti setiap bagian (nama, foto, deskripsi, skill, pengalaman, proyek, kontak).
Simpan file sebagai index.html. Buka menggunakan browser (double klik). Pastikan semua fitur berjalan: Dark Mode, tombol scroll, animasi, dan tampilan responsif. Coba buka di HP atau gunakan mode developer browser (F12) untuk simulasi perangkat mobile.
Anda bisa memilih hosting gratis seperti Netlify, Vercel, GitHub Pages, atau menggunakan hosting berbayar untuk domain sendiri.
Rekomendasi Hosting Terbaik untuk Website Portofolio Anda
Panduan Khusus: Memasang di Blogspot (Blogger)
Anda juga bisa menjadikan halaman ini sebagai postingan atau halaman statis di Blogspot. Caranya:
- Buka Blogger Dashboard → Halaman → Buat Halaman Baru.
- Klik mode HTML (bukan Compose).
- Copy seluruh kode HTML dari
index.htmlyang sudah Anda edit. - Tempelkan ke editor HTML, lalu publikasikan.
- Pastikan tidak ada konflik CSS dengan template blog (kode di atas sudah aman karena menggunakan class spesifik
.tutorial-containerdan tidak mengubah elemen global).
Perbandingan Dengan Template Biasa
| Fitur | Template Ini | Template Biasa |
|---|---|---|
| Dark Mode | Ada + tersimpan | Jarang ada |
| Animasi Scroll | Ya (AOS) | Tidak atau manual |
| Loading Bar | Ya | Tidak |
| Responsif Mobile | Sempurna | Bervariasi |
| Mudah Diedit | Dokumentasi lengkap | Sulit dipahami |
Kesimpulan
Dengan mengikuti tutorial ini, Anda sudah berhasil memiliki website portofolio modern yang siap dibagikan ke klien, recruiter, atau teman-teman. Template ini bisa diedit kapan saja dan gratis selamanya. Jangan lupa untuk selalu mencantumkan sumber atau credit pembuat sesuai lisensi.
Jika ada kendala atau pertanyaan, silakan kunjungi webs3tools.blogspot.com untuk mendapatkan update dan tutorial tambahan.
Tutorial dibuat oleh webs3tools.blogspot.com | Source code original: xiagame.github.io/demo-portofolio | Referral Hostinger: YCXYADOMIJ0I
