Bagi seorang desainer profesional, situs portofolio berada di posisi tengah yang canggung. Situs tersebut harus terlihat tajam, dimuat secara instan, dan tetap mutakhir tanpa menyita jam kerja yang dapat ditagihkan. Setup lama saya menggunakan Webflow, yang menjembatani celah antara builder drag-and-drop dan hasil profesional dengan lebih baik daripada kebanyakan alat lainnya. Namun, ketika pemberitahuan perpanjangan datang dengan tagihan tahunan sebesar £300, saya harus mengajukan pertanyaan sulit: apakah saya membayar untuk nilai, atau sekadar kenyamanan?

Saya memutuskan untuk membangun ulang dari nol. Stack barunya adalah Astro dan Sanity. Setelah menggunakannya selama beberapa waktu, inilah penjelasan tepat mengenai apa yang berhasil, apa yang tidak, dan di mana posisinya dibandingkan dengan alat-alat yang saya gunakan sebelumnya.

Mengapa Astro untuk portofolio?

Kebanyakan framework web modern mengirimkan JavaScript terlebih dahulu dan baru memikirkan hal lainnya kemudian. Astro membalikkan asumsi tersebut. Astro menghasilkan HTML statis biasa pada saat build time dan hanya mengirimkan JavaScript ke browser ketika komponen tertentu benar-benar membutuhkannya. Mereka menyebut ini islands architecture, tetapi hasil praktisnya lebih sederhana: halaman portofolio saya hampir tidak memiliki bobot.

Routing berbasis file, jadi membuat halaman baru terasa semudah memasukkan file ke dalam folder. Komponen menggunakan sintaks yang akan terasa akrab jika Anda pernah menyentuh React, Vue, atau Svelte. Saya tidak perlu mempelajari paradigma baru setiap kali ingin menambahkan studi kasus proyek.

Meski begitu, saya tidak akan menggunakan Astro untuk membangun aplikasi web yang kompleks. Jika Anda sedang menghubungkan autentikasi, mengelola global state, atau menangani data real-time, Anda akan kesulitan dengan framework ini. Namun, untuk situs pemasaran, blog, dan portofolio, Astro tidak akan menghalangi Anda. Halamannya terasa cepat karena memang cepat. Tidak ada overhead hidrasi yang menunggu untuk merender headline atau paragraf.

Beralih dari WordPress ke Sanity

Sebelum pembangunan ulang ini, pilihan cadangan saya selalu WordPress dengan Advanced Custom Fields. ACF memberikan kekuatan super pada WordPress, tetapi Anda tetap saja sedang mengonfigurasi "rumah" milik orang lain. Sanity bekerja dengan cara sebaliknya. Anda menulis skema dalam kode yang menentukan secara tepat bagaimana model konten Anda terlihat, dan Sanity membangun antarmuka pengeditan di sekitar keputusan Anda tersebut.

Saya menggunakan kontrol tersebut untuk membangun page builder sederhana dari blok-blok yang dapat digunakan kembali. Saya mendefinisikan hero section satu kali. Saya mendefinisikan testimonial carousel satu kali. Saya mendefinisikan card grid satu kali. Sekarang saya dapat menyusun halaman baru dengan menumpuk blok-blok tersebut dalam urutan apa pun tanpa menulis kode baru atau menyentuh template halaman.

Perbedaan pola pikir ini sangat penting. Dengan WordPress, saya sering merasa seperti sedang bergulat dengan alat yang ingin menjadi sebuah blog. Dengan Sanity, saya merasa seperti sedang membangun perangkat lunak. Konten menjadi data terstruktur yang bersih, bukan HTML bergaya yang bercampur dengan shortcode. Deskripsi proyek saya hidup sebagai objek portabel yang bisa saya masukkan ke dalam aplikasi seluler atau newsletter jika saya mau.

Alur kerja deployment yang tetap bersih

Alur kerja WordPress lama saya berantakan dengan unggahan FTP, subdomain staging, dan pembaruan plugin yang selalu tampak rusak di saat yang paling tidak tepat. Saya harus menyimpan daftar periksa mental hanya untuk memublikasikan perbaikan salah ketik.

Alur kerja yang baru sangat singkat:

  • Saya melakukan perubahan secara lokal dan melihatnya secara instan.
  • Saya melakukan commit ke GitHub saat kode sudah terasa benar.
  • Vercel mengambil push tersebut dan men-deploy situs secara otomatis.

Tidak ada klien FTP. Tidak ada database staging untuk disinkronkan. Repositori adalah sumber kebenaran (source of truth).

Konten bekerja dengan cara yang sama. Ketika saya memublikasikan atau memperbarui postingan di dalam Sanity, sebuah webhook memberi tahu Vercel untuk membangun ulang situs. Halaman statis dibuat ulang dengan konten segar, dan CDN diperbarui tanpa saya harus menyentuh server. Semuanya tetap sinkron tanpa perlu menyalin secara manual, mengekspor, atau berdoa agar migrasi database plugin benar-benar berhasil.

Menyatukan desain dan kode dengan token

Salah satu terobosan yang tidak terlalu mencolok dalam pembangunan ulang ini adalah menyiapkan sistem token yang tepat. Saya menyimpan satu file JSON tunggal yang memegang setiap warna, skala tipografi, dan nilai spacing di situs tersebut. File itu adalah bosnya.

Saya menggunakan Token Studio untuk menarik nilai-nilai yang sama tersebut langsung ke Figma. Ketika file desain saya menyebutkan surface-default, ia merujuk pada angka yang sama persis dengan yang digunakan oleh kode. Sebuah skrip kecil mengubah JSON tersebut menjadi CSS custom properties pada saat build time, sehingga stylesheet saya merujuk pada variabel seperti --color-surface-default alih-alih kode hex yang ditulis langsung (hardcoded).

Inilah mengapa hal itu penting dalam praktiknya. Jika saya menyadari warna merah brand saya sedikit terlalu agresif di layar seluler, saya cukup mengubah satu nilai di file JSON. Library Figma diperbarui. CSS diperbarui. Setiap instansi di seluruh situs diperbarui. Saya tidak perlu melakukan grep