Full transcript
0:00Kalau lu buka Instagram gua, klik follow
0:02dan buka Linkin bio, lu bakal lihat
0:04portofolio website set cantik ini yang
0:06gua bikin pakai AI tanpa coding sama
0:08sekali. Tonton sampai habis video ini
0:10karena gua bakal ajarin kalian gimana
0:11sih cara bikin portfolio website dengan
0:13mudah dan cepat cuma dengan nge-prom.
0:15Dari pakai AI apa cara nge-promnya
0:17sampai bisa live dan diklik teman kalian
0:19di link on bio kayak gini. Gua bikin ini
0:21jadi tiga step. Yang pertama kumpulin
0:23referensi desain yang bagus. Yang kedua,
0:25the actual building dari prompting
0:27sampai nentuin apa aja yang perlu ada di
0:28portfolio website lu. Lalu yang ketiga
0:30adalah cara publish-nya biar website lu
0:32bisa live. Ini cocok buat siapapun, mau
0:34grafik desain, editor, copywriter,
0:36maupun creator yang enggak ngerti coding
0:37tapi pengin punya website sendiri biar
0:39stand out. Ini video buat lu. Jadi
0:40langsung aja kita mulai. Pertama-tama
0:42pakai tool AI apa? Nah, ada banyak
0:45sekali pilihan ya sebenarnya dan yang
0:46menurut gua paling gampang dipakai dan
0:48bisa cepat itu adalah replit. Kenapa?
0:49Nanti gua bakal tunjukin ya, karena
0:51sebenarnya bisa aja kalian pakai
0:52subscription AI yang kalian punya
0:54seperti Claou atau chat GPT. Tapi buat
0:56pakai model mereka yang jago coding
0:57seperti JPT Codex atau cloud Code itu
0:59butuh setup yang lebih panjang karena
1:00kita perlu setup interface lagi sebagai
1:02wadah kita untuk ngechat sama AI-nya.
1:04Sedangkan kalau kalian pakai AI kayak
1:06Repit gini, ini udah all inone dari
1:08interface set-nya terus bisa langsung
1:09lihat preview-nya sampai publishing-nya
1:11juga udah disediain build-in. Jadi lu
1:13bisa tinggal fokus ke the actual
1:15building process. But it's your call.
1:17Kalian mau pakai cara yang mana
1:18terserah. Karena once you set up
1:19interface-nya sebenarnya sama-sama aja
1:20ya, sama-sama ngechat sama AI-nya. Jadi
1:22kalian bisa ikutin video ini regardless
1:24AI apapun yang kalian pakai. Untuk video
1:26ini gua akan pakai yang paling bagus
1:27untuk pemula yaitu repit. Step satu kita
1:29harus cari dulu inspirasi desain. Karena
1:31kalau kalian nge-prom dari nol sampai
1:33jadi, itu bakal lama banget. Nah,
1:35nyarinya di mana? Lu bisa nyari di
1:36Google kayak portfolio web design. Terus
1:38lu scrollsroll di Google image atau
1:40lihat postingan orang di drible Figma
1:42dan Behend juga bisa. Ini part yang
1:44bakal makan waktu paling lama. Gua
1:45sendiri pun bisa spend waktu berjam-jam
1:47di proses ini. Tapi justru ini step
1:48paling penting karena kita jadi punya
1:50tujuan mau bikin kayak gimana dan AI
1:52kita nanti juga jadi punya konteks mesti
1:53ngerjain apa. Dan ini rahasia yang gak
1:55banyak orang tahu. Ada yang namanya
1:57website prom code template. Nah, prom
2:00code itu apa? Nih gua kasih contoh. Ini
2:02contoh kalau kita bikin tanpa prom code.
2:04Jadi cuma screenshot doang kayak biasa.
2:08Dan ini kalau kita pakai template prom
2:09code.
2:17Jadi kalau enggak pakai A lu bakal cuma
2:19ngira-ngira dari gambar screenshot-an
2:20lu. Tapi kalau pakai prom code kayak
2:22gini EI-nya bakal langsung ngerti gimana
2:24struktur web dan sampai bisa ngerti ada
2:26animasinya kayak gini. Dan juga ini udah
2:28responsive desain ya dari desktop maupun
2:29mobile view. Kalau lu mau prom code-nya,
2:31lu bisa download kumpulan prom code
2:32layout website keren-keren yang udah gua
2:33curate. Jadi cek aja linknya di
2:35deskripsi. Oke, jadi langsung aja kita
2:36buka replicit.com.
2:39Nah, gua sih sukanya desain template
2:41yang ini ya. Jadi kita paste prom
2:42code-nya. Kita biarin dia kerja sebentar
2:45ya. Dan ini hasilnya. Kita langsung
2:47dapat a very good starting point untuk
2:49kita mulai prompting lebih lanjut.
2:50Lumayan save waktu kita biar kita enggak
2:52perlu terlalu mikir dari nol mesti ada
2:54apa aja di website kita ya. Jadi untuk
2:55bikin portfolio website ada empat
2:57komponen utama yaitu hero, portfolio,
2:59about me, dan contact. Nah, di dalam ini
3:02ada apa aja? Yuk ikutin sampai habis.
3:04Nah, pertama kita edit dulu bagian hero
3:06section. Ini adalah apa yang orang lihat
3:08pertama kali ketika buka portfolio
3:10website lu. Jadi, idealnya kita ngasih
3:11tahu who we are and what we do di sini.
3:14Nah, ganti dulu sesuai nama
3:15masing-masing. Contoh misalnya di sini
3:17gua pakai nama Budi Anto. Nah, ini
3:19tinggal kalian prom dan EI-nya bakal
3:20langsung kerjain. Ini kita save ini dulu
3:22buat poin pertama. Terus buat poin kedua
3:24kita bakal modif subheing-nya yaitu what
3:27we do. Let's say currently marketing at
3:30Unilever turning consumer inside into
3:32campaign that actually sell. Terus di
3:34teks bawahnya di sini bisa buat
3:35teman-teman ngasih tahu tentang diri
3:36kalian. Contohnya karena si Budi ini
3:38marketing, bisa aja gua bikin kayak a
3:40lifelong learner, passionate about
3:41consumer behavior and how people buy
3:43things. By the way, ini enggak sama
3:44persis ya, sama template-nya. Misal yang
3:46angka-angka ini kalian mau remove terus
3:48kayaknya lebih bagus jadi tombol call
3:49action ini juga boleh. Nah, di sini gua
3:50minta replit ganti. Gua screenshot dulu
3:53terus gua paste ke chat-nya dan bilang
3:55change the section into CTI button.
3:57Contact me dan view my word. Terus kita
3:59enter. Dan hero section kita udah jadi.
4:01Kalau mau ganti fotonya juga bisa.
4:02Tinggal drag and drop foto kalian kayak
4:04gini, terus bilang, "Change the hero
4:06picture with this picture." Dan replicit
4:08langsung gantian otomatis. Terus di
4:09bawah hero gua juga pengen ganti ini
4:11sebagai YouTube video. Biasanya kalau
4:12teman-teman videografer editor punya
4:14show reel, nah kalian bisa prom kayak
4:16gini, change the section to this video.
4:18Terus kita copy emb code dari YouTube
4:20dan kita paste ke repit kayak gini. Dan
4:22porto show reel gua langsung ada di
4:24sini. Kita lanjut ke komponen kedua
4:26yaitu portfolio. Di sini bagusnya adalah
4:28kita tunjukin kerjaan-kerjaan kita yang
4:29paling bagus-bagus aja. Terutama yang
4:31paling bagus kita taruh di awal jadi
4:33section paling gede kayak gini. Let's
4:35say kita mau taruh gambar ini ya. Kita
4:37tinggal copy paste kayak biasa. Terus
4:38prom change the main featured work with
4:40this. Kita juga bisa tambahin dalam
4:42kurung kayak image one biar AI-nya
4:44ngerti lagi ngomongin image yang mana
4:46yang kita kasih dia. Begitu juga dengan
4:48bawah-bawahnya. Kasih tahu image 2, 3,
4:49dan 4 ditaruh di mana aja. Dan kalian
4:51bisa lihat repliit lakuin ini dengan
4:53sempurna. Di sini ada animasi hover
4:54mouse terus view case tadi. Nah, kalian
4:56juga bisa bikin page baru di web yang
4:58sama. Jadi ini bukan cuma landing page
5:00nanti, tapi bisa jadi full website juga.
5:02Contohnya seperti website gua sendiri.
5:04Ini bisa terdiri dari banyak page atau
5:06kalau mau simpel kalian juga bisa
5:07langsung link ke YouTube atau link
5:09Google Drive portfolio kalian. Terus ke
5:11komponen ketiga yaitu about me. Di
5:13template ini tulisannya masih service.
5:15Ini cocok kalau kalian freelance. Tapi
5:16kalau kalian enggak punya service
5:17freelance, kalian bisa minta remove aja.
5:20Nah, inilah yang paling penting untuk
5:21apply kerjaan dan bikin orang kenal
5:23kita. Yaitu penjelasan lebih lengkap
5:25tentang siapa kita dan experience kita.
5:27Di sini sebenarnya bisa sebebas-bebasnya
5:28ya mau ekspresiin diri kayak gimana,
5:30tapi buat ide, kalian bisa pause video
5:32ini untuk template copywriting about me
5:34yang bagus. Contohnya di sini gua pakai
5:35template nomor . Jadi langsung aja gua
5:37paste dan gua minta dia kerjain. Di
5:40bagian experience banyak sekali orang
5:42membuat kesalahan dalam membuat
5:43strukturnya. Untuk experience pengalaman
5:45yang paling baru itu harus ada di paling
5:47atas karena ini struktur yang paling
5:49bagus untuk orang baca. Sama kayak
5:51Linkin pun juga kasih tunjuk paling atas
5:53dulu kan dari pengalaman terakhir kita.
5:54Buat bagian experience, kalau kalian
5:56udah punya Linkin atau CV dan udah
5:58pernah ngisi bikin copywriting kayak
5:59gini, triknya adalah kalian bisa
6:00screenshot aja terus paste ke AI kalian
6:03kayak gini. Gua coba screenshot linkin
6:04gua terus gua paste ke repit dan gua
6:06prom kayak gini. This is my experience.
6:08Map it out on the experience section
6:09based on this only the copywriting. Do
6:12not change the layout or design. AI-nya
6:14bakal ngerti kok maksud kalian apa. Dan
6:15kita bisa lihat di sini dan kita biarin
6:17rapid kerjain dan hasilnya persis kayak
6:19yang gua mau. Komponen terakhir adalah
6:21contact section. di sini teman-teman
6:23kalau bisa bikin diri lu segampang
6:25mungkin untuk dirich out sama brand,
6:26perusahaan, klien, atau HRD. Sebagai
6:29saran, orang Indo tuh sukanya langsung
6:31WhatsApp karena bisa cepat ya. Jadi
6:33kalian bisa create WA link terus masukin
6:35nomor kalian biar orang enggak bingung.
6:37Kalian bisa juga bikin kayak gini web,
6:39HBD dan sebagainya sebagai placeholder
6:41message. Di sini biasanya gua taruh web
6:43supaya gua tahu orang yang chat gua tuh
6:45datang dari mana sebagai tracking
6:47simple. Terus kita tinggal pencet create
6:48link. Terus gua paste linknya ke repit
6:50dan minta dia ganti button ini jadi
6:52WhatsApp button with WhatsApp icon on
6:53the left dengan tex WhatsApp me. Jadi
6:56deh button-nya dan kita bisa tes
6:57langsung kebuka ke WhatsApp kita.
6:59Setelah gua benar-benerin lagi dengan
7:01beberapa prom dan inilah hasil yang gua
7:03dapat. Overall gua suka banget ya
7:04hasilnya karena gua punya pengalaman
7:06yang sangat baik dengan repit dalam vi
7:07coding karena agent-nya selalu nangkap
7:09aja gitu apa yang gua mau dan gua notice
7:11tuh dia jarang halusinasi kayak app F
7:13Code lain yang gua pernah cobain. Tapi
7:14jangan senang dulu sampai sini karena
7:16kita akan ke bagian yang paling
7:17pentingnya yaitu bikin website kita live
7:19dan bisa diklik orang. Setelah website
7:21lu jadi dan lu udah capek nge-prom,
7:23saatnya kita bikin website kita live.
7:24Nah, ada beberapa cara untuk melakukan
7:26ini. Dimulai dari yang pertama adalah
7:28yang paling gampang, yaitu menggunakan
7:29build-in feature dari repit. Jadi kalau
7:31di replit kita bisa tinggal klik publish
7:33di sini dan replit bakal deploy ini
7:35secara otomatis. Kita juga bisa tinggal
7:37custom icon-nya, title website-nya atau
7:39kalau mau connect domain sendiri kayak
7:40www.giaudi.com
7:42itu juga bisa. Tapi kalau AI kalian
7:43enggak ada kayak gini, tenang aja kita
7:45ke cara kedua. Yang kedua, kalau AI lu
7:47enggak ada fitur publish buildin kayak
7:49gini, lu bisa export semua code-nya dulu
7:51sebagai zip, terus upload ke tempat
7:52hosting seperti hostinger atau versel.
7:54Tapi biasanya website yang dibikin EA
7:56itu pakai framework seperti Notgs,
7:58nextgs atau Fight. Setahu gua di
8:00Hosinger tuh harus pilih yang paket
8:01bisnis baru support. Jadi lebih enak
8:03coba deploy diversel atau ada
8:05workout-nya. Bisa juga minta AI lu
8:07convert dulu ke static HTML. Jadi
8:09tinggal lu export code-nya. Kalau di
8:11hostinger create new website pilih
8:13custom PHP HTML. Buka file manager dan
8:15upload zip lu ke dalam folder dan
8:17ekstrak semua isinya. Terus pindahin
8:19semua file-nya ke public HTML dan kita
8:21bisa langsung buka website-nya udah
8:23live. Yang ketiga ini kalau mau pakai
8:25Versel. Nah, teman-teman harus bikin
8:27akun Github dulu karena Versel cuma bisa
8:29deploy dari repo GitHub. Ini cara yang
8:30lebih advance tapi kalau misalnya ngerti
8:33sebenarnya ini udah cukup straight
8:34forward. Terutama untuk lu yang memilih
8:36pakai setup IDE plus AI pasti lu udah
8:38lebih canggih ya kalau lu pakai cara
8:39ini. Jadi gua yakin udah ngerti. Jadi
8:41teman-teman tinggal connect repoguplu ke
8:42versel dan deploy. Jadi ya inilah kenapa
8:45di awal gua tadi bilang lebih enak pakai
8:48repit karena buat kebanyakan orang bakal
8:49jauh lebih confident dan cepat. Tinggal
8:51klik publish dan selesai. Jadi itu dia
8:53cara bikin portfolio website supaya lu
8:54bisa stand out di mata brand dan
8:56menunjukkan karya-karya lu. Terutama
8:57linkin bio lu jadi bisa unik dari yang
8:59lain. Selain bisa kita custom sendiri
9:01dan jadi unik, keuntungannya bikin
9:02website sendiri adalah kita bisa owning
9:04data trafficnya karena kita bisa
9:05nge-track visitor dan siapa aja yang
9:06klik website kita kan. Terus kita bisa
9:08pakai data ini untuk optimize meta adsge
9:10seperti retargeting bikin look aludience
9:12dan lain-lain. Kita bisa lihat ya
9:13seberapa powerful AI sekarang bisa bikin
9:15website dari nol sampai jadi dengan
9:16sangat mudah kayak gini. Tapi
9:18teman-teman jangan salah paham ya karena
9:19enggak ada yang bilang ini enggak butuh
9:21skill. tetap butuh skill seperti taste
9:22design, ngerti layout website, isinya
9:24apa. Tapi dengan adanya EA ini sudah
9:26sangat memudahkan di proses eksekusinya.
9:28Contohnya kayak teman gue ini, dia bikin
9:30website B Soul. Ini teman gua bisa loh
9:32bikin ini sendiri dengan cara vi coding
9:34juga. Dan website-nya beneran running as
9:35a fully functional online store buat
9:37bisnisnya sendiri dan orang pakai untuk
9:38transaksi beneran juga di website-nya.
9:40Teman-teman bisa komen di bawah kalau
9:41merasa ada yang perlu dikoreksi atau
9:43kurang dari video ini supaya teman-teman
9:45yang lain bisa sama-sama belajar juga.
9:46Kalau lu mau coba repit, linknya udah
9:47gua taruh di deskripsi. Check out my
9:49timelist juga supaya lu bisa hemat
9:50waktu. Subscribe kalau membantu dan see
9:52you in the next