Project Case Study
Portfolio Web with Live Developer Signals
Portfolio pribadi berbasis Next.js yang menggabungkan data statis dan live metrics (GitHub + WakaTime) untuk membangun personal branding yang tetap cepat dan SEO-friendly.
Full-stack Developer
2 minggu
2026
Problem
Portfolio konvensional sering cepat usang dan tidak menunjukkan aktivitas nyata. Tujuannya adalah membuat portfolio yang tetap personal, real-time, dan mudah diperbarui tanpa overhead tinggi.
Solution
Saya membangun arsitektur hybrid: halaman utama statis untuk performa, lalu komponen tertentu melakukan fetch periodik ke API route internal untuk data GitHub/WakaTime. Konten blog dikelola melalui Sanity agar publishing flow tetap nyaman.
Impact
- - UI terasa hidup berkat update aktivitas berkala tanpa full page reload
- - Struktur SEO lebih kuat dengan sitemap, robots, dan metadata terpusat
- - Workflow konten lebih cepat karena draft/publish dipisahkan lewat Sanity
Architecture
- - Next.js App Router untuk rendering dan routing
- - API routes sebagai adaptor ke GitHub dan WakaTime
- - Client polling terkendali untuk data aktivitas real-time
- - Sanity sebagai headless CMS untuk artikel blog
Tech Stack
Next.jsTypeScriptTailwind CSSSanityVercel
Key Lessons
- - Pisahkan data kritikal SEO (statis) dan data volatil (dinamis)
- - Gunakan fallback UI yang jelas saat API rate limit
- - Desain komponen modular memudahkan eksperimen fitur baru