Kembali ke catatan
catatan

Membangun Portofolio ala Terminal

Catatan memilih metafora command-line untuk situs pribadi, dan apa yang diajarkan tentang desain antarmuka.

·diperbarui 19 Agu 2026·#essay#desain#terminal
const{Fragment:a,jsx:e,jsxs:n}=arguments[0];function _createMdxContent(i){const t={code:"code",p:"p",...i.components};return n(a,{children:[e(t.p,{children:"Mayoritas portofolio developer terlihat sama: hero, grid kartu proyek, form kontak. Boleh-boleh saja, tapi mudah dilupakan. Saat saya merancang ulang situs ini, saya ingin sesuatu yang menggambarkan cara berpikir saya lebih baik daripada sekadar daftar tautan."}),"\n",e(t.p,{children:"Terminal terasa sebagai metafora yang pas karena itulah antarmuka yang saya pakai setiap hari. Kalau kamu ingin tahu seperti apa pekerjaan saya, inilah rasanya. Selain itu, terminal memaksa disiplin tertentu — sebuah command line harus bisa ditemukan, bisa diprediksi, dan cepat, atau orang akan menyerah. Batasan inilah yang seharusnya diberlakukan desain antarmuka yang baik."}),"\n",n(t.p,{children:['Tradeoff-nya nyata. Estetika terminal bisa menolak pengunjung kasual yang tidak ingin belajar "tata bahasa" hanya untuk membaca satu paragraf. Itu sebabnya saya berusaha membuat jalur umum tetap mulus: ',e(t.code,{children:"help"})," mendaftar semua perintah, tab completion ada, dan setiap perintah punya default yang masuk akal. Kamu tidak butuh manual untuk berkeliling, tapi manual tetap tersedia kalau ingin mendalami."]}),"\n",e(t.p,{children:"Yang mengejutkan, metafora ini ikut membentuk isinya. Ketika permukaannya teks, tulisan menjadi lebih baik — setiap paragraf harus berharga karena tidak ada gambar untuk bersembunyi di belakangnya. Blog terasa beda, deskripsi proyek terasa beda, bahkan bio ikut menjadi lebih ringkas."}),"\n",e(t.p,{children:"Portofolio adalah tulisan sekaligus perangkat lunak. Memperlakukannya seperti alat — sesuatu dengan verba, nomina, dan tata bahasa kecil — membuat kedua sisi itu menjadi lebih baik."})]})}return{default:function(a={}){const{wrapper:n}=a.components||{};return n?e(n,{...a,children:e(_createMdxContent,{...a})}):_createMdxContent(a)}};