Projects using HTML5 in IslamabadProjects using HTML5 in IslamabadMarocana - Shopify Custom Theme Development
A custom Shopify theme I developed for Marocana, built to deliver a unique, high-converting online store tailored to the brand's identity. The theme features a clean, responsive design with custom product, collection, and checkout layouts optimized for a smooth shopping experience. Built with fast load times, SEO best practices, and seamless integration of Shopify apps and payment gateways. Delivered a polished, easy-to-manage store that stands out and is ready to sell.
Tags: Shopify, Custom Theme Development, E-commerce Development, Liquid, Responsive Design, Frontend Development, Store Customization, SEO Optimization, UI/UX Design StreamPro — Brand Website for a Live Event Broadcasting Studio
Live Website: saif-stream-pro-website.netlify.app (http://saif-stream-pro-website.netlify.app)
What I built😍
A fully responsive, mobile and web based single-page marketing website for StreamPro, a Brisbane-based live-streaming production studio that broadcasts memorial services, weddings, sports events, and community occasions. The site was designed and developed from scratch to establish a premium, trustworthy brand presence and convert visitors into booking inquiries — working seamlessly whether accessed from a phone, tablet, or desktop.
What it does🙌
The website guides visitors through a structured narrative — introducing the brand, building credibility, showcasing services, explaining the booking process, displaying social proof, and closing with a direct contact/quote form. It's built to load fast, adapt fluidly across mobile and web based environments, and feel as polished and reliable as the broadcast service it's selling.
Core concepts & techniques applied💯
Semantic document structure — content organized into meaningful, accessible sections rather than generic divs, improving both SEO and screen-reader usability.
Design system / design tokens — a centralized set of reusable variables (colors, gradients, typography, spacing) so the entire visual identity stays consistent and can be updated globally from one place.
Responsive, mobile-first layout design — fluid grids and breakpoints so the layout adapts smoothly across mobile and web based screens without needing separate versions.
Scroll-based interactivity — dynamic navbar states, scrollspy navigation (highlighting the active section as the user scrolls), and progressive scroll-reveal animations for content.
DOM manipulation & event handling — mobile menu toggling, animated statistic counters, and form interaction logic, all built with vanilla JavaScript (no frameworks).
Accessibility considerations — visible focus states, reduced-motion support for users sensitive to animation, and descriptive alt text on all imagery.
Brand identity integration — a custom 3D gradient logo mark and supporting visual graphics applied consistently across the navigation, hero section, and footer to reinforce brand recognition.
Conversion-focused UX — strategic placement of trust signals (stats, testimonials, direct phone contact) and a structured lead-capture form to turn visitors into inquiries.
Outcome🚀
A performant, framework-free static website that's lightweight, cheap to host, easy to maintain, fully mobile and web based responsive, and built entirely around fundamental web development principles — structure, styling systems, interactivity, accessibility, and conversion design. LuxeCart — Premium E-commerce Website
LuxeCart is a modern, premium e-commerce website built to create a polished online shopping experience for fashion, accessories, electronics, and lifestyle brands.
I designed and developed the frontend with a focus on premium UI/UX, responsive design, product discovery, conversion-focused layouts, and a smooth shopping journey across desktop and mobile.
What I Built
Modern e-commerce homepage designed for product discovery
Responsive product listing and category pages
Product cards with pricing, ratings, discounts, and wishlist actions
Category-based browsing and filtering
Interactive shopping cart with quantity controls
Responsive cart drawer for a seamless shopping experience
Dedicated checkout page with shipping selection
Dynamic order summary and total calculations
Mobile-first responsive layouts
Clean, modern typography and premium visual design
Demo checkout/payment interaction for portfolio purposes
The Experience
The shopping flow was designed around a simple conversion-focused journey:
Discover products → Browse categories → View products → Add to cart → Checkout
The goal was to make the interface feel luxurious and minimal while keeping the shopping experience intuitive and easy to use.
Why This Project
LuxeCart demonstrates how I turn an e-commerce concept into a production-style frontend experience with reusable components, responsive layouts, modern UI patterns, and a complete customer journey.
It showcases my experience with e-commerce website development, React frontend development, responsive web design, UI implementation, and modern shopping experiences.
Tech Stack
React · TypeScript · Tailwind CSS · Responsive Web Design · Modern UI/UX · E-commerce Development · AI-Assisted Development
Project Type
E-commerce Website · Frontend Development · UI/UX Design · Responsive Web Development
Looking for a Similar Website?
I can build modern, responsive e-commerce websites and online stores for startups, businesses, brands, and product-based companies — from product browsing and cart experiences to polished checkout flows.
Portfolio / Demo Project:
This is a concept project created for demonstration purposes. No real orders or payment transactions are processed. 
