Ubay Lahmudien – Kediri, 7 Februari 2026

Tujuan & Latar Belakang

Anda sudah tahu bahwa CV dan portofolio itu selalu berjalan beriringan. Seiring waktu, portofolio kita juga akan terus bertambah.

Sebagai seorang programmer, biasanya di awal belajar kita sering disuguhi tutorial membuat web sederhana. Lalu di akhir course, hampir selalu diminta membuat web portofolio yang berisi CV singkat dan kumpulan project.

Awalnya, saya sempat bertanya,

"Masih perlu nggak sih bikin web portofolio sendiri?"

Soalnya, kalau dilihat, LinkedIn itu sudah cukup lengkap. Data CV ada, portofolio bisa ditampilkan, bahkan bisa langsung dipakai untuk melamar kerja. Rasanya sudah cukup.

Tapi setelah berdiskusi dengan teman dan juga tanya jawab dengan ChatGPT, saya sadar kalau web portofolio itu bukan cuma soal dokumen lamaran. Web portofolio bisa jadi identitas kita. Ketika kita membuatnya sendiri, kesan jati diri kita lebih terasa.

Akhirnya saya sahut,

"Oke kalau begitu."

Sebenarnya, saya sudah pernah membuat web portofolio sejak awal terjun ke dunia coding, waktu masih ikut bootcamp. Tapi kalau dilihat sekarang, desainnya terasa kurang nyaman atau jelek menurut saya. Sulit dibaca, bikin capek mata, dan tampilannya terlalu kaku karena waktu itu saya tidak terlalu memperhatikan tema.

Dulu, fokus saya cuma satu: kelihatan keren.

Saya pakai banyak animasi, shadow yang berlebihan, warna-warna menyala, sampai efek glass yang terlalu ramai. Secara visual mungkin menarik, tapi pesan utamanya malah jadi tidak tersampaikan dengan baik.

Sekarang, dengan bertambahnya pengalaman dan ilmu yang saya dapat, satu kata untuk itu.

Rombak!!!

Kenapa?

Supaya lebih mudah dibaca, lebih nyaman dilihat, dan tujuan utamanya benar-benar sampai ke pembaca. Bukan sekadar pamer efek, tapi menunjukkan siapa saya dan apa yang bisa saya buat.

"Kenapa dirombak (⚆_⚆)? Diperbaiki saja kan bisa?"

Kalau Anda seorang programmer, pasti tahu rasanya melihat kode yang pernah dibuat di awal-awal belajar IT.

ಠ_ಠ

Begitulah rasanya.

Terlalu sakit.

Terlalu pedih.

Untuk dibaca.

Apalagi diperbaiki.

=D

Perancangan

Apa yang dibuat?

Tentu Web Porto.

Web yang bagaimana?

• Sederhana dan simpel.
• Jelas.
• Tidak rumit.

Kebutuhan pada web

• SEO Friendly.
• Mudah dibaca.

Konsep

Sebelumnya, hanya sekadar info.

Saya lebih suka dengan backend dibanding frontend.

Dalam sebuah pengembangan produk, desain produk adalah bentuk muka dari sebuah produknya nanti. Dari situlah kesan pertama akan muncul, apakah terlihat rapi atau tidak.

Namun tidak dengan saya.

Saya sangat frustrasi ketika harus membuat desain di Figma. Menurut saya, itu lebih susah ketimbang ngoding.

Jadinya saya hanya melihat referensi-referensi web milik orang-orang di Dribbble, Pinterest, dan lain-lain. Dari yang saya lihat, saya gabungkan konsepnya, saya olah, dan akhirnya terpikirkanlah sebuah keyword.

• Minimalist
• Flat
• PowerPoint

Ya, memang itu.

Minimalist = tidak terlalu ramai.

Flat = kesan profesional.

PowerPoint = tidak bertele-tele dan langsung ke inti.

Warna

Setelah mendapatkan konsep itu, saya mencari warna yang cocok dengan cara yang sama.

Di Pinterest punya banyak sekali postingan tentang palette warna.

Saya kombinasikan warna-warna yang didapat, lalu saya masukkan ke Coolors untuk melihat apakah perpaduannya cocok atau tidak.

Kalau cocok, tinggal convert ke format yang saya butuhkan. Mau CSS, Tailwind CSS, dan lain-lain, sudah tersedia.

Teknologi

Melihat saya butuh SEO Friendly, yang pertama terpikir adalah Server Side Rendering (SSR).

Tapi kalau harus membuat project vanilla (HTML, CSS, dan JavaScript)...

Ya... cukup malas.

Terlalu banyak repetitive code, sulit membuat berbasis component yang bisa dipakai berulang kali di halaman berbeda.

Akhirnya pilihan jatuh ke framework React, yaitu Next.js.

Kenapa?

Karena bisa SSR dan juga CSR.

Untuk framework CSS-nya, saya pakai Tailwind CSS.

"Kenapa bukan Bootstrap yang jauh lebih simpel?"

Karena saya tidak terbiasa dengan Bootstrap.

Atau lebih tepatnya...

Saya tidak bisa memakainya. (‾◡◝)

Dari awal memang saya sudah memakai Tailwind CSS. Jadi ketika mencoba Bootstrap, saya cukup pusing untuk mempelajarinya.

Kenapa begitu?

Maaf, saya tidak bisa membandingkan Tailwind CSS dan Bootstrap karena saya memang hampir tidak pernah menggunakan Bootstrap.

Penutup

Mungkin untuk saat ini begitu yang ingin saya bahas.

Nanti akan saya ceritakan lagi saat proses pembuatannya dimulai. Mungkin akan ada perubahan konsep seiring saya mengerjakan proyek.

Atau...

Mungkin juga bisa mangkrak karena tugas-tugas kampus.

aah...~~~~

Semoga saja saya sempat membuatnya.

Thanks.

Terima kasih.

Tambahan

Jangan lupa secangkir kopi hari ini! ☕