I’m a developer passionate about crafting accessible, pixel-perfect user interfaces that blend thoughtful design with robust engineering.
My favorite work lives at the intersection of design and development—creating experiences that not only look great but are meticulously built for performance and usability.
Currently, I'm a Front-End Engineer at BK Keyforce, specializing in development. I help design, build, and maintain the UI components that power BK Keyforce's frontend, ensuring our platform meets web accessibility standards and best practices to deliver an inclusive user experience.
In the past, I’ve developed CMS projects for international clients and built software across agencies, companies, and businesses in industries ranging from digital media to tech.
Jul 2024 - Present
As a Frontend Engineer at BK Keyforce, I play a key role in architecting and developing robust, scalable, and performant user interfaces for mission-critical web applications. My responsibilities span across the full frontend development lifecycle, from ideation and prototyping to implementation and optimization. I collaborate closely with cross-functional teams including backend engineers, designers, and product managers to deliver seamless and intuitive user experiences.
Sep 2022 - Jul 2024
I played a hands-on role in the end-to-end development of various web applications, collaborating across multiple teams to deliver high-quality, functional, and visually consistent web experiences. I contributed to the design, implementation, testing, and optimization of features across several projects, each with unique goals and requirements. Working in a dynamic and fast-paced environment, I frequently interacted with designers, backend developers, QA engineers, and product stakeholders to ensure technical alignment, design fidelity, and user satisfaction.
Jan 2022 - Apr 2022
Worked alongside student designers and engineers to develop and enhance school aide platforms. Integrated third-party APIs, including Paymongo for secure payment processing, and implemented features such as user data fetching, dynamic content rendering and responsive design. Contributed to full-stack development with a focus on API integration, code maintainability, and user experience.
Daimasu is a high-end Japanese dining establishment in the Philippines. I created their website entirely through AI-assisted development, using Figma MCP and Claude to transform design files directly into production-ready code—without writing code manually. This approach demonstrated how AI tooling can streamline the design-to-development pipeline while maintaining high standards for performance and user experience.
Claude accelerated development by generating well-structured boilerplate and applying modern web development best practices automatically—from performance optimizations and rendering strategies to component architecture and data fetching patterns. The AI consistently produced clean, maintainable code that required minimal manual refinement, showcasing how AI can handle the full spectrum of frontend development tasks.
A Shopify storefront built on a customized Liquid theme, extending an existing base theme architecture. Development was accelerated using Augment Code as an AI-assisted coding tool to modify theme templates, sections, and snippets. Customizations include tailored Liquid template logic, custom CSS/SCSS styling, and JavaScript enhancements integrated within Shopify's theme structure. The theme leverages Shopify's section schema for merchant-configurable components while maintaining compatibility with Shopify's Online Store 2.0 framework.
The Cage System is an internal project management and operations dashboard developed for streamlining workflows within Betrnk’s junket management ecosystem. As part of the frontend engineering team, I helped design and implement a dynamic interface that consolidates complex data and access-controlled operations into a single, intuitive platform.
I was responsible for building modular, responsive UI components using Next.js and Tailwind CSS, integrated with Zustand for state management and React Hook Form for flexible form workflows. The system supports role-based access, dynamic permissions, and authenticated routing using NextAuth allowing secure and personalized access across multiple user tiers.
Transport Ops is a comprehensive logistics and operations management system designed to streamline and digitize daily transport operations within SpanAsia. The platform’s core purpose is to provide real-time visibility and centralized control over container movement, fleet coordination, and terminal logistics — ultimately enhancing operational efficiency and regulatory compliance across the organization. Transport OPS is integrated with LogiNext, enabling features like optimized route planning, real-time GPS tracking of trucks, and automated status updates for container movements.
Philippine Span Asia Carrier Corporation (PSACC), a leading domestic shipping line in the Philippines. The goal of the project was to build a fast, accessible, and visually cohesive website that communicates the company’s services, vessel schedules, and shipping operations while remaining easy to maintain through a lightweight content management system.
I led the creation of a custom design system using Radix UI primitives, before the emergence of frameworks like ShadCN.
A Shopify storefront built on a customized Liquid theme, extending an existing base theme architecture. Development was accelerated using Augment Code as an AI-assisted coding tool to modify theme templates, sections, and snippets. Customizations include tailored Liquid template logic, custom CSS/SCSS styling, and JavaScript enhancements integrated within Shopify's theme structure. The theme leverages Shopify's section schema for merchant-configurable components while maintaining compatibility with Shopify's Online Store 2.0 framework.