Freelancers using CSS in Islamabad

Freelancers using CSS in IslamabadFreelancers using CSS in Islamabad

Projects People

Islamabad, Pakistan

Full-stack developer building high-impact web products.

$25k+: Earned

3x: Hired

5.0: Rating

51: Followers

Full-stack developer building high-impact web products.

Cover image for Shopify Store Customization Based on Figma Designs

Shopify Store Customization Based on Figma Designs

0

16

Cover image for AX3 Sonic – Your Podcast Hub for Teams & Audiences

$14K+ earned

AX3 Sonic – Your Podcast Hub for Teams & Audiences

2

48

Cover image for 1-800-FlyFish

1

31

Cover image for Fractional Property Ownership Web App

Fractional Property Ownership Web App

0

13

Rawalpindi, Pakistan

SaaS| Browser Extension Developer| Save Time with automation

New to Contra

SaaS| Browser Extension Developer| Save Time with automation

Cover image for Description
Pro Productivity is a Chrome

Description Pro Productivity is a Chrome extension designed to help users understand and improve their online habits. The extension automatically tracks the time spent on each website, providing detailed insights into daily browsing behavior. Users can create tasks, set focus timers, and receive reminders to stay productive throughout the day. The extension features real-time website activity tracking, task management, focus alarms, and productivity analytics in a clean and intuitive interface. By visualizing browsing patterns and tracking task progress, users can identify distractions, manage their time more effectively, and build better productivity habits. Key Features ✅ Website Time Tracking Automatically tracks time spent on every website. Displays real-time browsing activity. ✅ Task Management Create and manage productivity tasks. Monitor active and completed tasks. ✅ Focus Timers & Alarms Set custom focus sessions. Receive alerts when task timers expire. ✅ Activity Dashboard View browsing history and usage statistics. Analyze productivity trends over time. ✅ Clean User Interface Modern dark-themed design. Easy-to-use and distraction-free experience. Technologies Used React WXT Framework JavaScript Chrome Extension APIs Local Storage HTML5 CSS3 Problem Solved Many users underestimate how much time they spend online. Pro Productivity provides clear visibility into browsing habits while helping users stay focused on important tasks through time tracking and smart reminders. Results The extension enables users to: Track online activity accurately. Reduce distractions. Improve time management. Increase productivity through focused work sessions. Gain valuable insights into their daily digital behavior. Role: Full-Stack Chrome Extension Developer Project Type: Productivity & Time Management Tool Platform: Google Chrome Extension

1

40

Cover image for PromptVault AI is a Chrome

PromptVault AI is a Chrome extension I built that helps users generate, save, organize, and reuse high-quality AI prompts in seconds. The extension uses a guided question workflow where users answer a few simple questions and the AI crafts perfect prompts tailored to their specific needs. Key features I developed: AI-powered prompt generation for content creation, code generation, data analysis, and problem solving Guided multi-step question workflow to capture user intent Prompt Library & Storage to save and organize prompts One-click copy to use prompts anywhere instantly Keyboard shortcut support (Ctrl/Cmd) for power users Clean sidebar UI that works on any webpage Secure, private, and fast — no data leaves the browser Tech stack: React, JavaScript, Chrome Extension APIs, AI API integration, HTML/CSS

1

41

Cover image for PageMind AI is a Chrome

PageMind AI is a Chrome extension I built from scratch that brings AI-powered browsing capabilities directly into the browser. The extension allows users to interact with web page content using AI, summarize pages, ask questions, and get instant explanations without leaving the tab. Key features I developed: AI chat integration that understands and responds to page content Clean, responsive extension UI built with React and JavaScript Session tracking with counters for messages and interactions Sidebar panel that opens within any webpage seamlessly Secure and optimized for fast, lightweight performance Tech stack: React, JavaScript, Chrome Extension APIs, AI API integration, HTML/CSS

1

46

Cover image for Developed an automated trading bot

Developed an automated trading bot for Pocket Broker that enables users to customize key trading parameters such as trade duration and investment amount. The system executes trades in real time based on user-defined inputs, reducing the need for constant manual interaction. The bot is built with a focus on automation, consistency, and user control. It continuously monitors trading activity and operates according to predefined logic, helping streamline the execution process and improve efficiency. This project highlights my ability to design and build intelligent automation systems, handle real-time workflows, and create user-focused solutions with customizable controls.

