Yusril Muttaqien
Tentang
Halo! Yusril di sini. Seorang pengembang berfokus di pemgembangan antarmuka. Bermulai sebagai pengembang backend dengan Node.js dan Java. Namun seiring berjalannya waktu, beralih sebagai pengembang antarmuka dengan React.js didorong oleh ketertarikan dengan web desain. Dalam perjalan sebagai pengembang antarmuka, situs ini dibuat untuk mendokumentasi, berbagi eksplorasi dan solusi yang digunakan. Untuk saat ini, pengembangan antarmuka kreatif adalah fokus utama sembari mencari dan bergabung dengan komunitas untuk berkontribusi, belajar, dan memberi dampak positif.
Teknologi
Berikut adalah kumpulan teknologi & pustaka yang telah dipakai untuk menciptakan solusi
Animasi & transisi
Autentikasi
Bahasa pemrograman
Basis data & penyimpanan
Dasar antarmuka
Infrastruktur
Kerangka pengembangan
Manajemen & pembuatan konten
Manajemen state
Pemanggilan API
Pengujian
Perutean
Pustaka web
Sumber material
Tata visual
personal
Aktif • Animasi & transisi
Canvases
Mendalami tentang animasi di web, Canvases dibuat sebagai tempat untuk menyimpan dan menunjukkan proses pendalamana. Hal ini mencakup animasi web dan tata letak menggunakan GSAP, Three.js, HTML5 Canvas, dan transisi halaman menggunakan CSS3 didukung oleh Vue3 Transition dan dibuat menggunakan Nuxt.js.
personal
Des 2024 - Feb 2025 • Pengembangan web
yusrmuttaqien
Seiring bertambahnya rencana dan eksplorasi, yusrmuttaqien dibuat untuk mendokumentasikan perjalanan sebagai pengembang antarmuka dan menjadi bagian dari eksplorasi tersebut. yusrmuttaqien telah melewati beberapa versi dengan eksplorasi yang berbeda. Versi sebelumnya adalah eksplorasi animasi mikro dengan Motion, dan versi saat ini adalah eksplorasi penggunaan CMS dengan PayloadCMS dan teknologi pendukungnya. Untuk setiap versi baru, implementasi dari eksplorasi versi sebelumnya akan diterapkan kembali secara unik.
perusahaan
Des 2024 • Pengembangan web
Job Posting
Job posting menampilkan daftar lowongan pekerjaan palsu yang diambil dari API eksternal menggunakan Next.js RSC dan TanStack Query untuk gaya muat infinity scroll. Auth.js digunakan untuk memfasilitasi mekanisme login dengan penyedia seperti OAuth dan Facebook login. Projek ini pula menjadi pengenalan awal dalam pemformatan struktur data artikel sebelum berlanjut pada CMS.
kerja lepas
Agu 2024 • Sebagian web
BRI slider
BRI slider adalah projek sampingan membantu membangun sebagian situs utama Bank Rakyat Indonesia dengan membuat komponen slider hanya dengan framer-motion (sekarang motion), komponen ini menampilkan antarmuka kartu yang terbagi berdasarkan kategori, responsif di segala ukuran layar, dan dapat berinteraksi dengan kursor maupun layar sentuh.
perusahaan
Agu 2024 • Pengembangan web
Zamrood landingpage
Zamrood landingpage adalah projek slicing dari desain Pandooin secara pixel-perfect dan responsif. Ditambah dengan implementasi elemen interaktif seperti baris gambar dengan gulir otomatis dan lightbox untuk memperbesar gambar.
perusahaan
Agu 2024 • Pengembangan web
Cek Ongkir
Cek Ongkir memanfaatkan API dari RajaOngkir untuk mendapatkan data terkait ongkos kirim antar wilayah di Indonesia. Dengan Next.js + RSC, memastikan data lokasi tersedia langsung saat situs termuat. Kombinasikan dengan LocalStorage untuk menyimpan histori pencarian.
personal
Des 2023 - Feb 2024 • Pengembangan web
Dashboard
Sebuah situs atau aplikasi diperuntukkan eksplorasi beberapa teknik. Beberapanya yaitu visualisasi data dengan SVG, interaksi antarmuka pesan, area input drag-n-drop, tata letak bento, dan portal dengan kemampuan saling tumpuk. Teknik-teknik tersebut dikemas menjadi sebuah projek to-do list sederhana.
Telkom Indonesia
Jul 2021 - Feb 2024 • Pengembangan web
Agreeculture
Sebagai startup yang bergerak di industri agrikultur, Agreeculture membantu proses digitalisasi di Indonesia dengan membangun platform untuk para penggiat agrikultur. Disini saya melakukan design slicing untuk laman utama, membangun dasbor untuk ekosistem utama, dan merealisasikan fitur untuk user seperti Agreepedia dan Traceability. Menggunakan Next.js dengan Golang untuk membangun seluruh antarmuka beserta dengan solusi CMS kustom.
perusahaan
Jul 2023 - Agu 2023 • Pengembangan web
Find Movies
Menggunakan API dari TheMovieDB, Find Movies menampilkan daftar film dan serial TV yang sedang tren atau direkomendasikan. Menggunakan TanStack Query dan axios untuk melakukan pemanggilan API dan pencarian. Projek ini adalah bagian dari eksplorasi melakukan unit test menggunakan Vitest.
Kontak
Ingin menciptakan sesuatu atau membutuhkan solusi di web? Punya ide? Mari kita diskusikan dan wujudkan bersama!
Alat
Berikut adalah alat yang digunakan dalam bereksplorasi atau membuat solusi
