Freelancers using Notion in Wah Cantt

Freelancers using Notion in Wah CanttFreelancers using Notion in Wah Cantt

Projects People

proIslamabad, Pakistan

Product design + high-converting website design

5.0: Rating

34: Followers

Product design + high-converting website design

Cover image for Designing a 0→1 web app for learners & enterprise clients

Designing a 0→1 web app for learners & enterprise clients

1

6

Cover image for Restaurant & hospitality website design

Restaurant & hospitality website design exploration. An independent concept I explored on how thoughtful branding, visual hierarchy, and digital experience design can elevate hospitality brands online. The project focused on visual storytelling, menu presentation, and responsive user experience (UX). The goal was to create a modern digital experience that captures the restaurant's atmosphere while making it easy for visitors to explore the menu, learn about the brand, and take action. Designed in @Figma (https://contra.com/company/figma) and developed in @Webflow (https://contra.com/company/webflow)

2

3

324

Cover image for SaaS App Design: AI-Powered Career Advisory - Web & mobile

SaaS App Design: AI-Powered Career Advisory - Web & mobile

2

16

Cover image for Website Redesign for AI SaaS Company

Website Redesign for AI SaaS Company

2

14

Abdul Rauf Khan

Rawalpindi, Pakistan

Full-Stack Developer | Agentic AI Engineer | Framer Expert

Full-Stack Developer | Agentic AI Engineer | Framer Expert

Cover image for AI-Powered SaaS Platform Development for Saasleek

AI-Powered SaaS Platform Development for Saasleek

0

6

Cover image for Interactive Portfolio Landing Page

Interactive Portfolio Landing Page

0

4

Cover image for Development of Finvoit SaaS Platform

Development of Finvoit SaaS Platform

0

8

Cover image for Responsive Website Design for Automatix

Responsive Website Design for Automatix

0

9

Islamabad, Pakistan

Brand & Product Designer for Startups

$1k+: Earned

2x: Hired

5.0: Rating

5: Followers

Brand & Product Designer for Startups

Cover image for EduCore, Education App Design
EduCore is

EduCore, Education App Design EduCore is an education app designed to give students a simpler and more organized way to learn, manage their courses, and keep track of their progress. The Challenge The existing learning experience had a lot of information competing for attention. Students had to move through different sections to find courses, lessons, progress, and other important resources. The main challenge was to make the experience feel simple without removing the features students actually needed. My Approach I started by looking at the overall user journey and identifying where the experience could be simplified. I focused on understanding what students need most when they open the app and how quickly they can get to their learning content. From there, I worked on the information structure, user flows, navigation, and overall interface. The Solution I redesigned the experience around the student's main goals. The navigation was simplified so important sections were easier to access. Content was organized into clear sections, making courses and lessons easier to discover. I also created a cleaner visual system to make the interface easier to scan and understand. The UI was designed to feel modern and engaging while still keeping the focus on learning. Product Design I worked across the complete product experience, including: • User flows • Information architecture • Navigation • Wireframes • UI design • Course and lesson experience • Progress tracking • Visual design system • Responsive screen design • Interactive prototypes The Result The final experience is cleaner, easier to navigate, and more focused on the student's actual needs. Instead of making students figure out where to go next, the product guides them naturally through their learning journey. For me, the goal was not just to make the app look better. It was to make the product easier to understand and more enjoyable to use.

2

284

Cover image for Folder Animation

Folder Animation

1

12

Cover image for Motion experiment with playful interactions

Motion experiment with playful interactions

1

15

Cover image for Modern Energy Card Animation

Modern Energy Card Animation

1

55

Muhammad Saifullah

Islamabad, Pakistan

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

12: Followers

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