1

47

Rawalpindi, Pakistan

Expert Website Designer: Boost Your Online Presence

Expert Website Designer: Boost Your Online Presence

Cover image for WordPress Website Design

WordPress Website Design

0

9

Cover image for Squarespace website design and development

Squarespace website design and development

0

14

Cover image for Dr. Calvin McDowall | Website Design & Development

Dr. Calvin McDowall | Website Design & Development

0

13

Cover image for Point Research & Marketing Agency | Custom website design

Point Research & Marketing Agency | Custom website design

0

8

Islamabad, Pakistan

Expert Custom Website Developer

1x: Hired

5.0: Rating

1: Followers

Expert Custom Website Developer

Cover image for Custom CRM For an Insurance Agency

Custom CRM For an Insurance Agency

0

22

Cover image for TIC Services: Webflow Website Development

TIC Services: Webflow Website Development

0

34

Cover image for Portfolio Website for Leonard Fom

Portfolio Website for Leonard Fom

0

30

Cover image for GoodDine - healthy food

GoodDine - healthy food

0

28

proRawalpindi, Pakistan

AI Architect | SaaS, Voice AI & Automation

9: Followers

AI Architect | SaaS, Voice AI & Automation

Cover image for Cyber Insurance & Security Threat Monitoring Portal

Cyber Insurance & Security Threat Monitoring Portal

0

7

Cover image for AI Instagram Comment Auto Reply System

AI Instagram Comment Auto Reply System

0

13

Cover image for Multi-Agent Client Onboarding System

Multi-Agent Client Onboarding System

0

5

Cover image for Heartly Matchmaking App Development

Heartly Matchmaking App Development

0

10

Muhammad Saifullah

Islamabad, Pakistan

Web Developer | UI/UX| 3D Product Animation |

9: Followers

Web Developer | UI/UX| 3D Product Animation |

Cover image for Savora — Food Delivery Landing

Savora — Food Delivery Landing Page Designed and developed "Savora," a modern food-delivery landing page concept, built with HTML, CSS, and JavaScript, using GSAP for scroll-triggered and interactive animations. Key features: Animated hero section — a 3D-style orbiting animation where signature dishes (pasta, soup, salad, dessert) circle a central hero plate, complete with layered steam/smoke effects and floating particles for a premium, cinematic feel Scroll-triggered reveal animations throughout the page using GSAP, giving each section a smooth fade/slide-in effect as the user scrolls Interactive Sign In / Sign Up modal with tabbed switching between forms, styled input fields (name, email, password with show/hide toggle, address, phone), a consent checkbox, and smooth open/close transitions Horizontal Menu Grid carousel — food item cards with images, titles, descriptions, and cart icons, complete with hover states and pagination dots Promotional "Stats & Download" section with a call-to-action button, styled to match the overall dark/gold brand palette Fully responsive layout with a cohesive dark-brown and gold color scheme designed to feel premium and appetite-appealing Got a project in mind? Let's build it — message me anytime.

0

112

Cover image for 🚨 Big reveal on the

🚨 Big reveal on the skyline! 🚨 I build custom, animated, and fully responsive portfolio websites — no templates, no shortcuts, 100% built from scratch. ✅ Custom design tailored to you ✅ Fully responsive (Mobile / Tablet / PC) ✅ Modern UI/UX with smooth animations Ready to unveil your own standout portfolio? Let's work together 👇 https://fiverr.com/createdbysaif

0

50

Cover image for 🖤 Velaro — Technical Architecture
🔗

