Production Works
Selected real-world websites built for clients.
ASB Executive Education
Live Project
Executive education platform with course registration and scalable CMS architecture.
Stack
Rarity
Role
Frontend & CMS Dev
Dynamic content achitecture
Course registration workflows
CMS driven reusable sections
Enterprise-scale frontend maintenance
API integrated program management
Special Effect
Executive education platform with course registration and scalable CMS architecture.
Stack:
Nuxt /
Strapi /
Laravel
Cagamas Scholarship Portal
Live Project
Scholarship application system supporting applicant and administrator workflows.
Stack
Rarity
Role
Frontend Dev
Applicant dashboard flows
Admin management system
Complex form architecture
Frontend/backend coordination
Workflow-driven UI states
Special Effect
Designed scalable interfaces for real operational workflows instead of static informational pages.
Stack:
Nuxt /
Laravel
Cagamas Whistleblowing Form
Live Project
Confidential reporting platform with validation handling.
Stack
Rarity
Role
Frontend & Backend Dev
Secure file upload protection
Malicious upload prevention
Validation hardening
Confidential submission handling
Security-focused frontend logic
Special Effect
Implemented defensive validation strategies to reduce risk from unsafe file submissions and exploit attempts.
Stack:
Nuxt
Ecotree Hotel HK
Live Project
Dual-language hospitality platform supporting multiple hotel web paths.
Stack
Rarity
Role
Frontend & CMS Dev
Multilingual CMS structure
Multi-location content architecture
Responsive booking-oriented UI
Dynamic content management
Reusable frontend components
Special Effect
Built scalable multilingual structures capable of supporting multiple hotel properties under one ecosystem.
Stack:
Nuxt /
Strapi
Democracy of Dreams
Live Project
Flexible CMS-powered frontend enabling highly customizable UI composition.
Stack
Rarity
Role
Frontend & CMS Dev
Dynamic UI rendering
Modular CMS architecture
Flexible content-driven layouts
Reusable frontend systems
Component-based rendering logic
Special Effect
Extended Strapi’s rigid structure into a flexible modular system for non-technical content customization.
Stack:
Nuxt /
Strapi
Xenergi
Live Project
Modern corporate platform focused on responsive frontend experience.
Stack
Rarity
Role
Frontend & CMS Dev
Responsive enterprise UI
CMS-driven page architecture
Clean component structure
Scalable frontend implementation
Modern corporate UX
Special Effect
Delivered polished enterprise frontend experiences with maintainable CMS-driven content architecture.
Stack:
Nuxt /
Strapi
Gogoco
Live Project
One informational page focused on scalable CMS integration and responsive frontend experience.
Stack
Rarity
Role
Frontend & CMS Dev
Responsive enterprise UI
CMS-driven page architecture
Clean component structure
Scalable frontend implementation
Modern corporate UX
Special Effect
Delivered polished enterprise frontend experiences with maintainable CMS-driven content architecture.
Stack:
Nuxt /
Strapi
Football Leagues CMS System
Live Project
A sports competition platform featuring live match presentation and tournament structures.
Stack
Rarity
Role
Frontend Dev
Dynamic match rendering
Tournament data architecture
CMS relational modeling
Live score presentation systems
Scalable frontend component systems
Special Effect
Designed flexible CMS structures capable of managing competitions, matches, standings, and live sports-related content dynamically.
Stack:
Nuxt /
Strapi
Frontend & Interaction
Applications & functional builds. Exploring motion, UX, and interaction
Portfolio 2026
Frontend Development
A UX-focused portfolio exploring immersive interactions and motion systems.
Stack
Rarity
Role
Designer /
Frontend & CMS Dev
Interactive 3D UX
Motion-driven UI design
CMS integration
Advanced frontend animation
Responsive information architecture
Special Effect
A creative playground to experiment with interactions while maintaining usability and readability.
Stack:
Nuxt /
Strapi /
Tailwind
3D Rotational Cards Scroll
UI/UX
A game-inspired rotational card browsing system.
Stack
Rarity
Role
Developer
3D CSS transformations
Experimental interaction systems
Motion-based navigation
Spatial UI thinking
UX iteration & evaluation
Special Effect
Explored immersive card-based navigation concepts while critically evaluating usability, readability, and interaction balance.
Stack:
CSS
Portfolio 2024
Frontend Development
An early frontend portfolio focused on responsive UI and accesibility.
Stack
Role
Designer /
Frontend Dev
Responsive web design
Light/dark mode implementation
Interactive hover effects
Contact form integration
Timezone-aware interface
Special Effect
Combined interactive UI features with responsive layouts.
Stack:
Figma /
HTML /
CSS
News Dashboard
Prototype
News browsing application featuring authentication, live news fetching, and interactive user engagement features.
Stack
Role
Developer
API integration
Authentication flow handling
Dynamic state management
User interaction tracking
Component-based UI architecture
Special Effect
Experimented with real-time API-driven content rendering and interactive user state management using React and Material UI.
Stack:
React /
Material UI
Contact Directory App
Prototype
A contact management application supporting real-time search, editing, and organization.
Stack
Role
Developer
CRUD functionality
Dynamic search filtering
State-driven UI updates
Form handling
Reusable component structuring
Special Effect
Explored practical React state management patterns through interactive contact manipulation and live filtering workflows.
Stack:
React /
Material UI
Food Webapp
Prototype
A mini food ordering system featuring user cart interactions and admin-controlled product management.
Stack
Role
Developer
Cart state management
Quantity update workflows
Admin/user synchronization
Dynamic product rendering
Interactive UI logic
Special Effect
Simulated a dual-role ecosystem where admin-side product updates dynamically reflected across the user ordering interface.
Stack:
React /
Material UI
Design & UI Thinking
UI/UX design and visual exploration.
Portfolio 2026
Frontend Development
A UX-focused portfolio exploring immersive interactions and motion systems.
Stack
Rarity
Role
Designer /
Frontend & CMS Dev
Interactive 3D UX
Motion-driven UI design
CMS integration
Advanced frontend animation
Responsive information architecture
Special Effect
A creative playground to experiment with interactions while maintaining usability and readability.
Stack:
Nuxt /
Strapi /
Tailwind
Bento Themed Digital Invite
UI/UX
A digital invitation designed with equal emphasis on both mobile and desktop presentation.
Stack
Rarity
Role
Designer
Desktop-first composition thinking
Responsive visual hierarchy
Minimal interaction design
Scroll-based storytelling
UI layout composition
Special Effect
Focused on elevating desktop view where it is typically optimized only for mobile viewing.
Stack:
Figma
Letter Themed Digital Invite
UI/UX
A digital invitation designed around opening a physical letter.
Stack
Rarity
Role
Designer
Narrative-driven UX
Thematic interaction design
Loading sequence animation
Visual storytelling
Immersive user flow
Special Effect
Translated the physical experience of receiving and opening a letter into a cohesive digital interaction.
Stack:
Figma
Portfolio 2024
Frontend Development
An early frontend portfolio focused on responsive UI and accesibility.
Stack
Role
Designer /
Frontend Dev
Responsive web design
Light/dark mode implementation
Interactive hover effects
Contact form integration
Timezone-aware interface
Special Effect
Combined interactive UI features with responsive layouts.
Stack:
Figma /
HTML /
CSS
Beyond the Screen
LEGO Classic Cars (inc F40 & MC12)
LEGO
1:1 scale LEGO build projects of Classic Cars, F40 and MC12 Corsa included.
Stack
Rarity
Role
Builder /
Designer /
Project Lead
Structural design planning
Modular build architecture
Lighting and sound system integration
Project management and team build coordination
Visual storytelling
Special Effect
Led the end-to-end process for most of these exciting projects.
Stack:
Stud.io
LEGO Mybi
LEGO
A 1:1 LEGO build project of Perodua's Myvi car model.
Stack
Rarity
Role
Designer
Structural design planning
Complex build coordination
Mechanical integration
Creative problem-solving
Team leadership & project management
Presentation-focused detailing
Special Effect
First to design the Myvi's headlights using LEGO bricks, with many trials.
Stack:
Stud.io
LEGO Hotrod
LEGO
A 1:1 scale LEGO build project of reimagined Myvi car model.
Stack
Rarity
Role
Designer
Structural design planning
Complex build coordination
Mechanical integration
Creative problem-solving
Team leadership & project management
Presentation-focused detailing
Special Effect
Designed a huge part of the interior and in-charge to assemble the designs cohesively.
Stack:
Stud.io
LEGO Terracota
LEGO
A 1:1 LEGO build project of a Terracotta Army Warrior.
Stack
Rarity
Role
Designer
Structural design planning
Complex build coordination
Mechanical integration
Creative problem-solving
Team leadership & project management
Presentation-focused detailing
Special Effect
Focused in designing a face model using LEGO.
Stack:
Stud.io
Biometric Lock System
Engineering
A fingerprint-based ignition system designed to secure and control electric scooter access.
Stack
Rarity
Role
Developer
Biometric sensor integration
Embedded system programming
Hardware assembly
Authentication logic
Arduino-based prototyping
Special Effect
Developed a biometric ignition workflow allowing only registered fingerprints to activate the scooter system.
Stack:
C++
Electric Scooter with Built-in Carrier
Engineering
A custom-built electric scooter project featuring an integrated utility carrier.
Stack
Rarity
Role
Designer /
Developer /
Researcher
Product assembly
Structural design planning
Mechanical integration
Fabrication coordination
Prototype development
Special Effect
Contributed to the physical development process of a functioning mobility prototype.
Stack:
Solidworks /
C++