Sebuah portofolio pribadi berkonsep Single-Page Application (SPA) dengan estetika Retro-Futuristik, terinspirasi dari antarmuka terminal komputer klasik, CRT monitor, dan nuansa cyberpunk.
Selamat datang di terminal portofolio saya. Initializing systems... Boot sequence complete.
Portofolio ini dirancang untuk menjadi lebih dari sekadar halaman statis. Tujuannya adalah untuk menyajikan profil, proyek, dan keahlian saya (Agung Pradana) dalam format yang unik, interaktif, dan berkesan. Setiap elemen, mulai dari animasi ketik hingga efek scanline, dirancang untuk menciptakan pengalaman pengguna yang imersif dan menyenangkan.
Proyek ini dibangun sepenuhnya dengan teknologi web fundamental tanpa menggunakan framework eksternal, menunjukkan penguasaan mendalam pada HTML5, CSS3, dan Vanilla JavaScript.
Proyek ini dilengkapi dengan berbagai fitur interaktif:
- Estetika Retro-Futuristik: Lengkap dengan efek CRT overlay, scanlines, dan skema warna neon yang terinspirasi dari terminal klasik.
- Navigasi SPA (Single-Page Application): Perpindahan antar halaman (Profile, Projects, dll.) terjadi secara instan tanpa perlu me-reload halaman.
- Animasi Dinamis:
- Efek ketik (typewriter) pada judul dan teks untuk nuansa terminal.
- Animasi on-scroll untuk bar keahlian (skill bars) yang akan terisi saat terlihat di layar.
- Galeri Proyek Interaktif:
- Fitur filter berdasarkan kategori (All, Web, Data).
- Fungsi pencarian real-time untuk menemukan proyek.
- Modal Pratinjau Proyek yang detail dengan galeri gambar (thumbnail) dan deskripsi lengkap.
- Galeri Sertifikat: Menampilkan sertifikat atau pencapaian dalam sebuah modal yang elegan.
- Formulir Kontak Fungsional: Terintegrasi langsung dengan WhatsApp, memudahkan perekrut atau klien untuk menghubungi.
- Sistem Audio: Dilengkapi dengan musik latar yang bisa di-toggle (play/pause) dan efek suara untuk interaksi pengguna.
- Easter Egg: Coba masukkan Konami Code (
↑ ↑ ↓ ↓ ← → ← → B A) untuk sebuah kejutan! - Desain Responsif: Tampilan yang dioptimalkan untuk berbagai ukuran layar, dari desktop hingga mobile.
- HTML5: Untuk struktur semantik konten.
- CSS3: Untuk styling dan semua efek visual, termasuk Custom Properties (Variables), Flexbox, Grid, dan Animations/Keyframes.
- Vanilla JavaScript (ES6+): Untuk semua logika, interaktivitas, manipulasi DOM, dan manajemen event tanpa ketergantungan pada library eksternal.
- Font Awesome: Untuk ikonografi.
Proyek ini tidak memerlukan proses instalasi atau server.
-
Clone atau Unduh Repository
git clone [https://github.com/iamberro/Portofolio.git](https://github.com/iamberro/Portofolio.git])
Atau cukup unduh file ZIP-nya.
-
Pastikan Semua File dalam Satu Folder Letakkan
index.html,styles.css,script.js, dan semua aset (gambar, audio) sesuai dengan struktur folder yang ada. -
Buka di Browser Cukup klik dua kali pada file
index.html. Portofolio akan langsung berjalan di browser default Anda.
Anda bisa dengan mudah mengadaptasi portofolio ini untuk kebutuhan Anda sendiri:
- Mengganti Teks: Buka
index.htmldan edit langsung konten teks seperti nama, bio, deskripsi proyek, dll. - Mengganti Warna: Buka
styles.css. Semua warna utama didefinisikan di bagian paling atas dalam blok:root. Anda bisa mengganti nilai variabel seperti--retro-greenatau--retro-purpleuntuk mengubah tema warna secara keseluruhan. - Mengganti Data Proyek: Buka
script.jsdan cari objekconst projects = {...}. Edit atau tambahkan data proyek Anda di sana dengan mengikuti format yang ada. - Mengganti Nomor WhatsApp: Di
script.js, cari fungsisendToWhatsApp()dan ganti nomor6282318221577dengan nomor Anda. - Mengganti Gambar & Aset: Ganti file gambar seperti
agung.png,profile.png, gambar proyek, dan sertifikat di dalam folder aset Anda.
Proyek ini dilisensikan di bawah Lisensi MIT.