🖤 Velaro — Technical Architecture 🔗 Live Website https://saif-velaro-clothing-brand.netlify.app 📌 Overview Velaro is a single-page application (SPA) for a fashion/clothing brand, built with React + TypeScript, bundled by Vite, and styled with Tailwind CSS. The entire UI renders on one HTML page and updates dynamically as the user scrolls, searches, or interacts with the cart — no full page reloads. The architecture follows a standard modern frontend pattern: a single entry point boots the app, a root App component composes independent section components, and a global context manages shared state (the shopping cart) across all of them. ⚙️ Build & Tooling Layer These files configure how the project compiles, lints, and runs — they aren't part of the visible website, but control everything behind it. vite.config.ts — Configures Vite, the build tool/dev server. Defines how .tsx/.ts files are compiled, how the dev server runs (npm run dev), and how the production bundle is generated (npm run build). tsconfig.json — Root TypeScript config — points to the two more specific configs below via project references. tsconfig.app (http://tsconfig.app).json — TypeScript rules specifically for the application code in src/ (JSX handling, module resolution, strictness, the @/ path alias). tsconfig.node.json — TypeScript rules for Node-context files (like vite.config.ts itself), since those run outside the browser. tailwind.config.js — Configures Tailwind CSS — defines the design system (colors, spacing, fonts) and which files Tailwind scans to generate only the CSS classes actually used. postcss.config.js — Configures PostCSS, the tool that processes Tailwind's output and applies vendor prefixing/optimization during build. eslint.config.js — Defines linting rules — catches code-quality issues, unused variables, and React/TypeScript best-practice violations during development. package.json — Lists all dependencies (React, Vite, Tailwind, etc.) and defines the npm scripts (dev, build, preview). package-lock.json — Locks exact dependency versions so the build is reproducible across machines. .gitignore — Tells Git which files/folders to exclude from version control (e.g. node_modules, dist). index.html — The single real HTML file. Contains a root <div> that React mounts into — everything else is injected by JavaScript. dist/ — Auto-generated production build output (plain HTML/CSS/JS) created by npm run build. This is the folder actually deployed to Netlify. node_modules/ — Auto-generated folder holding all installed dependencies (created by npm install, never edited manually). 🚪 Application Entry & Root src/main.tsx — The true entry point of the app. Imports React, imports App.tsx, and mounts it into the <div> inside index.html. This is the first application code that runs. src/App.tsx — The root component. Doesn't contain page content itself — instead it imports and arranges every section component (Navbar, Hero, About, etc.) in order, and wraps everything in the CartProvider so cart state is available app-wide. src/index.css — Global stylesheet — imports Tailwind's base/utility layers, applied once at the root so every component can use Tailwind classes. src/vite-env.d.ts — TypeScript type declarations for Vite-specific features (like importing images/CSS as modules) — lets TypeScript understand syntax that isn't standard JavaScript. 🛒 State Management src/cart.tsx — Implements the CartProvider, a React Context that holds global cart state (items, quantities, totals) and exposes functions to add/remove items. Any component wrapped inside it (via App.tsx) can read or update the cart without prop-drilling. src/data.ts — Static data module — likely product listings, collection info, or other content consumed by components like FeaturedCollection and Showcase, kept separate from UI logic. 🧱 Component Layer (src/components/) Each file is a self-contained, single-responsibility UI section. App.tsx stacks them vertically to form the full page. Navbar.tsx — Persistent top navigation — branding, menu links, and likely triggers for search/cart. Hero.tsx — The primary landing banner — headline, tagline, and call-to-action (e.g. "Shop Collection"). HeroCanvas.tsx — A visual/animated layer paired with Hero.tsx — likely a canvas-based or decorative background effect behind the hero text. FeaturedCollection.tsx — Renders a curated set of products, pulling structured data from data.ts. About.tsx — Brand-story section — static content describing the label's identity. Lookbook.tsx — A style/editorial gallery — visually presents outfits or campaign imagery. Showcase.tsx — An additional highlight section, likely for a specific collection, drop, or promotional content. Testimonials.tsx — Displays customer reviews/social proof. Newsletter.tsx — Email capture form/section for marketing signups. SearchOverlay.tsx — A modal/overlay component for in-site product search, toggled from the Navbar. CartDrawer.tsx — A slide-out panel UI that reads from the CartProvider (cart.tsx) to display current cart items and totals. Footer.tsx — Bottom-of-page section — links, contact details, social icons. 🔄 How It All Connects (Data Flow) The browser loads index.html, which pulls in the compiled JS bundle. main.tsx runs first and mounts App.tsx into the page. App.tsx wraps all sections in CartProvider, so cart state is shared without passing props down manually through every component. Each section component renders independently — some are purely static/presentational (About, Footer), while others are interactive and tied into shared state (CartDrawer, SearchOverlay). Tailwind classes used throughout every component are compiled once into index.css based on what's scanned via tailwind.config.js. On npm run build, Vite compiles and bundles all of this into optimized static files inside dist/ — which is what gets deployed to Netlify and served to visitors. 🧠 Why This Structure Works Separation of concerns — each component owns one visual section; layout composition happens only in App.tsx. Centralized state — cart logic lives in one file (cart.tsx) instead of being duplicated across components. Data/UI separation — data.ts keeps content separate from rendering logic, making it easy to update products without touching component code. Type safety — TypeScript configs enforce consistent typing across the whole src/ folder, catching errors before runtime. Optimized output — the dev-only tooling (Vite, Tailwind, ESLint, TS configs) never ships to production; only the final compiled dist/ bundle is deployed.

