Cara Membuat Website Portofolio dengan AI

Sebelum membuka builder, tuliskan cakupan minimum. Sebagian besar portofolio pribadi tidak membutuhkan banyak halaman, tetapi tetap membutuhkan konten yang jelas.

Struktur umum yang sering dipakai adalah:

• Beranda dengan nama, peran, intro singkat, dan beberapa proyek unggulan
• Halaman proyek atau bagian proyek dengan screenshot, ringkasan, tools yang digunakan, dan hasil
• Halaman About dengan latar belakang, keahlian, dan gaya kerja
• Bagian kontak dengan email, tautan sosial, dan opsional formulir

Tentukan juga siapa target situsnya:

• Hiring manager yang ingin melihat bukti kerja dengan cepat
• Klien yang mengecek apakah Anda cocok dengan jenis proyek mereka
• Kolaborator yang ingin melihat proses dan selera Anda

Lalu daftar konten yang sudah Anda miliki:

• Judul proyek
• 1–3 screenshot per proyek
• Deskripsi singkat
• Tautan ke karya live atau GitHub
• Bio dan foto profil

Jika ini dilakukan di awal, AI akan punya konteks yang cukup untuk membangun sesuatu yang berguna pada percobaan pertama, alih-alih memberi template generik.

Di Moremade, Anda mendeskripsikan situs dalam bahasa yang sederhana. Agen AI menulis source code, memberi Anda preview live, dan Anda bisa terus mengubahnya lewat chat.

Prompt pertama Anda sebaiknya mencakup:

• Jenis portofolionya
• Halaman atau bagian yang dibutuhkan
• Konten yang harus dimasukkan
• Arah visual
• Detail fungsional, seperti formulir kontak atau tautan

Buat tetap spesifik. Jika Anda hanya berkata "buatkan saya portofolio," Anda akan menghabiskan lebih banyak waktu untuk mengoreksi hasilnya.

Contoh prompt pertama:

Build a personal portfolio website for a freelance product designer named Maya Chen. Use a clean, minimal layout with strong typography, muted colors, and generous spacing. Create a home page with a short hero intro, featured projects, an about section, testimonials placeholder, and a contact section. Add a projects page with 4 case study cards. Each project should show title, one-line summary, tools used, and a button for more details. Include navigation, footer, mobile-friendly layout, and a contact form. Use React and Tailwind style conventions and make the site feel professional rather than flashy.

Untuk portofolio yang sederhana, minta halaman inti dan layout default yang masuk akal terlebih dahulu. Anda bisa menyempurnakan detail visual setelah melihat preview.

Setelah versi pertama dibuat, periksa live preview dengan teliti. Fokus dulu pada struktur konten, lalu pada polishing visual.

Periksa hal-hal berikut:

• Apakah hierarki jelas pada layar pertama?
• Apakah proyek mudah dipindai?
• Apakah bagian about terasa cukup personal?
• Apakah tombol, jarak, dan ukuran teks konsisten?
• Apakah ada teks filler yang sebaiknya diganti?

Moremade memungkinkan Anda mengubah banyak hal lewat chat, dan juga memiliki visual inspector sehingga Anda bisa menunjuk elemen lalu mengeditnya. Gunakan prompt lanjutan yang singkat dan fokus pada satu masalah setiap kali.

Tiga contoh yang berguna:

• "Kurangi tinggi hero section, pindahkan featured projects lebih ke atas, dan buat teks intro lebih ringkas."
• "Ubah kartu proyek menjadi pratinjau studi kasus dengan thumbnail di atas, tag tools, dan satu baris hasil di bawah ringkasan."
• "Gunakan palet warna netral yang lebih hangat, tingkatkan kontras body text, dan buat tombol formulir kontak full width hanya di mobile."

Tahap ini biasanya lebih cepat jika Anda tidak meminta redesign total kecuali strukturnya memang jelas salah.

Banyak portofolio tidak memerlukan database, login, atau pembayaran. Menjaga versi pertama tetap sederhana membuatnya lebih mudah diselesaikan.

Gunakan Supabase hanya jika portofolio membutuhkan fitur seperti:

