Portofolio Zeroman
Portofolio pribadi yang dirancang untuk berfungsi sebagai alat akuisisi klien, bukan sekadar tampilan visual. Dibangun dengan Nuxt 3, TypeScript, dan animasi CSS kustom untuk mencapai skor Core Web Vitals terbaik sekaligus menyajikan konten bilingual dan format studi kasus terstruktur untuk setiap proyek.
// Tantangan Utama
- Kredibilitas Profesional: Tanpa dukungan brand perusahaan, kandidat individu sering kesulitan menyampaikan kompetensi teknis level enterprise kepada hiring manager.
- Arsitektur Konten: Konten bilingual (ID/EN) membutuhkan struktur data JSON yang skalabel dan mudah dikelola, bukan string yang hardcoded.
- Performa vs. Animasi: Animasi CSS yang kaya berisiko menurunkan skor Core Web Vitals (CLS, LCP) di perangkat mobile.
- SEO untuk Situs Portofolio: Halaman portofolio statis umumnya memiliki peringkat rendah karena konten tipis dan kurangnya data terstruktur.
// Pendekatan & Solusi
1. Format Studi Kasus Berbasis Kredibilitas
Setiap entri proyek menyertakan metrik dampak yang dikuantifikasi, alasan keputusan teknis, dan narasi tantangan-solusi untuk menunjukkan keahlian nyata, bukan sekadar daftar teknologi.
2. Arsitektur Data JSON Terpusat
Semua konten — teks bilingual, metadata proyek, skill, testimoni — disimpan dalam satu file portfolio.json, memungkinkan pembaruan konten instan tanpa menyentuh logika komponen Vue.
3. Animasi Teroptimasi untuk Performa
Semua animasi CSS menggunakan properti yang dipercepat GPU (transform, opacity) dan menghormati prefers-reduced-motion, memastikan nol dampak CLS dan kepatuhan aksesibilitas.
// Mengapa Tech Stack Ini?
| Teknologi | Alasan Pemilihan |
|---|---|
| Nuxt 3 | SSR + static generation memberikan HTML yang sepenuhnya dirender untuk setiap halaman proyek ke mesin pencari, krusial untuk sinyal E-E-A-T SEO dan First Contentful Paint yang cepat. |
| TypeScript | Pengetikan ketat pada skema data portofolio mencegah error runtime dan memastikan integritas konten di kedua varian bahasa. |
| Vanilla CSS + Custom Animations | Nol overhead framework. Setiap animasi dibuat secara manual dengan properti yang dipercepat GPU untuk mempertahankan performa 60fps tanpa mengimpor library animasi berat. |
// Hasil & Dampak Bisnis
- <2s - Waktu Muat Halaman (Konsisten di bawah 2 detik di mobile (Nuxt SSR + aset teroptimasi))
- 100% - Responsif Mobile (Layout sempurna di semua ukuran layar dari 320px hingga 4K)
- 2 - Bahasa yang Didukung (Pergantian bilingual EN/ID penuh tanpa reload halaman)
- 9 - Proyek yang Ditampilkan (Masing-masing dengan kedalaman studi kasus penuh: tantangan, solusi, dan dampak terukur)
// Galeri Proyek
