Behind The Scene HiRahmat.Dev

Halo semuanya. Saya ingin memulai blog pertama saya dengan men-share proses saya dalam mengembangkan website pribadi ini.

Di tengah-tengah banyaknya orang yang pengen bisa bikin website supaya bisa kerja as a Web Developer (setidaknya di sekitar saya), tapi bingung mulai proyeknya dari mana. Website portfolio + blog pribadi itu bisa jadi ide pertama yang bagus buat nunjukkin personal kita ke khalayak umum, khususnya para HR — pastinya sambil apply cv kalian ya ke banyak company. Semoga tulisan ini membuat kalian termotivasi buat mulai berkarya juga, atau yang udah buat tapi belum beres, kalian mau beresinnya hehe.

Ide bikin website ini udah lama banget. Sejak awal saya nge-bootcamp, tepatnya 6 tahun yang lalu. Tapi entah kenapa gak mulai-mulai. Saya emang agak perfeksionis. Ya, itu kelemahan saya bisa dibilang.

Kenapa “perfeksionis” jadi kelemahan?

Karena jadi gak mulai-mulai haha. Tapi setelah pengalaman saya menjadi Frontend Developer dan kerja bareng tim lain selama kurang lebih 5 tahun ini, saya jadi berpikir, ternyata “yang penting beres” itu ada baiknya juga. Toh, nanti bisa saya iterasi atau perbaiki secara perlahan dan itu lebih meringankan beban buat tim lain daripada gak mulai sama sekali.

Dari situ, saya belajar untuk menurunkan perfeksionis saya, tapi bukan dihilangkan sama sekali. Sama kayak website ini, tulisan ini khususnya, jauh dari kata sempurna (ngomong-ngomong soal “sempurna”, sifatnya subjektif ya nggak?). Tapi nggak apa-apa, yang penting kan mulai dulu.

Tahap Perencanaan

Saya memulai website ini lewat figma. Yap, saya gak langsung coding, saya desain dulu.

Desain website saya banyak terinspirasi dari website-website berikut:

• https://gojek.com
• https://bijakmemantau.id

Saya suka yang rounded-rounded.

Kan ada AI? Kenapa desain dan coding-nya sekalian gak pakai AI?

Hm, kayaknya ini bagian dari perfeksionis saya. Menurut saya, AI masih belum bisa memuaskan standar dalam membuat website, khususnya desain — untuk saat ini setidaknya. Tapi tenang, saya nggak tertutup sama sekali dengan perkembangan AI, saya juga pakai kok, tapi yang sifatnya sebagai tools untuk perencanaan dan brainstorming. Tulisan ini pun saya minta bantuan AI untuk dibuatkan outline-nya, hehe.

Lalu setelah saya beres desain, baru saya coding.

Pakai Stack Teknologi Apa Saja?

Saya menggunakan NextJS 15 16 (App Router) + Notion sebagai CMS-nya. Konten-konten tulisan ini ditulis di notion pribadi. Setup-nya emang agak ribet ya, tapi saya suka ngerjainnya. Justru kalo terlalu mudah malah gampang bosen, ya nggak sih? (Nanti saya share juga dalam bentuk tulisan tentang cara menggunakan notion sebagai database. Stay tuned ok)

Kalian bisa liat repositori website ini di sini.

Berikut gambar yang menunujukkan setup Notion sebagai database articles saya (sekarang udah ada fitur baru di notion, namanya data source, jadi dalam satu database bisa banyak data source. Mirip kayak SQL kan? Satu database bisa banyak table. Dulu mana bisa tuh).

Bahkan, manajemen pengerjaannya saja saya pakai Notion dalam bentuk board supaya mudah nge-track tugas yang sedang berjalan dan ide baru apa saja buat ditambahin di website ini.

Semua yang berkaitan dengan konten dan manajemen tugas, pakai notion.

Ekspektasi saya ketika orang-orang mengunjungi website ini, ingin supaya mereka merasakan pengalaman yang menyenangkan dalam mengeksplorasi. Desain yang bersih, struktur yang rapih, hirarki tata letak dalam meng-engage mata para pembaca ke konten website diusahakan sengaja dibuat jelas. Serta, isi konten yang reflektif, jujur, dan apa adanya menurut saya adalah kunci untuk menciptakan kenyamanan tersebut dan betah untuk berlama-lama.

Karena bagi saya, memberi kesan yang nyaman sama pentingnya dengan membuat isi konten yang berkualitas.

Tantangan

Bagian yang menantang pertama adalah mencari inspirasi untuk gaya desain website ini. Maklum, secara profesional saya bukan desainer UI/UX, saya hanya menyukai desain visual secara umum. Jam terbang saya yang sangat sedikit dalam mendesain sudah pasti mempengaruhi kecepatan dalam mendesain sebuah website. Dulu, waktu di kampus pernah mendesain pamflet dan banner saja, itupun jarang.

Untuk copywriting, untungnya sekarang sudah ada AI Generative yang menurut saya sudah sangat bisa menggantikan tugas copywriter (dengan penyesuaian selera pastinya), jadi gak makin lama buat ngisi kontennya.

Bagian yang menantang kedua adalah integrasi Notion sebagai database. Lebih tepatnya bagian merender block-block Notion (block adalah istilah untuk isi konten pada halaman Notion) dari format notion api ke halaman rapi seperti ini. Sebenernya sudah ada beberapa library untuk mengatasi hal itu. Namun, sayangnya library-library tersebut tidak memakai Notion SDK Javascript Official, yang mana menurut saya agak kurang enak, malah bikin pusing dan merasa sulit mengontrol secara penuh, dan juga sulit mengkustomisasi style-nya.

Akhirnya saya memilih untuk integrasi manual. Kelebihannya, saya jadi lebih tau proses me-render struktur response dari Official Notion API. Serta, lebih merasa punya kontrol penuh terhadap block-block mana saja yang saya butuhkan dan saya mau kustomisasi. Kalau ada kesulitan dalam merender block, tinggal minta bantuan AI, hehe. Memang, kelemahannya adalah belum semua block notion bisa ke-render, tapi untuk sekarang sudah sangat cukup untuk kebutuhan blog ini. Ke depannya pun saya bakal terus perbarui block-block notion yang perlu dirender — sesuai kebutuhan.

Kalian bisa cek (dan bebas pakai) kode saya dalam merender block Notion.

Buat sekarang itu dulu. Bakal masih dilanjut kok..