📐 BRAND STRATEGY — CASE STUDY ⚙️ Koia Objects: Making the Photography Match the Positioning Goal: Closing the gap between what Koia Objects makes and how it is seen — using photography as the proving ground for the brand's design logic. 📸✨ 1. 🎯 The Brief Koia Objects is a Swedish stainless steel tableware and serving brand, two years in, with a design sensibility that sits deliberately between two traditions: 🏛️ Bauhaus Rationalism (Mies van der Rohe): Form follows function & industrial precision. 🌿 Nordic Warmth (Alvar Aalto): Human-centric design that keeps precision warm rather than cold. 💰 The Positioning: Accessible Premium — not luxury, not budget, but a fair price for genuine material quality and craftsmanship. ⚡ The Challenge: This positioning has to be felt, not stated. It must be built into every decision the brand makes, starting with how the product is photographed. 2. 🔍 The Diagnosis Most young premium tableware brands drift into one of two failure modes: 🚫 The Catalog Trap (Current State): Flat white backgrounds, even front-on lighting, centered objects. It looks like a cheap e-commerce listing and flattens the way light moves across brushed steel. 🚫 The Overcorrection (To Avoid): Dark moody backdrops, heavy gold rim-lighting, and fake luxury marble. It looks like an imitation of luxury watch ads and ignores both Bauhaus and Nordic roots. 💡 The Fix: Build a third direction grounded in Koia’s true design lineage rather than borrowed conventions. 3. ⚖️ The Design Logic Translating "Bauhaus Rationalism + Nordic Warmth" into 5 concrete photographic principles: 🏷️ Principle🖼️, What It Means in a Photograph🛠️ Function, Visible Show the object doing its job (pouring, serving, being held). Function is the whole premise.✨ Material Honesty Real ,directional light on real steel. Let reflections show weight and precision without over-retouching.🪵 Restraint in Styling Few, purposeful props (raw wood, linen, stone). Nothing on set unless it earns its place.☀️ Warm Directional Light .Soft daylight or a single warm key light instead of flat, cold studio flashes.🏡 Grounded Negative Space, Generous breathing room on a real surface (table, hand, counter) — never a void. 4. 🎬 The Direction, Made Concrete 📋 Shot List 🖼️ Hero Shot: The object alone on a real surface (oiled wood, honed stone) with soft single-direction daylight. 💧 In-Use Shot: The object mid-function (pouring water, serving food, lifted by a hand). 🔍 Material Macro: A tight crop on an edge, weld line, or brushed surface to prove craftsmanship. 🍽️ Grounded Flat Lay: The product with 2–3 purposeful props (linen, raw ceramic, cut citrus) and generous breathing room. 5. 🔄 Before / After — Case Study 🏺 Object: Stainless Steel Serving Pitcher ❌ BEFORE (Catalog Default): Shot dead-on against a white seamless background with flat lighting. The steel looks flat, generic, and cheap. ✅ AFTER (Koia Direction): Shot at a slight angle on an oiled walnut counter, lit by soft side daylight. Highlights catch the spout, shadows add depth, and water is captured mid-pour into a glass. 🌟 Why It Works: Highlights prove the metalwork quality, the pour proves function, and the warm wood adds Nordic cozy vibes without clutter! 6. 📈 Why This Matters Commercially 🏷️ Shifts Value Perception: Replaces price comparison with craftsmanship appreciation ("This is clearly better made"). 📦 Scalable Framework: The 5 principles extend directly to packaging, website UI, and social content as the brand scales. Prepared as an example project — Koia Objects Brand Strategy Engagement. 🚀

1

167

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

74

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

77

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

162

Islamabad, Pakistan

Growth Marketer with Analytics Expertise

Growth Marketer with Analytics Expertise

Cover image for Amplitude Analytics Implementation & Dashboard

Amplitude Analytics Implementation & Dashboard

0

30

Cover image for Mixpanel Analytics Implementation & Dashboard

Mixpanel Analytics Implementation & Dashboard

0

24

Cover image for Google Analytics 4 Setup & Dashboard

Google Analytics 4 Setup & Dashboard

0

18

Placeholder project card media

View more →

Rawalpindi, Pakistan

Historical Scriptwriter & Cinematic Engine Producer

New to Contra

Historical Scriptwriter & Cinematic Engine Producer

Cover image for Contributed critical research, local context,

Contributed critical research, local context, translation, and field coordination for a multi-part documentary series filmed in Pakistan by an international visiting production team (Project Happiness). The collaborative efforts directly shaped the visual narratives and localized accuracy of the content, leading to more than 3 million collective views across three high-impact videos—including the widely recognized "Sewer Men" and "Kalash Tribe" documentaries. My Key Responsibilities: On-Ground Field Coordination: Managing operational logistics, interviews, and cultural liaisoning for the international production crew. Rigorous Field Research & Translation: Performing real-time translation and providing deep regional, historical, and socio-cultural context to ensure absolute narrative authenticity. Creative Collaboration: Contributing actionable insights to conceptual and story structure discussions during pre-production and active shooting phases.

0

37

Cover image for Contributed critical research, local context,

Contributed critical research, local context, translation, and field coordination for a multi-part documentary series filmed in Pakistan by an international visiting production team (Project Happiness). The collaborative efforts directly shaped the visual narratives and localized accuracy of the content, leading to more than 3 million collective views across three high-impact videos including the widely recognized "Sewer Men" and "Kalash Tribe" documentaries. My Key Responsibilities: On-Ground Field Coordination: Managing operational logistics, interviews, and cultural liaisoning for the international production crew. Rigorous Field Research & Translation: Performing real-time translation and providing deep regional, historical, and socio-cultural context to ensure absolute narrative authenticity. Creative Collaboration: Contributing actionable insights to conceptual and story structure discussions during pre-production and active shooting phases.

