Proyek
Koleksi karya saya, dari eksperimen hingga aplikasi produksi.
2025
Proyek AI Chatbot Widget menantang kami untuk menciptakan antarmuka yang cantik (menggunakan Vue.js dan Tailwind) dan fungsional di mana pun ia dipasang. Dalam blog ini, saya akan membedah dua pilar teknis utama: bagaimana kami mencapai Isolasi DOM total agar widget tidak bentrok dengan style CSS website target, dan mekanisme injection script yang efisien untuk deployment yang mulus di berbagai website eksternal.
Vue 3Inertia 2.0Tailwind CSS 4 +2
Lihat Studi Kasus 
2025
Kami mengubah website portofolio menjadi pengalaman desktop macOS yang radikal! Dalam proyek unik ini, kami menggunakan Nuxt.js dan Tailwind CSS untuk membangun window interaktif, desktop icon untuk setiap proyek, dan yang paling menarik, komponen macOS Dock kustom dengan animasi hover yang seamless. Pelajari bagaimana kami berkolaborasi dengan content creator dan menggunakan Sanity CMS untuk menciptakan portofolio yang benar-benar berbeda dari yang lain, di-deploy dengan mulus melalui Vercel.
Nuxt 4Tailwind CSS 4Sanity CMS +1
Lihat Studi Kasus 
2025
Membangun modul Conversation with AI untuk sistem RAG yang kompleks memerlukan harmoni antara desain dan arsitektur. Kami menggunakan Inertia Vue, Tailwind, dan Flowbite untuk UI yang intuitif, serta Pinia untuk state management yang reaktif. Saya akan menjelaskan bagaimana implementasi Service Layer berbasis TypeScript tidak hanya memastikan integrasi API yang mulus dengan backend, tetapi juga membuat modul ini reusable dan siap untuk skalabilitas produk yang masif.
Vue 3Inertia 2.0Tailwind CSS 4 +3
Lihat Studi Kasus 
2025
Ini adalah kisah proyek pribadi pertama saya—sebuah Landing Page untuk platform Coach Virtual AI (menggunakan Nuxt.js dan Tailwind)—yang dibangun hampir sepenuhnya dengan bantuan Agent AI. Saya akan membagikan bagaimana AI mengambil peran vital, dari brainstorming identitas brand dan copywriter hingga perancangan design system. Pelajari peran krusial saya sebagai developer dalam melakukan review teknis, fine-tuning hasil kode, dan mengoptimalkan prompting untuk menciptakan kolaborasi AI yang paling efektif.
Nuxt 4Tailwind CSS 4Github Copilot +2
Lihat Studi Kasus 
2024
Saya akan membagikan perjalanan intens saya sebagai solo fullstack developer yang membangun Platform Undangan Digital SaaS yang ambisius. Dari landing page hingga dashboard app yang kompleks, saya menangani semuanya—termasuk perancangan database, integrasi Midtrans sebagai payment gateway, dan deployment menggunakan Nuxt 3, Tailwind CSS, dan Express.js. Proyek ini adalah studi kasus tentang bagaimana menguasai teknologi fullstack dan deployment yang advance untuk meluncurkan produk end-to-end.
Nuxt 3Tailwind CSS 3Express JS +4
Lihat Studi Kasus 
2024
Dalam proyek ambisius HRIS SaaS dengan fitur unggulan AI KPI Generator, saya memimpin tim frontend kecil untuk mencapai "Perfect Pixel" menggunakan design system kustom (Inertia Vue & TypeScript). Selain memastikan UX optimal dan integrasi API yang solid via Service Layer, fokus utama saya adalah manajemen codebase. Saya akan berbagi bagaimana protokol Semantic Versioning yang kami terapkan tidak hanya memudahkan developer dalam rollback dan dokumentasi, tetapi juga menjadi alat komunikasi penting yang menyelaraskan tim teknis dengan Product Manager dan Director.
Vue 3Inertia 2.0Tailwind CSS +3
Lihat Studi Kasus 
2023
Sebagai Technical Lead, saya akan membagikan bagaimana tim kecil kami membangun sistem ticketing end-to-end untuk Balalaguan Music Festival. Proyek ini memberikan kemudahan akses tiket online bagi penonton dan dashboard monitoring penjualan real-time bagi panitia, termasuk fitur redeeming tiket menggunakan QR Code. Pelajari bagaimana kami memanfaatkan Laravel 9 dan Livewire untuk delivery fitur yang cepat dan andal, serta peran penting komunikasi dalam kolaborasi dengan Event Organizer.
Laravel 9LivewireBootstrap CSS
Lihat Studi Kasus 
2023
Proyek Landing Page Muay Thai Revolution adalah upaya kami menghadirkan keindahan dan kekuatan Muay Thai ke masyarakat Indonesia melalui platform digital yang interaktif. Menggunakan Vue.js dan Tailwind CSS, kami fokus membangun presentasi visual yang powerful dan narasi inspiratif dari atlet-atlet berprestasi. Pelajari bagaimana kami menggunakan tech stack modern untuk menciptakan website yang tidak hanya informatif, tetapi juga memotivasi generasi muda untuk mengembangkan bakat mereka di dunia Muay Thai.
Vue 3Tailwind CSS 3Animate On Scroll +3
Lihat Studi Kasus 
2022
Selama magang MSIB, saya terlibat dalam tim untuk membangun sistem Electronic Voting yang dapat mengakomodir berbagai event pemilu sekolah secara bersamaan dalam satu platform. Dengan fokus pada slicing UI yang pixel-perfect, kami menggunakan Laravel 9, Laravel UI, dan Bootstrap CSS (dengan template Mazer) untuk menciptakan solusi yang efisien. Proyek ini memecahkan masalah logistik pemilu, memberikan kemudahan besar bagi panitia di lingkungan SMP/SMA.
Laravel 9Laravel UIBootstrap CSS +1
Lihat Studi Kasus 
2022
Selama magang MSIB di Yayasan Hasnur Centre, saya berkesempatan untuk bergabung didalam tim teknis GuruInovatif.id, tugas saya adalah membangun Portal Bantuan (Help Center) yang berfungsi sebagai sumber daya utama bagi tenaga pendidik. Kami menggunakan Laravel, Livewire, dan Tailwind CSS untuk menciptakan website dengan fungsionalitas pencarian yang responsif. Saya akan membahas bagaimana peran slicing UI yang saya lakukan memastikan kemudahan akses informasi, mendukung efisiensi layanan, dan memfokuskan guru pada pengembangan profesional mereka.
Laravel 9LivewireTailwind CSS 3 +2
Lihat Studi Kasus 
2022
Saya akan berbagi tentang proyek kolaborasi NFT yang unik: Bekantan Hamox NFT. Landing page ini adalah perpaduan antara isu kelestarian Bekantan di Borneo, estetika budaya Banjar, dan narasi fiktif yang mendalam (Wasaka Town & Andaira Village). Pelajari bagaimana kami membangun website yang mampu menonjolkan aset 3D dan mengalirkan lore kompleks ini secara seamless, menjembatani konservasi lingkungan dengan dunia Metaverse.
Vue 3Tailwind CSS 3Google Fonts +2
Lihat Studi Kasus 
2022
Saya akan membagikan perjalanan proyek pribadi yang sukses meraih Juara 3 dalam kompetisi web design nasional: pembangunan Landing Page untuk platform Crowdfunding. Menggunakan Vue.js dan Tailwind CSS, proyek ini bertujuan menghubungkan startup dan UKM dengan investor patungan. Saya akan mengulas strategi desain yang digunakan untuk menyajikan konsep bisnis yang kompleks secara persuasif dan visual yang menarik, memastikan landing page ini high-converting dan layak memenangkan penghargaan.
Vue 3Tailwind CSS 3Animate On Scroll +2
Lihat Studi Kasus