Opening: Portfolio Nggak Harus Mulai dari Nol
Sekarang bikin web portfolio udah nggak harus mulai dari file kosong sambil mikirin struktur dari awal. Dengan bantuan AI seperti Gemini, kita bisa langsung generate kerangka portfolio yang visual, interaktif, bahkan pakai efek 3D.
Artikel ini bukan bahas teori panjang atau konsep ribet. Kita bakal langsung praktik dari nol sampai jadi. Target akhirnya sederhana tapi powerful yaitu dengan 1 file index.html berisi Tailwind CSS, JavaScript, dan Three.js yang menampilkan web portfolio 3D.
Di artikel ini, kita bakal bikin web portfolio 3D dari nol cuma modal prompt ke Gemini.
Apa Itu Vibe Coding dengan AI?
Vibe coding adalah pendekatan ngoding di mana kamu mulai dari ide dan vibe, bukan dari baris kode kosong. Alih-alih langsung mikirin syntax, struktur folder, atau library dari awal, kamu cukup jelasin kebutuhan kamu pakai bahasa manusia: mau bikin apa, tampilannya kayak gimana, dan pengalaman user yang diharapkan. Dari situ, AI bantu menghasilkan kode awal sebagai fondasi.
Di workflow ini, peran developer justru jadi lebih strategis. Kamu nggak lagi habis waktu di boilerplate atau setup dasar, tapi fokus ke arah visual, flow UI, dan feel dari aplikasinya. Cocok banget buat bikin portfolio, landing page, atau MVP cepat—terutama kalau tujuannya eksplorasi ide dan validasi konsep. Penting digarisbawahi: AI bukan pengganti developer. AI itu co-pilot, kamu tetap yang pegang kontrol, milih mana yang dipakai, mana yang diperbaiki, dan mana yang dibuang.
Tools yang Dipakai
Di artikel ini, kita pakai stack yang simpel tapi hasilnya kelihatan keren:
Gemini AI untuk generate kode awal, Three.js buat efek 3D di browser, Tailwind CSS buat styling cepat dan modern, serta HTML + JavaScript dalam satu file supaya gampang dipahami. Editor-nya cukup VS Code dan browser favorit kamu.
STEP 1 — Buka Gemini & Siapkan Prompt
Pertama, kita perlu untuk buka gemini dan daftar atau login dengan email yang sudah ada. Setelah login kita akan masuk ke halaman utama gemini dan bersiap untuk memasukan promt. Di vibe coding, kualitas hasil sangat tergantung dari prompt. Jangan asal nanya. Kamu perlu jelasin dengan jelas apa yang kamu mau: struktur file, library yang dipakai, dan hasil akhirnya.
Di tahap ini, kita minta Gemini untuk bikin 1 file index.html yang sudah include CDN Tailwind dan Three.js, punya hero section, canvas 3D sebagai background, teks overlay portfolio, dan desain yang modern serta clean.
Prompt Lengkap (siap copy):
“Buatkan 1 file index.html lengkap menggunakan CDN Tailwind CSS dan Three.js. Web ini adalah portfolio developer dengan hero section fullscreen, background canvas 3D dari Three.js, teks overlay nama dan role, animasi 3D sederhana, desain modern dan clean. Semua kode HTML, CSS (Tailwind), dan JavaScript ada dalam satu file bangun dalam canvas.”
STEP 2 — Copy Kode ke VS Code
Setelah prompt kamu dikirim ke Gemini, boom—Gemini langsung ngasih satu file kode yang rapi, lengkap, dan siap jalan. Di tahap ini, tahan dulu godaan buat ngedit. Kita mau lihat dulu hasil mentahnya, biar kamu bisa benar-benar ngerasain kekuatan vibe coding: dari prompt langsung jadi website.
Sekarang tinggal praktik. Buat satu folder project di komputer kamu, lalu bikin file index.html. Copy seluruh kode yang dikasih Gemini, paste langsung ke file tersebut di VS Code, dan simpan. Nggak ada setup ribet, nggak ada install aneh-aneh. Dari sini, kita tinggal buka di browser dan lihat hasilnya hidup di layar—baru setelah itu kita mulai eksplor dan modifikasi.
STEP 3 — Jalankan Project di Browser
Sekarang saatnya lihat hasilnya.
Kamu bisa klik kanan file index.html lalu Open with Live Server, atau buka langsung file tersebut di browser. Kalau semua berjalan normal, kamu bakal langsung lihat tampilan portfolio dengan background 3D, animasi ringan dari Three.js, dan layout rapi berkat Tailwind.
Ini momen penting: dari satu prompt, portfolio 3D kamu sudah hidup.
STEP 4 — Memahami Struktur Kode
Kita nggak akan bedah teknis terlalu dalam, tapi penting buat tahu gambaran besarnya. Bagian HTML ngatur struktur halaman dan teks portfolio. Tailwind dipakai buat layout, spacing, warna, dan typography.
Sementara JavaScript di bagian bawah file bertugas inisialisasi Three.js: bikin scene, camera, object 3D, dan animation loop. Dari sini, kamu jadi tahu bagian mana yang bisa kamu utak-atik buat eksplorasi sendiri.
STEP 5 — Eksperimen Prompt
Ini bagian paling seru dari vibe coding. Kamu nggak harus ngedit kode manual dulu — cukup balik ke Gemini dan eksplor prompt lanjutan.
Contoh ide prompt:
Ganti warna dan bentuk object 3DTambah efek floating atau rotation lebih halusTambahin section About dan ProjectUbah vibe jadi futuristik atau minimalis
Setiap kali prompt diubah, copy hasilnya, refresh browser, dan lihat perbedaannya.
Kenapa Cara Ini Cocok untuk Portfolio?
Workflow ini cepat dan hasilnya langsung kelihatan beda dari portfolio biasa. Portfolio 3D bisa jadi talking point waktu interview atau sharing project.
Cocok buat mahasiswa, freelancer, atau frontend beginner yang pengen tampil beda tanpa harus ngoding dari nol berhari-hari.
Mini Tips: Kesalahan Umum Saat Main Three.js
Kalau baru pertama kali pakai Three.js, ada beberapa kesalahan umum yang sering kejadian dan bikin hasilnya terasa berat atau malah error tanpa sadar. Yang paling sering adalah lupa resize handler. Canvas 3D harus menyesuaikan ukuran layar, jadi pastikan camera dan renderer ikut di-update saat window di-resize, biar tampilan nggak gepeng atau kepotong.
Kesalahan lain adalah terlalu banyak object dan animasi di satu scene. Three.js itu powerful, tapi kalau kamu kebablasan nambah mesh, light, dan effect tanpa kontrol, performa bakal turun, apalagi di laptop spek pas-pasan. Mulai dari satu object sederhana dulu, pastikan animation loop jalan mulus, baru tambahin elemen pelan-pelan. Ingat, untuk portfolio: yang penting smooth dan enak dilihat, bukan paling kompleks.
Penutup: Sekarang Giliran Kamu
Portfolio nggak harus ribet. Yang penting punya cerita, visual yang kuat, dan nunjukin cara berpikir kamu sebagai developer. Dengan AI, kamu bisa lebih fokus ke kreativitas, bukan ke boilerplate.
Sekarang giliran kamu. Buka Gemini, copy prompt-nya, paste ke VS Code, dan mulai bikin web portfolio 3D versimu sendiri.
