01 / 04UI Revamp
Haibunda Revamp UI
A Total Revamp for haibunda.com, a parenting website. I was responsible for the UI revamp. I used AstroJS, Tailwind CSS, AlpineJS and SwiperJS for this project.
Read case studyFront-end developer · South Jakarta
Interfaces people feel.
Systems teams can ship.
I’m Yudi. I turn ambitious digital ideas into fast, expressive front-ends—balancing engineering discipline with an editorial eye.
Scroll to inspect ↓
YD / Interface practiceJakarta · 2026
30+ projects shipped
React · Next · Astro
Design-minded engineering
Selected fieldwork
Work made for real audiences, real deadlines, and real production constraints.
02 / 04Web Project
Allobank Race Campaign
Read case study03 / 04UI Revamp
Beautynesia Revamp UI
Redesign UI for Beautynesia website, a beauty and lifestyle media. The goal is to make the website more modern and user friendly.
Read case study04 / 04New Features
CNBC Indonesia Cuap Cuan Program
Introducing CNBC Indonesia Cuap Cuan Program: Unleash Your Financial Insights
Read case study
How I work
Interface engineering
Production front-ends with clear component boundaries, resilient responsive behavior, and maintainable systems behind the polish.
Performance by design
Rendering, media, and JavaScript decisions made early—so speed is part of the experience, not a cleanup task at the end.
Motion with purpose
Interaction and scroll choreography that clarify hierarchy, reward attention, and remain calm for reduced-motion users.
Stay Up-to-Date with Modern JavaScript
Frontend development evolves rapidly. Keep your skills sharp by staying up-to-date with modern JavaScript features and libraries. Explore ES6, ES7, and beyond, and consider using tools like Babel to ensure compatibility with older browsers.
Debugging Like a Pro with DevTools
Master your browser's developer tools (DevTools) for efficient debugging. Learn how to set breakpoints, inspect elements, and use the Console to identify and fix issues in your JavaScript and CSS code. Debugging is a crucial skill for every frontend developer.
Enhance User Experience with Smooth Animations
Adding subtle animations to your web pages can greatly enhance user experience. Explore CSS transitions and keyframes to create smooth animations for hover effects, loading spinners, and more. Keep them lightweight for optimal performance.