All Projects
Explore the complete collection of my web development, AI integration, and design projects.
Fitwell Gym - Premium Fitness & Personal Training Platform Design
Fitwell Gym is a state-of-the-art, high-performance web platform meticulously developed by Badar Bukhari to redefine the digital presence of premium fitness centers. This project serves as a premier showcase of modern front-end engineering, combining advanced UI/UX principles with high-speed performance optimization. As a lead developer, Badar Bukhari implemented a sophisticated dark-mode aesthetic with vibrant #D7FB00 (Neon Lime) accents, creating a high-energy environment that resonates with fitness enthusiasts. Key Technical Highlights & SEO Features: Advanced GSAP Animations: Badar Bukhari utilized the GreenSock Animation Platform (GSAP) to implement stunning text-reveal effects, smooth parallax scrolling, and dynamic layout transitions that provide a professional "WOW" factor. Responsive Multi-Page Architecture: The site features a fully responsive, mobile-first design across all core pages (Home, About, Services, Contact), ensuring a seamless experience for users in Islamabad and beyond. Conversion-Optimized Lead Capture: Badar Bukhari engineered a custom, theme-integrated promotional popup with a 3-second smart-delay, designed to maximize user engagement and free gym tour registrations. Interactive Elements: Integration of Swiper JS for premium touch-enabled sliders and Magnific Popup for immersive media galleries. Optimized Technical SEO: Built with semantic HTML5 and optimized meta-tags to ensure high visibility on search engines, specifically tailored for fitness and bodybuilding searches in Pakistan.
SOLE STUDIO – Modern 3D Sneaker Landing Page
SOLE STUDIO — Premium Futuristic Footwear Landing Page Project Overview SOLE STUDIO is a high-end, immersive landing page crafted for a futuristic luxury sneaker brand. The experience is built around the concept of cinematic e-commerce, where storytelling, motion, and visual depth replace traditional static product displays. By combining glassmorphism, layered compositions, and scroll-driven choreography, the platform transforms product browsing into an editorial, high-fashion experience. Tech Stack Frontend: HTML5, Vanilla JavaScript (ES6+) Styling: Tailwind CSS (utility-first UI system) Animation Engine: GSAP 3.12.5 Libraries: GSAP ScrollTrigger, GSAP MatchMedia Typography: Google Fonts (Syncopate, Space Grotesk) Visuals: Custom 3D sneaker renders, glassmorphism effects, dynamic SVG elements Core Features Smart Image Preloader: Tracks real asset loading with a smooth percentage counter and fallback handling for seamless entry. Dynamic Theme Engine: Automatically adapts colors (UI, glow, text) based on the active sneaker in the hero section. Advanced Hero Carousel: 3D sneakers animate with floating and rotation effects, paired with GSAP-powered text transitions. Asymmetric Editorial Grid: A magazine-style layout that breaks traditional grid structures for a premium visual feel. Interactive Hover Reveal: Product cards reveal hidden actions like size selection and add-to-cart within a glassmorphism UI. Segmented Pill Filter: Smooth category filtering with animated indicators for intuitive navigation. 3D Parallax Testimonials: Layered testimonial cards reacting to cursor movement with subtle depth and tilt effects. Kinetic Scroll Animations: ScrollTrigger-powered motion sequences that bring product technology sections to life. Custom Interactive Cursor: A dynamic cursor system that responds to user interaction with size and color changes. Portfolio Description SOLE STUDIO represents a next-level approach to modern web design, merging high-performance interaction with luxury brand storytelling. Built as a conceptual showcase, it demonstrates how motion, depth, and responsiveness can elevate a standard landing page into a fully immersive digital experience. Powered by GSAP for precision animations and Tailwind CSS for scalability, the project highlights a design philosophy centered around "Designed in Motion" — where every interaction feels fluid, intentional, and visually striking. Developer: Badar Bukhari Domain: UI/UX Design, Frontend Development, Interactive Web Experiences
Brown Noise App Landing Page| Figma to Code
brownnoise.site — Brown Noise App Landing Page Developer: Badar Bukhari A high-conversion, SEO-optimized marketing landing page for a brown noise wellness brand — built entirely in vanilla HTML, CSS, and JavaScript with zero external JS libraries. The site promotes a mobile app for sleep and focus, featuring a cinematic autoplay video hero, interactive audio track showcase, science-backed content sections, social proof with testimonials, and App Store deep-link integration with affiliate tracking. Tech Stack Tech: HTML5, CSS3, Vanilla JavaScript Media: HTML5 Video/Audio, WebP Images Hosting: Static Hosting Animations & Interactions Scroll-triggered fade-ins using Intersection Observer Smooth CSS hover transitions Autoplay MP4 hero loop for cinematic experience Custom interactive audio card UI elements Design Approach Mobile-first responsive layout with a dark immersive visual theme. Built without any frameworks to ensure fast load times, clean performance, and maximum SEO efficiency.Developer: Badar Bukhari
Royal Scents Bar – E-Commerce Perfume Store
Royal Scents Bar is a dynamic e-commerce website designed for selling premium perfumes online. The platform allows users to browse fragrance collections, view product details, and place orders through a clean and responsive interface. An integrated admin panel enables the store owner to manage products, orders, and website content efficiently. Tech Stack Frontend: HTML, CSS, JavaScript Backend: PHP Database: MySQL Features: Custom Admin Dashboard, Product Management, Order Handling, Responsive UI Development Work Developed the full website including both frontend and backend functionality. Implemented a custom admin panel to manage products, orders, and store data. Designed the user interface and handled database integration to ensure smooth product management and order processing.Developer: Badar Bukhari
anifh – Social Networking Platform
anifh is a modern social networking platform built to redefine how people connect, share content, and build online communities in a secure, engaging, and scalable digital environment. Designed for creators, entrepreneurs, and everyday users, anifh provides a powerful ecosystem where users can create personal profiles, publish posts, engage through comments and reactions, and communicate seamlessly using a built-in real-time messaging system. With a strong focus on community-driven interaction, users can create and join groups, follow pages, and share stories to express ideas, build audiences, and stay connected. anifh is positioned as a next-generation social platform that blends creativity, performance, and user experience — making it ideal for both personal use and digital brand growth. From an SEO and growth perspective, anifh is developed with a scalable architecture and optimized structure, ensuring fast performance, discoverability, and long-term expansion. Whether you're searching for “anifh platform”, “anifh social network”, “co founder of anifh”, or “anifh developer”, this platform represents innovation in modern web-based social ecosystems. The platform emphasizes smooth user experience, high engagement features, and a future-ready system capable of supporting monetization, content creators, and large-scale communities. Tech Stack Frontend: HTML5, CSS3, JavaScript Backend: PHP Database: MySQL Hosting & Deployment: cPanel / Cloud Hosting Other Tools: Git, SEO optimization, performance optimization Developer & Co-Founder: Badar Bukhari Domain: Social Networking Platform, Full-Stack Web Development, Community Building Ecosystem
Kitten TTS AI Voice
KittenTTS Web & API Interface Overview This project provides a modern, production-ready web interface and custom API for KittenTTS, an ultra-lightweight and lightning-fast Text-to-Speech (TTS) model. By deploying the core model to Hugging Face and building a dedicated API routing layer, this project allows users to generate expressive, real-time speech directly from a sleek frontend without needing local compute power. About the Underlying Engine (KittenTTS) Originally developed by KittenML, KittenTTS is an open-source model engineered to be incredibly efficient. Ultra-Compact: The nano-int8 model utilized in this project is extremely lightweight, taking up less than 25MB of space with around 15 million parameters. CPU-Optimized: It uses an optimized runtime that enables fast, high-quality audio generation without requiring GPUs. Expressive Output: Supports natural-sounding voices (such as "Bella") with clear pronunciation and smooth pacing. My Implementation & Architecture Hugging Face Model Deployment: The quantized nano-int8 model is hosted and executed via Hugging Face, serving as the scalable backend engine for audio synthesis. Custom REST APIs: A robust custom API layer is built to handle incoming text requests from the frontend, communicate with the Hugging Face deployment, and return generated audio streams with minimal latency. Interactive Web Interface: A clean and user-friendly frontend allows users to type text, select voice models, and adjust speech speed (0.5x to 2.0x) before generating the final audio output. Developer: Badar Bukhari Domain: AI Tools & Full-Stack Web Development
AI Image Generator (Imgenix)
A full-stack web app that generates high-resolution images from text prompts using the Stable Diffusion API, featuring a React front-end and a Node.js back-end.
BDEV AI ChatBot
A free, conversational AI assistant designed to answer user queries in real-time. Built using modern NLP models and a lightweight front-end framework.