Di Balik Layar Kuro Sapa: Membangun Portofolio Jamstack yang Cepat dan Estetik
Setiap developer atau desainer pasti pernah mengalami fase di mana mereka merombak ulang situs portofolio mereka berkali-kali. Bagi saya, "Kuro Sapa" bukanlah sekadar tempat untuk menaruh tautan proyek, melainkan sebuah eksperimen untuk menggabungkan performa tinggi, desain antarmuka, dan kemudahan pengelolaan konten.
Dalam artikel pertama ini, saya ingin membagikan bagaimana situs ini dibangun dari nol hingga menjadi platform glassmorphism yang dinamis.
Mengapa Memilih Arsitektur Jamstack?
Sebagai seseorang yang tertarik pada Full-Stack Web Development dan Cyber Security, saya menginginkan fondasi situs yang sangat cepat dan aman dari berbagai celah kerentanan server tradisional. Oleh karena itu, saya memilih pendekatan Jamstack (JavaScript, APIs, dan Markup).
Situs ini dibangun menggunakan Eleventy (11ty) sebagai Static Site Generator (SSG). Eleventy memungkinkan saya untuk merender halaman HTML pada saat proses build, sehingga ketika pengunjung membuka web, tidak ada proses query database yang memberatkan. Hasilnya? Waktu muat (load time) yang instan.
Desain "Luminous Blur" dan Glassmorphism
Jika Anda menjelajahi beranda atau halaman portofolio, Anda akan menyadari adanya efek gelembung warna-warni yang menyatu (fluid blobs) di latar belakang.
- Efek WebGL & CSS: Untuk halaman tertentu, saya mengimplementasikan algoritma Metaballs menggunakan WebGL yang dirender ke dalam elemen
<canvas>. Sementara di bagian lain, saya menggunakan utilitasmix-blend-modedanblurekstrem dari Tailwind CSS. - Glassmorphism: Agar teks dan kartu konten tetap terbaca jelas di atas latar belakang yang ramai, saya menggunakan efek kaca buram (frosted glass) dengan properti
backdrop-filter.
Pengelolaan Konten yang Bebas Ribet
Situs statis seringkali memiliki kendala "sulit di-update" karena harus mengubah kode secara manual. Untuk mengatasi hal ini, saya mengintegrasikan Decap CMS (sebelumnya Netlify CMS).
Dengan CMS berbasis Git ini, saya memiliki panel admin yang ramah pengguna. Setiap kali saya menambahkan proyek baru di Portofolio, memperbarui daftar Skills, atau menulis artikel Blog seperti ini, CMS akan secara otomatis membuat commit ke repositori GitHub dan memicu proses deploy ulang.