Membangun Gamified Portfolio: Next.js & Neural Network

Sebagai developer, portfolio adalah lebih dari sekadar daftar proyek: ini alat untuk menceritakan proses, keputusan desain, dan nilai Anda sebagai pembuat.

Di artikel ini saya menjelaskan pendekatan yang saya gunakan untuk membangun sebuah "Gamified Portfolio": struktur teknis singkat, fitur utama (termasuk visualisasi graph), dan beberapa keputusan desain yang membuat pengalaman pengunjung lebih interaktif.

• Ringkasan (TL;DR)
• Teknologi & Arsitektur
• Implementasi utama (Graph, ResizeObserver, Interaksi)
• Cara menjalankan proyek secara lokal
• Kesimpulan

TL;DR

• Tujuan: membuat portfolio yang terasa seperti antarmuka Sci‑Fi, interaktif, dan membantu pembaca menemukan hubungan antar konten.
• Output: Next.js + Tailwind + MDX + React Force Graph, dengan UX yang mengutamakan visualisasi dan micro‑interaction.

Teknologi & Arsitektur

Ringkasan teknologi yang dipakai:

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS v4
• Animasi: Framer Motion
• Visualisasi: React Force Graph (Graph / Network View)
• Konten: MDX (Markdown + React)

Arsitektur singkat: konten ditulis di MDX, diproses oleh next-mdx-remote, dan dirender di halaman blog. Visualisasi graph dijalankan di client-side untuk menjaga performa server.

Implementasi utama

Visualisasi Graph

Graph memetakan artikel sebagai node dan menghubungkannya berdasarkan tag, referensi, atau kemiripan topik. Ini membuat pengunjung mudah menemukan konteks antar tulisan.

Menjaga grafik responsif

Untuk memastikan graph menyesuaikan ukuran saat container berubah, saya menggunakan ResizeObserver di komponen client yang merender canvas/graph. Contoh singkat (pada komponen React):

useEffect(() => {
  const resizeObserver = new ResizeObserver((entries) => {
    for (const entry of entries) {
      const { width, height } = entry.contentRect;
      if (width > 0 && height > 0) {
        setDimensions({ w: width, h: height });
      }
    }
  });

  if (containerRef.current) resizeObserver.observe(containerRef.current);

  return () => resizeObserver.disconnect();
}, []);

Penjelasan singkat: daftarkan observer pada elemen container (mis. div yang membungkus canvas). Saat ukuran berubah, setDimension akan memperbarui ukuran graph sehingga layout tetap rapi.

Interaksi & Visual Details

• 3D Tilt Cards: kartu proyek merespons posisi kursor dengan efek parallax dan glare.
• Micro‑animations: hover dan transition halus dengan Framer Motion.
• Easter eggs: kombinasi tombol (mis. Konami code) untuk menambahkan kejutan kecil.