0

55

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.

0

99

Rawalpindi, Pakistan

Frontend Developer / React / Vue / Next / Angualr / HTML&CSS

New to Contra

Frontend Developer / React / Vue / Next / Angualr / HTML&CSS

Cover image for A modern and responsive personal

A modern and responsive personal portfolio website designed to showcase professional experience, skills, projects, and services in a clean and engaging way. I focused on creating a polished frontend experience with responsive layouts, intuitive navigation, modern UI components, and a structure that makes it easy for visitors to explore the developer's work and get in touch. The website was built with a strong focus on responsive design, maintainable frontend code, and a smooth experience across different screen sizes. Key Focus Modern personal portfolio design Responsive web layout Project showcase Professional developer presentation Clean and reusable UI Mobile-friendly experience Contact and conversion-focused sections Tools & Technologies React · JavaScript . HTML5 & CSS3 Live Website https://my-portfolio-691fb.web.app/

0

164

Cover image for LuxeCart — Premium E-commerce Website
LuxeCart

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.

0

50

Cover image for Modern Responsive Website for a

Modern Responsive Website for a Welfare Organization Designed and developed a modern, responsive website for a welfare organization, focused on creating a professional digital presence and making important organizational information easy to discover. The website features a clean and structured interface for presenting the organization’s team, leadership, programs, supporters, transparency information, and mission. The team page provides a clear overview of the people behind the organization and their respective roles. What I worked on Modern and responsive web design Professional frontend development Mobile-first layouts across different screen sizes Team and leadership sections Structured content and intuitive navigation Clean typography, spacing, and visual hierarchy Reusable UI sections and maintainable frontend structure User-focused experience for nonprofit and organizational content Project Focus Frontend Development · Responsive Web Design · UI/UX · Website Development · Modern Web Interfaces This project demonstrates my ability to turn organizational requirements into a clean, responsive, and professional website that builds trust and communicates information effectively. Role: Frontend Developer

0

83

Cover image for 🚀 I just launched my

🚀 I just launched my first website template on Contra! Meet Startup Sparkle — a modern SaaS website template built with React, TypeScript, and Tailwind CSS. Designed for startups, SaaS businesses, agencies, and modern products, with responsive layouts, reusable UI components, landing pages, pricing sections, authentication pages, and dashboard interfaces. 🎨 Modern Web Design ⚡ Responsive Frontend 💻 React + TypeScript 🚀 SaaS / Startup Template 📱 Mobile-Friendly UI This is my first template release, and I'm excited to finally share it! 👉 Check it out and get the template on Contra: https://contra.com/products/W5vpYh6L-solaris-modern-saa-s-react-website-template #React #SaaS #WebsiteTemplate #WebDesign #TypeScript

0

176

Muhammad Dilshad Khaliq

Islamabad, Pakistan

Webflow Expertise: Figma to Custom Code Solutions

Certified Partner

Webflow Expertise: Figma to Custom Code Solutions

Cover image for Stair Builder and Price Calculator Webflow

Stair Builder and Price Calculator Webflow

0

29

Cover image for Figma to Webflow [Getspot]

Figma to Webflow [Getspot]

0

28

Cover image for JoinDaisy Landing Pages and Website Maintenance

JoinDaisy Landing Pages and Website Maintenance

0

28

Placeholder project card media

View more →