DUNE Premium Mechanical Keyboard Concept Website
š” Why this project came to my mind
Custom mechanical keyboards are all about premium tactile feel and sound design. However, most keyboard landing pages are generic and fail to capture that sensory experience.
I wanted to build a high-fidelity, interactive prototype that makes usersĀ feelĀ the luxury, weight, and acoustic precision of the keyboard right from their screens.
š Research & Problem Solving
Visual Storytelling & Video Selection: I needed a cinematic video background that immediately set a premium tone. I researched and compared dozens of keyboard films, analyzing pacing, lighting, and sound, until I selected the perfect high-contrast, atmospheric loop of a keyboard in action.
AI-Assisted Design: Instead of using placeholder images, I utilized advanced AI image generation models to design the bespoke product renders (theĀ Dune LightĀ Burnt Orange casing, theĀ Space GreyĀ option, and theĀ Oasis Limited EditionĀ theme). This allowed me to iterate on industrial design concepts rapidly and build a cohesive visual identity.
Asset Optimization: Solved local asset loading and subdirectory pathing bugs for GitHub Pages by implementing dynamic base path prefixing, ensuring 100% asset uptime.
š» Technologies & Languages Used
Next.js (App Router)Ā &Ā React: For building modular, high-performance components.
TypeScript: Enforced type safety and codebase scalability.
Tailwind CSS: Implemented sleek glassmorphism, responsive bento grids, and tailored dark-mode layouts.
GSAPĀ &Ā Framer Motion: Created smooth scroll-triggered parallax backdrops, dynamic image crossfades, custom cursor actions, and cinematic entry animations.
š¼ Open for Work
I specialize in turning creative visual concepts into high-performance, pixel-perfect web experiences. If you have an exciting product, website, or concept you want to bring to life:
DM me here on Contra!
Available for: Freelance, Contract, or Full-Time Frontend Engineering / Web Design roles.
1
2
33
Obsidian Men's Care is a high-end, dark-themed landing page and e-commerce concept for a premium men's grooming brand. The project is designed with a "macho" aesthetic, emphasizing precision engineering and "tactical" skincare. It utilizes modern web technologies to provide a smooth, interactive user experience, including a consultation feature that leverages local sample data to provide personalized grooming strategies.
Features:
1. Premium branded website
2. Custom mouse cursor
3. GSAP
0
21
This project outlines the conceptualization branding and packaging design for LUX-100 a premium limited edition sunglass model. Positioned at the intersection of futuristic aesthetics and high end craftsmanship the LUX-100 is designed for a discerning market that values exclusivity advanced optical performance and striking design. The project emphasizes a "high-touch" execution where the unboxing experience is as critical as the product itself.
Features:
1. Professional branded website
2. Custom cursor
3. GSAP
0
35
Obsidian Men's Care is a high-end, dark-themed landing page and e-commerce concept for a premium men's grooming brand. The project is designed with a "macho" aesthetic, emphasizing precision engineering and "tactical" skincare. It utilizes modern web technologies to provide a smooth, interactive user experience, including a consultation feature that leverages local sample data to provide personalized grooming strategies.
0
30
Create a fan-made Umbrella Corporation company inspired by the Resident Evil universe, featuring a 3D Umbrella logo integrated into the admin panel along with a terminal interface enhanced by 3D elements.