0

38

Cover image for Provided comprehensive historical research, narrative

Provided comprehensive historical research, narrative scriptwriting, and custom virtual cinematic footage (Total War engine capture) for Epic Histories, a popular digital educational channel specializing in ancient and medieval military campaigns. My hybrid workflow translated dense primary sources into highly engaging, chronologically paced visual video essays. My Production & Research Methodology: Tactical Campaign Research: Executing deep-dive comparative source analysis covering complex pre-modern operations, including detailed breakdowns of the Battle of Yarmouk and the Siege of Ctesiphon. Turnkey Gameplay Cinematography: Choreographing and capturing multi-angle, large-scale tactical battle sequences within the Total War engine. This aligned perfectly with the narrative timeline, cutting asset generation times for the channel's video editors by half. High-Retention Narrative Structures: Formatting scripts around visual cues, curiosity-led hooks, and explicit pacing notes designed specifically for modern digital media formatting.

0

38

Cover image for Platform Overview
I am the sole

Platform Overview I am the sole founder, lead researcher, and scriptwriter behind Bring Me Total War, an independent digital educational channel focused on ancient and medieval military history, tactical campaigns, and structural timelines. The platform has successfully secured over 315K+ total views through highly accurate, long-form content. My Production & Research Methodology: Comparative Source Analysis: Managing 2.5-day intensive deep-dive research cycles per video essay, cross-referencing multiple primary and secondary sources to isolate historical facts from narrative biases. Responsible AI-Integration: Leveraging advanced LLM workflows to parse mass texts, synthesize initial notes, and cross-examine disputed historical claims while maintaining independent verification. Cinematic Pre-Visualization: Designing structured, 10–20 minute curiosity-led scripts optimized with precise, multi-angle camera directions and game-engine choreography (Total War) to keep audience retention exceptionally high. Channel Link: https://www.youtube.com/@BringMeTotalWar

0

38

Choudhary Abubakar

Wah Cantt, Pakistan

Student at University of Engineering and Technology, Taxila

5.0: Rating

4: Followers

Student at University of Engineering and Technology, Taxila

Cover image for EcoTrack Mobile App Development

EcoTrack Mobile App Development

2

5

Cover image for FlowKit AI SaaS Website Design

FlowKit AI SaaS Website Design

2

5

Cover image for Mindora Mental Wellness Platform Design

Mindora Mental Wellness Platform Design

2

10

Placeholder project card media

View more →

Rawalpindi, Pakistan

Policy Researcher & Geopolitical Analyst

New to Contra

Policy Researcher & Geopolitical Analyst

Cover image for Developed a client-commissioned research report

Developed a client-commissioned research report analyzing Kazakhstan's domestic political reforms, with a focus on governance, institutional change, and the country's evolving political environment. The project required rigorous secondary research, source verification, and the synthesis of complex political developments into a clear, evidence-based report. Working collaboratively with the client, I incorporated multiple rounds of revisions to refine the analysis and ensure the final deliverable aligned with their objectives. The completed report demonstrates my expertise in policy research, political analysis, and producing professional reports for clients seeking actionable, well-supported insights.

1

131

Cover image for I was commissioned to produce

I was commissioned to produce a publication-ready geopolitical analysis, I researched and wrote an in-depth article examining, "The return of the Monroe Doctrine and its impact on U.S. strategic dominance in Latin America." By combining rigorous secondary research with evidence-based analysis, I transformed complex international developments into a clear, compelling narrative for a policy-focused audience. Following client review, I refined the article through multiple revisions, delivering a polished final piece that met professional editorial standards and demonstrated expertise in international relations, strategic affairs, and geopolitical risk analysis.

1

172

Cover image for These projects involved writing publication-ready

These projects involved writing publication-ready analytical book reviews of George Orwell's 1984 and Sun Tzu's The Art of War for The Opinion Desk. Rather than providing simple summaries, the reviews explored each work's lasting influence on political philosophy, governance, strategy, and international relations. By combining critical analysis, historical context, and evidence-based writing, I produced engaging articles that connected timeless ideas to contemporary global challenges. The final deliverables showcased my ability to communicate complex concepts with clarity while maintaining an accessible and compelling narrative for readers interested in politics, strategy, and world affairs.

1

132

Cover image for I was commissioned as a

I was commissioned as a geopolitical press release writer for Global Geopolitical Insight (GGPI), producing publication-ready coverage of major power developments across the Americas from 19 April to 31 May. The role required continuous monitoring of international affairs, rapid verification of emerging events, and the ability to distill complex geopolitical developments into concise, engaging press releases under strict deadlines. By combining rigorous research with strategic communication, I delivered timely, accurate, and editor-ready content while incorporating revisions to meet the organization's editorial standards and public communication goals.

0

101