Projects using GitHub in KarachiProjects using GitHub in Karachi🚀 Project Update: CloudPuff Sanctuary (Phase 2)
Project: CloudPuff Plushies — E-Commerce Experience
Role: Lead Full-Stack Engineer & UI/UX Product Architect
Milestone: Platform Release v1.2
Status: Completed & Live in Development
Stack: Next.js 15 · React 19 · TypeScript · Vanilla CSS · Web Audio API
📣 Milestone Overview
This milestone evolved CloudPuff Sanctuary from a visually engaging storefront into a more complete e-commerce experience with interactive shopping features, role-based dashboards, and seamless guest-to-account data synchronization.
The primary focus was on improving customer engagement, account architecture, security, personalization, and overall UX while keeping the codebase modular and performant.
Key Deliverables
Interactive storefront and custom plushie experience
Customer and administrator dashboard separation
Guest wishlist functionality with account synchronization
Enhanced authentication and admin security
Interactive shopping and personalization features
Responsive, lightweight frontend architecture
🧸 1. Interactive Storefront Experience
Built a highly interactive storefront designed around the brand's playful customer experience.
Key features include:
Interactive Plushie Customizer: Real-time customization of fur colors, aromas, accessories, and engraved tags.
Mood Matcher: Recommends plush companions based on the visitor's selected mood.
Size & Hug Comparison: Interactive visual comparisons to help customers understand product dimensions.
Cloud Hop Arcade: HTML5 Canvas mini-game with reward-based shopping incentives.
Adoption Certificates: Generates personalized post-purchase certificates with registry information and print/PDF-friendly formatting.
Web Audio Interactions: Custom audio feedback for selected UI interactions, product actions, and ambient experiences.
🛡️ 2. Dual-Persona Dashboard Architecture
The dashboard was restructured around two distinct experiences:
Customer Cuddle Hub
Profile and identity management
Orders and adoption registry
Wishlist
Billing and saved payment information
Notifications
Account/session management
Sanctuary Shop Command Center
Inventory management
Fulfillment and dispatch
Revenue and operational KPIs
Store governance
Administrative security
Customer-facing preview
Security & UX Improvements
Strict role-based access controls
Administrative features isolated from customer accounts
Dedicated TOTP/2FA management for administrators
Independent billing and notification sections
Device/session management
Cleaner navigation with deep-linked dashboard tabs
This keeps the customer experience simple while providing administrators with the tools they need to operate the platform.
💖 3. Guest-to-Account Wishlist Sync
A major focus of this milestone was removing friction from wishlist functionality.
Visitors can save products without creating an account first.
The system then:
Stores guest wishlist selections locally.
Preserves selections through registration/login.
Merges guest and account wishlists automatically.
Removes duplicate products during synchronization.
Updates open browser tabs through cross-tab events.
The authenticated dashboard then provides a dedicated wishlist experience with:
Saved products
Bulk "Adopt Whole Squad" cart action
Wishlist sharing
Product ratings
Direct shopping navigation
🛠️ Technical Architecture
Layer Technology Implementation Framework Next.js 15 App Router, dynamic routes, client components Frontend React 19 Modular component architecture Language TypeScript Strict typing across models, contexts and components Styling Vanilla CSS Semantic tokens, responsive layouts, themes Audio Web Audio API Custom UI sound synthesis State React Context Auth, Cart, Theme and Sound contexts Sync Browser Storage/Events Guest persistence and cross-tab synchronization
The implementation prioritizes modularity, type safety, performance, and minimal frontend overhead.
📊 Results
Improved Customer Experience
Guests can immediately save products without encountering an authentication barrier.
Better Operational Separation
Customers and administrators receive purpose-built interfaces with appropriate permissions and workflows.
Stronger Account Continuity
Wishlist data is preserved when users transition from guest browsing to registered accounts.
Lightweight Frontend
The custom CSS architecture avoids unnecessary UI-library overhead while maintaining responsive layouts and rich interactions.
Maintainable Codebase
Features are organized into reusable components, typed models, context providers, and isolated functionality to support continued development.
🔮 Next Development Opportunities
Planned enhancements include:
Automated SMS delivery notifications
Multi-currency support
AR-based plushie previews using WebXR
Further personalization and engagement features
This milestone establishes a stronger foundation for CloudPuff Sanctuary to evolve from an e-commerce storefront into a more personalized and interactive digital shopping platform. Created a high-end personal brand website for a performer, designed to showcase their craft with cinematic visuals, refined typography, and a bold hero section. The site highlights their reel, gallery, resume, and story in a way that feels polished, modern, and immersive.
Built to help them stand out professionally, increase bookings, and give casting directors a memorable, streamlined viewing experience.
https://actor-portfolio-website.netlify.app/ Grim Lens is a local-first malware intelligence and threat-hunting workbench I built for security teams that need to analyze evidence without sending sensitive samples to the cloud.
The platform ingests static artifacts such as PE metadata, strings, YARA matches, decoded configurations, PCAP summaries, and screenshots, then organizes them into investigation cases with risk scoring, enrichment, reporting, and cross-case intelligence.
I designed the system around a strict security boundary: no sample execution, no automatic uploads, and no outbound enrichment unless explicitly requested.
The backend is built in Rust using Axum, Tokio, SQLx, SQLite, YARA-X, and structured analysis modules, while the desktop interface is built with Avalonia/.NET 10 using MVVM and interactive charts.
Key engineering work included:
Local-first malware case management
Static PE analysis and entropy inspection
YARA rule matching and rule-pack management
Threat-intelligence enrichment using services such as VirusTotal, abuse.ch (http://abuse.ch), and AlienVault OTX
Rate limiting and TTL caching for external enrichment
Cross-case indicator correlation
Automated Markdown and PDF report generation
Risk distribution, family, and category dashboards
Rust REST API with structured validation and errors
SQLite-backed local storage and migrations
Cross-platform Avalonia desktop application
CI builds and packaged Windows/Linux releases
The result is a practical analyst workbench that turns scattered malware artifacts into a structured, searchable casebook while keeping control of sensitive data on the analyst’s own workstation. Starting a business is exciting — until you sit down to actually do it. You need a name. A logo. Something to post on social media. A price list. A website. Most people get stuck right there, staring at a blank page, and the idea dies before it starts.
Business in a Box fixes that. Type one sentence about your idea, and in under a minute you get a real, usable starting kit: a business name, a logo, a 30-day marketing plan, pricing, and website copy, built specifically for your idea, not a generic template. 🚀 Excited to share one of my latest web development projects: Wings of Wisdom – Modern Nobel Prize Platform.
I designed and developed a clean, responsive, and user-friendly web interface with a focus on performance, accessibility, and modern design principles.
Tech Stack: HTML5, CSS3, JavaScript, Bootstrap, PHP, MySQL
As a Full Stack Web Developer, I enjoy building responsive websites, dynamic web applications, and scalable backend solutions. I'm continuously improving my skills and creating projects that solve real-world problems.
Feedback and suggestions are always welcome! The Aesthetic Garage - Premium Automotive Detailing Website
Designed and developed a premium, conversion-focused website for The Aesthetic Garage, an automotive detailing and vehicle protection company serving Allentown, PA and surrounding areas.
The website was built to communicate a high-end automotive experience while making it easy for customers to explore services, view transformations, understand the detailing process, and request a quote or book an appointment.
The experience combines bold automotive visuals, strong typography, structured service content, social proof, and clear calls-to-action to turn visitors into potential customers.
Key features:
Premium automotive-focused visual design
Service showcase for ceramic coating, PPF, paint correction, and detailing
Interior & exterior detailing service pages
Portfolio and vehicle transformation gallery
Step-by-step detailing process
Customer reviews and social proof
Service-area coverage section
FAQ section
Free quote/contact form
Appointment booking CTA
Responsive design across devices
SEO-focused service and location content
Clear conversion-focused navigation
Goal: Create a professional digital presence that reflects the quality of the detailing service while helping local customers quickly discover services, build trust, and take action. 
