// about
About the Project
KEYBOARDEMA is a fully designed mechanical keyboard e-commerce storefront built entirely with vanilla HTML, CSS, and JavaScript — no frameworks, no libraries. The site features a 3D interactive keyboard in the hero section that responds to mouse movement, an exploded key diagram in the quality section, a detailed switch selector with performance stats, and a complete product catalog with category filtering and a working cart system. Every animation, layout, and interaction was crafted from scratch.
// key features
What It Does
3D Interactive Keyboard
Hero keyboard tilts in real-time with mouse movement using CSS 3D transforms and floating animation.
Cart System
Add products to cart with live counter, toast notifications, and button state feedback.
Product Filtering
Filter keyboards by layout type (TKL, 65%, Full Size) with smooth animated transitions.
Custom Cursor & Animations
Custom cursor with lag ring, scroll reveal effects, randomized RGB key lighting, and exploded key diagram.
// stack
Technologies Used
HTML5
CSS3
JavaScript
CSS Grid & Flexbox
CSS Animations
Google Fonts