Decibel Expression: Hotaru (Fireflies)
Interactive sound visualization where 500 fireflies light up and dance to the symphony of music.Key concepts: Fourier Transform, Bezier curve motion, Trigonometric Lighting
Technology: AS3, PHP, Greensock
Watch here
(Live demo WIP)
dB Ex: Hotaru - Backend
Leverages PHP to efficiently handle requests, ensuring quick interactions and seamless track navigation between hosted music files.Key concepts: Decoupled Client-Server Model
Technology: PHP, NginX, HTTP, Flat File Storage
Watch here
(Live demo WIP)
Decibel Expression - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Wilmar's Global Presence
Interactive map designed to emphasize the company's global reach with dynamic filtering and zooming.Key concepts: Geospatial Interaction, Set Theory Filtering, Coordinates Normalization
Technology: HTML5, ES6, CSS3, Googlemap API
Live page (Valid as of 2024)
Wilmar Map - Backend
Integrates AEM to manage data and combines map APIs into a unified, interactive map application.Key concepts: API Integration, Data Mapping, Graceful Degradation
Technology: AEM (Java), APIs (Google Maps, Baidu Maps), HTTP
Live page (Valid as of 2024)
Wilmar Map - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Interactive Wall
Interactive ripple animation responding to real-time physcial movement and intensity.Key concepts: Wave propagation, Spatial 3D mapping, Gesture design
Technology: KINECT, CANVAS, NODEJS, WEBSOCKET
(Live demo not available)
Interactive Wall - Backend
Request Kinect sensor data via Node.js and WebSocket for real-time feedback into the ripple animations.Key concepts: Low-Latency Real-Time Streaming, Event-Driven Architecture
Technology: Kinect SDK, JSON, NODEJS, WEBSOCKET
(Live demo not available)
Interactive Wall - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Growth Explorer
Interactive skill tree that visualizes individual competencies to highlight progress and motivate lifelong learning.Key concepts: Graph Theory, Collision detection, Gamification
Technology: HTML5, ES6, CSS3
(Live demo not available)
Growth Explorer - Backend
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Growth Explorer - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Interactive e-Learning Engine
Toolkit and framework for efficient e-Learning development with mobile-responsive content learning behaviour analytics.Key concepts: Rapid Prototyping, Responsive Animation, Data analytics
Technology: HTML5, ES6, CSS3, SCORM
(Live demo not available)
e-Learning Engine - Backend
Package SCORM-compliant courseware using Python and NodeJS, stores learning data in JSON, and integrates with LMS for analytics tracking.Key concepts: Code Obfuscation and Minification, Automated Testing
Technology: JSON, PYTHON, NODEJS, SCORM
(Live demo not available)
e-learning Engine - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Wheel Power
A gamified chance wheel that motivates players to take risk to attempt challenging questions with rewards.Key concepts: Velocity and Motion, Probability Theory, Gamification
Technology: HTML5, ES6, CSS3
(Live demo not available)
Wheel Power - Backend
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Wheel Power - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
RWS: HHN8
Immersive interactive page. (Jump scare warning!)Key concepts: Parallax, Responsive animation, Dynamic lighting
Technology: HTML5, ES6, CSS3
Archived page (Jump scare warning)
Animated Lights
HHN8 - Backend
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
HHN8 - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Capitalmall KouKou
Immersive interactive page.Key concepts: Responsive animation, Drag-n-Drop elements
Technology: HTML5, ES6, CSS3
(Live demo not available)
KouKou - Backend
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
KouKou - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Interactive lightning simulator
Attmpted to visually simulate how lightning crawls in slow-motion. Controlled by keyboard.Key concepts: Trignometry, Graph theory, Game loop FPS
Technology: AS3, Greensock
Reference video
Lightning - Backend
Store lightning paths completed by players for replays.Key concepts: Data Serialization
Technology: Node.js, Flat file storage (JSON)
Lightning - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Quiz Builder
A drag-and-drop quiz builder supporting 6 question types (e.g., Hotspot, Drag-and-Drop).Key concepts: Integrated Accessibility, Modular Design
Technology: React, SASS, ARIA Roles, Webpack
Quiz Builder - Backend
Handles quiz storage and supports real-time preview for quiz creation.Key concepts: Scalable Data Storage, Real-Time Updates
Technology: Express, MongoDB, WebSockets
Quiz Builder - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Smart Office
A centralized interface to manage and automate office devices, designed as an experimental project.Key concepts: Responsive Design, Affordance Design, Heuristics
Technology: Tailwind CSS, Fetch API
Smart Office - Backend
Supports office device automation and control via a Hubitat hub, as part of an experimental project.Key concepts: Asynchronous Communication, Geofencing
Technology: Hubitat Maker API, Zigbee and Z-Wave Protocols, Hubitat Native Storage
Smart Office - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Safety Report App
A mobile app for individuals to report workplace hazards by snapping a photo and submitting a detailed report.Key concepts: Mobile-first, Gamification Mechanics
Technology: React Native, Bootstrap
Safety Report - Backend
Processes hazard reports with photo uploads, stores data securely, and notifies relevant personnel.Key concepts: Data Integrity, Fault Tolerance
Technology: Flask, PostgreSQL, S3 Replication
Safety Report - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Receipt Scanner
A personal app to scan paper receipt data effortlessly, with a one-click expense tracking dashboard.Key concepts: One-click Automation, OCR Integration
Technology: React Native, Tesseract.js
Receipt Scanner - Backend
Processes scanned receipts to extract and securely store data for a streamlined personal expense record.Key concepts: OCR Data Extraction, Secure Storage
Technology: Flask, AWS Textract, AWS S3
Receipt Scanner - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Wellness Tracker
A tool for tracking health metrics, workouts, and mood patterns with an emphasis on mobile usability.Key concepts: Mobile-First Design, Data Storytelling
Technology: Ionic, D3.js
Wellness Tracker - Backend
Integrates wearable data and generates personalized recommendations.Key concepts: IoT, Telemetry Management
Technology: Django, SQLite
Wellness Tracker - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Volunteer Hub
An internal platform for companies to coordinate volunteering initiatives and engage employees in impactful activities.Key concepts: Dynamic Filtering, Reactive Programming
Technology: Angular, Bootstrap, RxJS
Volunteer Hub - Backend
Orchestrates workflows to process opportunity data, manage user profiles, and ensure secure storage and retrieval of records.Key concepts: Workflow Orchestration, State Management
Technology: Ruby on Rails, MySQL, Redis
Volunteer hub - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
Invoice Tracker
A pixel-perfect, cost-effective dashboard for freelancers to create, send, and manage invoices with detailed status tracking.Key concepts: ixel-Perfect Design, Tailored Templates
Technology: Vue.js, Tailwind CSS, jsPDF
Invoice Tracker - Backend
Automates invoice generation and email notifications, with lightweight storage and simple deployment for small-scale use cases.Key concepts: Automation, Checksum Validation
Technology: Flask, SQLite, SendGrid
Invoice Tracker - UX
Coming soon...Key concepts: Coming soon...
Technology: Coming soon...
‹
X
›
♺
♺
♺