A fully responsive, high-performance e-commerce frontend web application built for a luxury beauty and skincare brand. This project focuses heavily on modern UI/UX principles, advanced CSS animations, and seamless interactive components built entirely from scratch without the use of heavy frontend frameworks.
Check out the live site here: DIME E-Commerce
This project was built to mimic the premium feel of top-tier modern web stores. It includes several custom-engineered interactive widgets:
- 📱 Fully Responsive Layouts: Fluid adaptation across mobile, tablet, and desktop screens using CSS Grid and Flexbox.
- 🛒 Slide-out Cart Drawer: An off-canvas shopping cart panel that slides in smoothly, featuring dynamic quantity controls and shipping progress.
- 🔐 Interactive Sign-in Panel: A sleek, sliding authentication drawer with custom floating-label input fields.
- 🔍 Full-Screen Search Overlay: A drop-down search interface with massive typography and popular search suggestions.
- 🍔 Custom Mobile Navigation: A clean hamburger menu that transforms into a full-screen interactive drawer on smaller devices.
- ✨ Scroll Reveal Animations: Elements elegantly fade and slide into view as the user scrolls down the page using the
IntersectionObserverAPI. - ⏳ Premium Preloader: A custom animated loading screen that hides the site until all assets are fully rendered.
- 💅 Micro-interactions: Infinite scrolling image carousels, custom slim scrollbars, and complex curtain-hover button effects.
This project was built utilizing core web technologies to ensure maximum performance and zero dependency bloat:
- HTML5: Semantic structuring and accessibility.
- CSS3: Advanced styling, custom properties (variables), Flexbox, CSS Grid,
@keyframesanimations, and media queries. - Vanilla JavaScript (ES6+): DOM manipulation, event handling, class toggling, and asynchronous timing functions.
- FontAwesome: For lightweight, scalable vector icons.
The application features 6 distinct, fully developed pages:
Home / Index- The landing page and brand introduction.Shop- The main product catalog.System- Bundled product offerings.Best-Sellers- Highlighted top-tier products.Skin Quiz- Interactive customer routing.Learn / About- Brand story, mission, and cruelty-free promises.