function updateHeaderHeight() {
        // Get the height of #brx-header
        const headerHeight = document.querySelector('#brx-header').offsetHeight;
          
        // Store the height in the CSS custom property --header-height
        document.documentElement.style.setProperty('--brxw-header-height', headerHeight + 'px');
    }

    // Execute the function as soon as the document is ready
    document.addEventListener('DOMContentLoaded', function() {
        updateHeaderHeight();  // Initial update of header height when the document is ready

        // Update the header height on window resize and orientation change
        window.addEventListener('resize', updateHeaderHeight);
        window.addEventListener('orientationchange', updateHeaderHeight);
});

About — Designer & Front-End Engineer

I craft interfaces where motion meets meaning.

Discipline Web Design & GSAP
Based in Selangor, MY
Available For new work

01 — The Journey

From static mockups to living interfaces.

It started with Figma — pushing pixels until they felt right. But static frames never captured how an interface should breathe.

So I learned to animate. GSAP became the bridge between a beautiful comp and an experience that moves people — literally.

Today I build Awwwards-grade front-ends in Bricks Builder, pairing design intuition with code that performs.

2019
First pixel pushed in Figma
2021
Fell in love with GSAP motion
2023
Mastered Bricks Builder workflow
2025
Shipping award-tier interfaces

02 — The Tech Arsenal

Tools I wield fluently.

The stack behind every interface — design, motion, and intelligence working in concert.

Figma
GSAP
Claude
Bricks Builder CMS
CSS3 Styling
JavaScript Logic
HTML5 Markup
WordPress Platform

How I think
about the craft.

i

Motion with purpose

Every animation earns its place. Motion should guide attention and reinforce meaning — never decorate for its own sake.

ii

Performance is design

A beautiful interface that stutters is a broken one. I build with the GPU in mind — transforms, will-change, and lean ScrollTriggers.

iii

Detail is the difference

The gap between good and award-tier lives in the micro-decisions: easing curves, stagger timing, the weight of a single border.

Let's build something
unforgettable.

Start a conversation