Yusril Muttaqien
About
Hi! I’m Yusril. A software engineer, expertise in frontend engineer. Started as a backend dev before 2021 working with Javascript, notably Node.js and Java. But, my journey led me to frontend land with React.js. My newly founded interest in design at time pushes me even further to develop a website as the design intended, for the web. As the journey continues, I thrive in creating more impacful websites and webapps which requires more knowledge and problem solving. Demanding me to keep learning about the web. To document my journey, I created this website. It’s quite recent, but I’m looking forward to keep sharing my exploration and solution that helps me in this journey. Now, I’m still continue learning advanced topics about creative frontend development while seeking and looking forward to join a community where i can contribute, learn, and make positive differences.
Stacks
Here's library & technology I've explored and create solutions with
API call
Animation & transition
Authentication
Content management & creation
Database & storage
Framework
Interface bootstrap
Platform
Programming language
Resources
Routing
State management
Styling
Testing
Web library
personal
Active • Animation & transition
Canvases
Pursue deeper into world of web animation, I've created Canvases as a place to put and showcase my learning. This includes web animation and layout animation using GSAP, Three.js, HTML5 Canvas, and page transition using plain CSS powered by Vue3 Transition and built upon Nuxt.js.
personal
Dec 2024 - Feb 2025 • Web development
yusrmuttaqien
As plans and exploration grows, yusrmuttaqien created to document my journey as a frontend engineer and as a part of the journey itself. yusrmuttaqien has going through many version with each has different exploration. The last version is exploration about microanimation using Motion, and this one is about CMS implementation using PayloadCMS and its supporting technologies. As each version created, it will at some point carry out its predecessor exploration.
company
Dec 2024 • Web development
Job Posting
This is a website that lists dummy job postings, fetched from an external API using Next.js RSC and TanStack Query for infinity scroll loading style. Auth.js also used to provide login mechanism using third-party provider such as OAuth and Facebook login. The project also serves as first introduction into blog data structure formatting before dive into CMS.
freelance
Aug 2024 • Web fragment
BRI slider
BRI slider is a side project to in help building Bank Rakyat Indonesia main website. Working to create a slider component from scratch with only framer-motion (now motion), the component displays cards and categorized, while still being responsive within every viewport and can be interacted with both cursor or touch.
company
Aug 2024 • Web development
Zamrood landingpage
With Zamrood landingpage, I’ve performed responsive, pixel-perfect design slicing from Pandooin design and adds interactive element that’s absent from the original design, includes image slider with auto slide and lightbox to preview the image.
company
Aug 2024 • Web development
Cek Ongkir
Cek Ongkir uses RajaOngkir API to fetch delivery fees between location in Indonesia. With Next.js + RSC, ensures all possible location preloaded, practically removes additional loading. Combined with LocalStorage to saves user search history.
personal
Dec 2023 - Feb 2024 • Web development
Dashboard
A website or webapps for exploring multiple techniques. This includes data visualization with SVG, chat like interface interaction, drag-n-drop upload field, bento layout, and multi-layered portal. All of those composed into a simple to-do list project.
Telkom Indonesia
Jul 2021 - Feb 2024 • Web development
Agreeculture
As a startup within agriculture industry, Agreeculture helps digitalize the industry in Indonesia. To do so, Agree require a platform for its client. Here I help slicing design for the landing pages, building the core ecosystem dashboards, and another user-oriented features such as Agreepedia and Traceability. Next.js used as tech stack, team up with backend devs using Golang to build entire interface and in-house CMS solution.
company
Jul 2023 - Aug 2023 • Web development
Find Movies
Utilizing TheMovieDB API, Find Movies displays list of trending and recommended movies and TV series. Using TanStack Query and axios for API fetch and search. This project are part of unit test exploration using Vitest.
Contacts
Have something or need solution in mind? Let's chat about it and make it happen!
Tools
Here's tools I've used in exploration or creating solutions
