[ Web Developer / Profile Introduction ]

CRAFTING
WEB

// Core Focus Matrix:

Front-End Architecture: 80%
Back-End Orchestration: 20%

I build scalable, high-performance web applications for a diverse portfolio of cross-border clients and prominent local financial institutions. My professional path tracks a clear evolution from design execution to technical lead architecture.

[01]

Component Design

Translating layout logic into highly reusable, scalable frontend blocks and micro-component definitions.

[02]

Automation Testing

Integrating deterministic safety networks into complex enterprise runtime loops via modern browser simulations.

[03]

Micro Architectures

Decoupling heavy codebase structures into clean, dynamic independent runtime applications.

[ Tech Ecosystem Matrix ]

CAPABILITIES

ARCHITECTURAL LAYERS

[Front-End Ecosystem]

React.js, Next.js, Vue.js, Gatsby.js, Redux Saga, MobX, Vuex, MUI, SCSS/SASS, GraphQL, Apollo Client, Micro Frontends.

[Back-End Systems]

Node.js, Loopback4, MongoDB, OracleDB, Microservices architecture.

[Tools & Analytics Arrays]

Cypress, Mocha testing layers, Jira, Confluence, GA4 analytics, Google Tag Manager.

[System Frameworks]

Unit and E2E testing, technical documentation, and continuous improvement.

[ 12 Year Continuous Timeline ]

EVOLUTION

[ PRESENT STATUS ]

Metrobank

Full Stack Developer

• Developing frontend modules using React.js and Redux Saga within a Micro Frontend architecture.

• Building backend logic using Node.js (Loopback4) with MongoDB and OracleDB.

• Integrating automated testing layers via Cypress and Mocha frameworks.

[ REUSABILITY LAYER ]

Inchcape Digital

Technical Lead (Front-End)

↳ Q4 Top Performer Awarded

• Promoted from Front End Developer to Technical Lead due to engineering excellence.

• Led the integration of frontend components into various host websites using GraphQL and MUI.

• Orchestrated a highly successful 3-month global GA4 / Google Tag Manager analytical implementation tracking framework.

[ AUSTRALIA CLIENTS ]

EMAPTA / Acurus Pty Ltd

Front End Developer

• Managed a diverse tech stack including React.js, Gatsby, and WordPress environments.

• Collaborated directly with cross-border stakeholders to enforce defensive form input runtime validations and core speed benchmarks.

[ GAME GRAPHICS SYSTEM ]

W-Tech Solutions Inc.

Front End Developer

• Focused on interactive game engine visual elements and runtime user controls using Vue.js and SCSS.

• Built robust, reusable layout code libraries to ensure product line scalability.

[ FOUNDATIONAL BASE ]

TCS / Hibu PH

Web Designer & Dev

• Began career path parsing vanilla HTML/CSS markup layout files.

• Translated complex UK-based design wireframes into pixel-perfect, cross-browser compatible web structures.

[ Case Studies & Selected Production Code ]

SELECTED WORKS

[ EIS ]

Electronic Invoicing System

React.js shadcn tailwindcss zustand

AI-Driven Development: Pioneering AI-assisted development paradigms by utilizing Claude Code and autonomous agents ("vibe coding") to rapidly prototype components, accelerate test coverage, and streamline the development lifecycle.

// Status: In Progress

[ Wealth Manager ]

Drag & Drop Feature

React.js Redux Saga dnd-kit

Enhanced UX interactivity by implementing a intuitive drag-and-drop system for bond filters, streamlining how users manipulate data.

// Status: Enhanced

[ Wealth Manager ]

Responsive UI Enhancements

React.js Redux Saga

Optimized the bond listing page's responsiveness, ensuring seamless card-item rendering and visual consistency across all screen sizes.

// Status: Optimized

[ Wealth Manager ]

Data Integrity Warning

react-router

Safeguarded transaction workflows by adding popup warning system that prevents accidental data loss when users attempt to navigate away mid-process.

// Status: Safeguarded

[ Wealth Manager ]

PDF Generation

Loopback4 html2pdf

Generated the template for bond purchase receipts upon transaction completion.

// Status: Templated

[ Wealth Manager ]

Micro-Frontend Preparation

Webpack Module Federation

Prepared the Wealth Manager platform for a micro-frontend architecture, laying the groundwork for improved scalability.

// Status: Prepared

[ Data Analytics Integration ]

Global GA4 Implementation

GA4 Analytics GTM Tag Manager

Designed and deployed an automated enterprise analytical integration framework across the platforms. Unified custom digital behaviors and data layers under an optimized tracking protocol without compromising baseline load-speed metrics.

// Status: Scaled Globally

[ Finance Calculator ]

Expanded the Finance Calculator

React react-jsonschema-form GraphQL

Expanded module's capabilities to support compliance and localized features for the Australian market.

// Status: Expanded

[ Checkout ]

Checkout Version 2

React react-jsonschema-form ApolloClient GraphQL

Developed and launched the enhanced Checkout Version 2 UI, improving the overall user experience.

// Status: launched

[ Configurator ]

Headless Configurator Integration

React webpack monorepo

Resolved critical headless CMS integration issues for the Configurator across European market deployments.

// Status: launched

[ Sales Enablement ]

Sales Enablement Enhancements

React webpack monorepo

Implemented new car configuration features within the Sales Enablement tool to streamline dealer-to-client operations.

// Status: implemented

[ Let's make things happen ]

GET IN TOUCH

Open to technical discussion, or a partner for both design and engineering — I'm ready to contribute.

↳ Email Address ↳ LinkedIn ↳ GitHub