• Formulir kontak yang menyimpan submission
• Konten yang dilindungi dengan sign-in
• Setup kecil seperti CMS untuk memperbarui entri proyek dari data

Gunakan Stripe hanya jika portofolio juga menjual sesuatu, seperti:

• Template desain berbayar
• Sesi konsultasi
• Unduhan digital

Moremade punya konektor bawaan untuk Supabase dan Stripe, bersama penyedia email seperti Resend dan SendGrid. Jika Anda menambahkan salah satunya, tuliskan kebutuhannya dengan jelas.

Contohnya:

• "Hubungkan formulir kontak ke Supabase agar submission disimpan dengan nama, email, dan pesan."
• "Tambahkan halaman checkout Stripe untuk sesi review portofolio 60 menit dengan harga yang saya atur."

Jika tujuan Anda hanya meluncurkan situs pribadi profesional, lewati integrasi ini kecuali memang menyelesaikan kebutuhan nyata.

Portofolio sering kali pertama kali dilihat di ponsel, terutama dari tautan di email atau profil sosial. Masalah mobile adalah salah satu cara termudah membuat karya bagus terlihat ceroboh.

Di preview, periksa:

• Perilaku menu navigasi
• Pembungkusan teks hero
• Jarak antar kartu proyek
• Pemotongan gambar
• Ukuran tombol dan target sentuh
• Jarak antar field formulir kontak
• Keterbacaan tautan di footer

Minta perbaikan yang spesifik, bukan sekadar berkata "buat mobile lebih baik."

Contoh:

• "Di layar di bawah lebar mobile, susun konten hero secara vertikal dan kecilkan ukuran headline satu tingkat."
• "Buat semua thumbnail proyek memiliki aspect ratio yang sama dan hentikan caption agar tidak turun sampai tiga baris di ponsel."
• "Tambahkan padding sisi di bagian kontak dan buat tombol submit lebih mudah disentuh di layar kecil."

Moremade juga menyediakan code view, yang berguna jika Anda ingin melihat secara tepat apa yang berubah di kode React dan Tailwind.

Saat situs sudah terlihat tepat, publikasikan. Moremade dapat mempublikasikan dalam satu klik ke subdomain gratis yourname.moremade.ai. Pada paket berbayar, Anda bisa menghubungkan custom domain. Domain juga bisa dibeli langsung di dalam Moremade.

Urutan peluncuran yang praktis adalah:

• Publikasikan dulu ke subdomain gratis
• Buka situs live di desktop dan ponsel
• Perbaiki sisa masalah konten atau spacing
• Hubungkan custom domain jika Anda memakai paket berbayar

Moremade membangun kode React + Tailwind yang nyata untuk website. Anda bisa mengekspor source code lengkap sebagai ZIP kapan saja atau mengirimnya ke GitHub. Itu penting untuk portofolio, karena Anda mungkin ingin menghostingnya di tempat lain nanti, memberikannya ke developer, atau terus mengembangkannya di luar platform.

Jika Anda memperkirakan akan sering mengubah situs, version history pada paket berbayar berguna untuk membandingkan dan membatalkan edit.

Kegagalan utama biasanya bukan teknis. Yang sering terjadi adalah meluncurkan portofolio yang terlihat selesai tetapi hampir tidak menjelaskan apa pun.

Waspadai masalah umum berikut:

• Terlalu banyak section di home page tanpa prioritas yang jelas
• Ringkasan proyek yang samar dan tidak pernah menjelaskan apa yang Anda kerjakan
• Prompt visual generik yang menghasilkan tampilan seperti template
• Menambahkan fitur Stripe, sign-in, atau database tanpa use case nyata
• Melewatkan review mobile
• Mempublikasikan placeholder text, stock image, atau halaman studi kasus kosong

Portofolio yang bagus biasanya melakukan beberapa hal sederhana dengan baik:

• Menjelaskan siapa Anda dan jenis pekerjaan apa yang Anda lakukan
• Menampilkan proyek pilihan, bukan semuanya
• Memberi detail yang cukup untuk menilai cara berpikir Anda
• Memudahkan orang menghubungi Anda

Gunakan AI untuk mencapai draft yang kuat dengan cepat, lalu habiskan waktu Anda untuk memperbaiki substansi kontennya.