Azhar Ali
Full Stack Web Developer (AI & Machine Learning Integration)
Profile in progress
Azhar is building their profile!
AÉRE is a concept design for a luxury, minimalist fashion e-commerce brand ("Maison de Mode"). The goal of this project was to design and develop a highly aesthetic, responsive, and interactive landing page that goes beyond standard template-driven online storefronts.
Instead of a static grid, I developed several high-touch interactive micro-experiences designed to increase dwell time, user engagement, and visual narrative storytelling—critical components for luxury fashion conversion rates.
Core Features & Interactive Mechanics
Interactive Editorial Campaign Lookbook:
The Concept: Traditional lookbooks are static. I created an interactive media canvas with pulsing hotspots over a hero editorial image.
The Tech: Clicking a hotspot triggers a custom JavaScript popover showing real-time product details, price, and a "Quick Add to Bag" action, seamlessly linking storytelling with immediate checkout intent.
Personalized "Style Finder" Quiz Engine:
The Concept: An interactive assistant that mimics a personal shopping consultation.
The Tech: A dynamic multi-step questionnaire built natively in JavaScript. Based on user choices regarding spatial environment and fit silhouette, the algorithm renders a custom visual mood curation and automatically selects matching products that can be instantly added to the cart.
Fully Functional Local Cart System:
A slide-out state-driven cart drawer. Users can add garments, increase/decrease quantities in real-time, delete items, view shipping thresholds, and see subtotal cost recalculations instantaneously without page reloads.
Dynamic Quick View Modal:
Allows users to select material colors, choose sizing models, and read tailored material specifications instantly before committing to a purchase.
Aesthetic Custom Toast System:
Replaced generic browser alert dialogs with a high-end, self-destructing custom floating toast notification framework for modern feedback.
Tech Stack & Visual Identity
Markup & Structuring: Semantic HTML5
Styling & Motion: Tailwind CSS (Custom color configurations, glassmorphism, slow-pulse custom animations, smooth scroll, keyframe-scrolling announcement ticker)
Icons: Lucide Icons (Premium SVG library)
Interactivity State Management: Vanilla ES6 JavaScript (zero bloated libraries, yielding extremely fast load speeds and crisp interactions)
Colors: #FAF9F6 (Ivory), #1A1918 (Charcoal), #B37D64 (Terracotta/Clay Accent)
2
1
61