Freelancers using Visual Studio Code in Islamabad Capital TerritoryFreelancers using Visual Studio Code in Islamabad Capital Territory
ProjectsPeople
Muhammad Faizan's avatar
Muhammad Faizan
Islamabad, Pakistan
AI-native Full Stack Mobile Engineer
$10k+
Earned
6x
Hired
5.0
Rating
27
Followers
AI-native Full Stack Mobile Engineer
Cover image for .NET MAUI Developer for Mobile Application
.NET MAUI Developer for Mobile Application
3
25
Cover image for DawoHub - Apps on Google Play
DawoHub - Apps on Google Play
1
55
Cover image for Easy QR Attendance
Easy QR Attendance
1
13
Cover image for Icon Source
Icon Source
1
22
Visual Studio Code(5)
Khakan Hayder's avatar
Khakan Hayder
proIslamabad, Pakistan
Framer Expert
$1k+
Earned
1x
Hired
5.0
Rating
13
Followers
FRAMER_EXPERT

expert

Framer Expert
Cover image for ✦ MILESTONE → My first
✦ MILESTONE → My first plugin, Framemap, is now live on the official Framer Marketplace. 🔗 https://www.framer.com/marketplace/plugins/framemap/ WHAT FRAMEMAP DOES You describe your project in two sentences. Claude generates a complete responsive wireframe set — mobile (390px), tablet (834px), and desktop (1440px) — and drops it on your Framer canvas as fully editable frames. What used to take an hour of blank-canvas friction now takes seconds. WHAT'S INSIDE v1 → 23 section types — hero, features, bento grid, pricing, testimonials, FAQ, CTA, team, blog, gallery, contact, and more → Multi-breakpoint output in a single click → 4 style presets — SaaS, Agency, E-comm, Minimal → Drag-to-reorder before committing to canvas → Convert any section to native, editable Framer frames → BYO Anthropic API key — keys stay local, generations cost fractions of a cent 🟢 FREE during v1 — v2 will be paid. Anyone reading this can install it today at no cost. That window closes when v2 ships. WHY THIS MATTERS FOR CLIENTS HIRING ME The same depth that goes into a marketplace-reviewed plugin goes into every Framer project I deliver. I don't just drag components — I understand the platform from the API up, including its limits. Marketplace approval is Framer's own quality stamp. WHAT I'M OPEN TO RIGHT NOW → Framer site builds (landing pages, full marketing sites, portfolios) → Custom Framer plugins for your team or product → Product design for SaaS, agencies, and indie founders → Template & system work Currently booking 2–3 slots for the rest of this month. If you've been sitting on a Framer project, this is a good month to start. 📩 khakan@vconekt.com (mailto:khakan@vconekt.com)🌐 vconekt.com (http://vconekt.com)🔗 https://www.framer.com/marketplace/plugins/framemap/
1
118
Cover image for MoneyDays Currency Exchange
MoneyDays Currency Exchange
0
2
Cover image for Nordic Nexuz Conversion Website Design
Nordic Nexuz Conversion Website Design
0
0
Cover image for New template launch: TORVYN 🚀 Yesterday
New template launch: TORVYN 🚀 Yesterday I shipped my latest Framer template, and this one is for the people I know best: agencies. After building sites for dozens of agency clients at Vconekt, I kept seeing the same pattern. Agencies are great at selling their clients' work and terrible at selling their own. Their portfolio is a Notion doc, their pricing is "DM us," and their site was last updated two rebrands ago. TORVYN fixes that in an afternoon: ✦ 9 complete pages: home, about, work, services, pricing, news, contact and more ✦ Project showcase powered by the Framer CMS, so adding a case study takes minutes ✦ A news blog to keep the site alive between projects ✦ Deep indigo design with confident typography and buttery Lenis smooth scrolling ✦ Fully responsive and launch-ready Built for full-service agencies, small studios, and solo designers who want to look established from day one. Live now on the Framer Marketplace for $39: framer.com/community/marketplace/templates/torvyn And if you want it customised to your brand, that's literally what we do. My inbox is open.
1
73
Visual Studio Code(1)
Muhammad Saifullah's avatar
Muhammad Saifullah
Islamabad, Pakistan
Flutter Developer | AI & Web Solution | AD Designer
8
Followers
Flutter Developer | AI & Web Solution | AD Designer
Cover image for ShopVerse is a modern, high-performance
ShopVerse is a modern, high-performance iOS e-commerce application built using Swift (SwiftUI) and powered by Firebase as its backend infrastructure. 🏛️ System Architecture: MVVM Pattern The application is structured around the Model-View-ViewModel (MVVM) architecture to guarantee clean separation of concerns, high maintainability, and testability across both customer and administrator workflows. 1. The Model Layer The Model layer consists of lightweight, immutable data structures conforming to Swift's Codable and Identifiable protocols. Product Model: Stores product details such as unique IDs, titles, descriptions, pricing, stock levels, rating summaries, and array paths for high-resolution images stored in the cloud. Order Model: Captures transaction details including item snapshots, delivery addresses, customer identification, pricing breakdowns, and status states (Pending, Packed, Shipped, Delivered, or Cancelled). User & Cart Models: Manage profile attributes, assigned roles (Customer or Admin), saved shipping addresses, and live active shopping cart items. 2. The View Layer Built declaratively using SwiftUI, the View layer handles everything rendered on the screen. Views remain strictly focused on layout rendering, animations, and capturing user interactions (e.g., button taps, pull-to-refresh gestures, and navigation transitions). Views do not contain business logic or direct database call implementations; instead, they observe state changes exposed by their corresponding ViewModels. 3. The ViewModel Layer ViewModels act as the reactive middleware between the data layer and UI screens. Utilizing @MainActor and @Published properties, ViewModels manage screen-specific states (e.g., loading spinners, active product filters, and checkout step validations). They process user input, execute asynchronous data operations via async/await, and automatically trigger UI redraws whenever data updates. 4. The Service Layer Encapsulated as injected singletons or protocols, services manage external network interactions. Handles low-level Firebase authentication triggers, Cloud Firestore read/write streams, image uploads to Firebase Storage, and payment gateway SDK integrations (e.g., Stripe or Apple Pay). 🔥 Firebase Backend Mechanics & Data Management Firebase serves as the serverless engine driving ShopVerse, enabling real-time database syncing, secure authentication, and scalable media storage. 1. Authentication & Role-Based Access Control (RBAC) Security and session management are handled through Firebase Authentication. Multi-Provider Auth: Supports native Email/Password credentials alongside one-tap sign-ins via Apple ID and Google accounts. Session Persistence: Authenticated tokens are stored securely in the iOS Keychain, allowing users to remain logged in across app restarts. Role Verification: Upon successful authentication, the system queries the user's Firestore profile document to check their role attribute. If designated as admin, the app routes the user to the store management dashboard; otherwise, it presents the primary shopping portal. 2. Cloud Firestore Database Structure Firestore operates as a real-time, NoSQL document-oriented database structured into clean top-level collections. 3. Offline Persistence & Caching Firestore's local disk caching mechanism is enabled during app launch. Uninterrupted Browsing: Product listings and cart states are cached locally on the device disk. If the device loses internet connection, users can still view products and manipulate their cart without app crashes or blank screens. Background Sync: Any state changes made offline are queued locally and automatically committed to the cloud database once connectivity is restored. 4. Real-Time Data Synchronization via Snapshot Listeners Instead of relying on traditional HTTP polling or manual screen pulls, ShopVerse utilizes Firestore addSnapshotListener connections. Live Order Tracking: When an administrator updates an order status in the admin portal (e.g., changing an order from Processing to Shipped), a persistent WebSocket listener pushes the updated state directly to the customer's device in real time, updating the UI timeline instantly. 📱 Advanced SwiftUI Concepts & Interactive UX Patterns To deliver a refined, native iOS user experience, ShopVerse incorporates several specialized SwiftUI and iOS framework capabilities. 1. Skeleton Loading Shimmer Effect Rather than displaying a generic activity indicator (ProgressView), ShopVerse uses a custom shimmer modifier during initial data fetches. Visual Continuity: Placeholder wireframe cards matching the dimensions of actual product cards are rendered instantly. Linear Gradient Wave: An animated gradient mask sweeps horizontally across the placeholder shapes, signaling active loading while maintaining visual context. 2. Tactile Feedback & Haptic Engine Integration To make digital interactions feel physical, ShopVerse leverages the device's Taptic Engine via UIImpactFeedbackGenerator. Action Reinforcement: Tapping the Add to Cart button, toggling a wishlist heart icon, or confirming a checkout step triggers precise physical haptic ticks, increasing user confidence during interactions. 3. Query Debouncing using the Combine Framework Unrestrained search fields can send dozens of unnecessary database queries while a user types, causing performance lag and inflated database read costs. The Debounce Pattern: Utilizing Combine's .debounce(for: .milliseconds(300)) operator, search queries are held in a reactive pipeline. Cost Optimization: Database search requests are only fired after the user pauses typing for at least 300 milliseconds, dropping all intermediate keystroke queries. 4. Administrative Data Visualization via Swift Charts The integrated Admin Portal transforms raw Firestore sales data into actionable visual insights using Apple's native Charts framework. Real-time Metrics: Aggregated sales figures, daily order totals, and revenue metrics are compiled into interactive bar charts and line graphs, allowing store managers to assess revenue trends dynamically.
0
106
Cover image for I made an AS FOOD
I made an AS FOOD ORDERING MOBILE APP using Reactive Native and Firebase. Bellow is Complete Guide😊 🛠️ Architecture & Tech Stack Frontend Framework: React Native (via Expo or React Native CLI) UI & Styling: NativeWind (Tailwind CSS) or React Native StyleSheet with custom dark/light theme tokens. Icons & Components: react-native-vector-icons (Lucide / Ionicons) & React Native Paper or custom components. Database & Auth: Firebase Firebase Authentication, Cloud Firestore (NoSQL Database), and Firebase Storage (for uploading food/category images). Navigation: @react-navigation/native with Bottom Tab Navigator (@react-navigation/bottom-tabs) and Stack Navigator. 🔐 1. Login Screen (Admin Authentication) Features & UI Components Fields: Email address and Password input fields with visibility toggle (eye icon). CTA: Gradient / Orange styled Sign In button. Footer: Copyright and portal title ("AS Foods © 2025 – Admin Portal"). Technical Implementation & Firebase Setup Firebase Auth Integration: Use signInWithEmailAndPassword(auth, email, password). Role-Based Security: Store admin UID/roles in a users collection in Firestore. Verify if role === 'admin' before allowing dashboard entry. State & Validation: React Hook Form or useState with validation (e.g., standard email regex and non-empty password checks). 📊 2. Dashboard Screen Features & UI Components Header Bar: Admin welcome banner ("Good Morning, Admin! 👋"), Live clock/timer badge, and Sign Out action button. Analytics Cards: Total Revenue (e.g., Rs 20171) Total Orders Count (12 Orders) Total Registered Users (4 Users) Total Food Menu Items (26 Foods) Visual Data: Weekly Orders Bar Chart showing day-by-day order trends (Mon–Sun). Technical Implementation & Firebase Setup Real-time Analytics Listener: Set up onSnapshot listeners on Firestore collections: orders collection: Sum up total price of completed/confirmed status orders for Revenue and total order counts. users collection: Read total count of registered clients. foods collection: Read total menu item count. Chart Integration: Use react-native-chart-kit or victory-native to render the weekly order dynamic bar graph linked to real-time order timestamps. 🍕 3. Foods Screen (Menu Management) Features & UI Components Search Bar & Quick Filters: Search food by name; filter tabs for All, Available, and Unavailable items. Action Header: Quick stats counters (Total, Active, Hidden) and an + Add button to create new menu items. Food Cards Grid: Image, title, price (PKR Rs 500.0), discount status, and quick action buttons (+ Add, - Remove, or toggle availability). Technical Implementation & Firebase Setup Firestore Data Structure (foods collection): JSON Image Storage: Firebase Cloud Storage via ref(storage, 'foods/image.jpg') and uploadBytes() / getDownloadURL(). Search & Filter: Local client-side array filter on fetched foods array using .filter(item => item.name (http://item.name).toLowerCase().includes(query)). 🏷️ 4. Categories Screen Features & UI Components Category Grid: Cards for categories like Appetizers, Chicken, Rice & Biryani, Wraps, Sides, and Beverages. Status Badges & Controls: Quick count of active vs inactive categories, toggle switches, and deletion/edit modal actions. Technical Implementation & Firebase Setup Firestore Data Structure (categories collection): JSON Category-Food Mapping: Link category IDs directly into the foods collection documents for relational querying. 📦 5. Orders Screen Features & UI Components Order Filter Pills: Filter by All, Pending, Confirmed, Delivered, or Cancelled. Order List Cards: Order Hash ID, Customer/Delivery info address, total order amount, timestamp, and colored status pill badges (Yellow = Pending, Green = Confirmed, Red = Cancelled). Sign Out Confirmation Dialog: Modal overlay asking to confirm user logout. Technical Implementation & Firebase Setup Firestore Data Structure (orders collection): JSON Status Updates: Admin tap actions update order state using updateDoc(doc(db, "orders", orderId), { status: "Confirmed" }). Real-time Push Notifications: Firebase Cloud Messaging (FCM) trigger to notify delivery partners or users when an order status changes. 🚀 Step-by-Step Development Roadmap Project Setup: Initialize React Native project with Expo/CLI & install dependencies (react-navigation, @react-native-firebase/app, @react-native-firebase/auth, @react-native-firebase/firestore). Firebase Config: Initialize Firebase SDK in firebaseConfig.js with your Web/Android/iOS API keys. Navigation & Theme: Configure BottomTabNavigator with custom icons and dark mode styling matched to the dark orange interface theme. Auth Flow: Build sign-in screen and wrap main tab screens in an onAuthStateChanged auth gate listener. Firestore Realtime Hooks: Connect screens with real-time listeners (onSnapshot) to reflect live orders and menu management instantly.
0
102
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
8
Cover image for StreamPro — Brand Website for
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
23
Visual Studio Code(2)
Pir Ahsan Raza's avatar
Pir Ahsan Raza
Islamabad, Pakistan
Automation Engineer | n8n | Voice Agent | Python | Web dev
New to Contra
Automation Engineer | n8n | Voice Agent | Python | Web dev
Cover image for Got verified on n8n Cloud.
Got verified on n8n Cloud. plausible is now live and searchable directly from the canvas. Thanks to the n8n (https://www.linkedin.com/company/n8n/) team for building an open ecosystem worth contributing to. #n8n (https://www.linkedin.com/search/results/all/?keywords=%23n8n&origin=HASH_TAG_FROM_FEED) #automation (https://www.linkedin.com/search/results/all/?keywords=%23automation&origin=HASH_TAG_FROM_FEED) #plausible (https://www.linkedin.com/search/results/all/?keywords=%23plausible&origin=HASH_TAG_FROM_FEED) #opensourcetools (https://www.linkedin.com/search/results/all/?keywords=%23opensourcetools&origin=HASH_TAG_FROM_FEED)
1
84
Cover image for Identified a server side discount
Identified a server side discount enforcement vulnerability in Name.com (http://Name.com)'s GitHub Student Pack integration. Developed a PoC confirming unlimited free domain redemptions post-OAuth verification.
1
17
Cover image for Built a complete On-boarding pipeline
Built a complete On-boarding pipeline + Match Alert for Investors and Founders and Mail Hot leads directly to CEO of Owlvest. Workflow on n8n, stored all data in google sheets, form was built with tally.so.... #n8n #Automation
1
47
Cover image for Just finished Webflow project for
Just finished Webflow project for @Greydots!
1
48
Visual Studio Code(1)
SALIKYN ZERO's avatar
SALIKYN ZERO
Islamabad, Pakistan
Full-Stack Web, Mobile & Backend Systems Architect , gamedev
New to Contra
Full-Stack Web, Mobile & Backend Systems Architect , gamedev
Cover image for Build a custom 2D isometric
Build a custom 2D isometric game prototype featuring dynamic tilemap rendering, player movement mechanics, and object entity collision handling. Key Highlights: Isometric Rendering Engine: Built custom coordinate translation for smooth 2D isometric grid layout and depth sorting. Player & State System: Implemented responsive character movement controllers, directional sprite animations, and object interaction routines. Asset & Tile Architecture: Integrated modular environment tilesets, tree generation logic, and asset loading pipelines. Realm2D - Isometric 2D Game & RPG Prototype Tech Stack: Java, LibGDX / Custom 2D Engine, Game Architecture, OOP, Tilemap Logic.
1
112
Cover image for SALIKYN ZERO - Agency Web
SALIKYN ZERO - Agency Web Portal Deployed the official web application for SALIKYN ZERO Studio. Designed to showcase digital software engineering services with a modern dark-mode aesthetic, blazing-fast edge performance, and interactive client conversion pipelines. Key Highlights: Ultra-Fast Global Delivery: Deployed on edge infrastructure for near-instant site loading. Interactive UI/UX: Built with modern layout dynamics, smooth interactions, and responsive design across all devices. Form & Contact : Integrated dynamic client communication pipelines for instant lead delivery. Tech Stack: Modern Web Frontend, Cloudflare Pages/Workers,React & vite, Git. 😊
1
120
Cover image for High-Converting AI E-Commerce Ad: Hydration
High-Converting AI E-Commerce Ad: Hydration Serum Problem: Traditional studio shoots for beauty/cosmetic products are expensive ($3,000+ per shoot) and slow, making it difficult for e-commerce brands to rapidly test multiple video ad hooks on TikTok and Meta. Approach: Created a end-to-end AI visual production pipeline. Generated hyper-realistic macro liquid physics, skin textures, and product lighting using Nano Banana Pro and Leonardo, added camera motion using Kling 3.0, and synced ElevenLabs voiceovers with high-impact 3-second hook variations. Result: Cut visual production cost by 80% while delivering cinematic, 4K-ready video ad assets optimized for scroll-stopping retention and rapid A/B testing. Stack: Nano Banana Pro, Leonardo.ai (http://Leonardo.ai), Kling 3.0, Seedance 2.0, ElevenLabs, CapCut Need high-converting AI video ads for your e-commerce brand? Check out my AI Video Creation Service or send us a message.
0
31
Cover image for Cinematic AI Product Reel: Minimalist
Cinematic AI Product Reel: Minimalist Tech Ring Problem: Hardware and SaaS startups often struggle to explain complex product functionality and premium aesthetics visually within the first 3 seconds of a social video ad feed. Approach: Designed dynamic glassmorphism UI overlays and 3D environment transitions. Utilized Flux and Leonardo for studio lighting consistency, Seedance 2.0 / Kling 3.0 for sweeping anamorphic camera motion, and Claude for narrative prompt generation. Result: Produced a sleek product showcase with high visual polish, zero physical manufacturing overhead, and native social-feed retention pacing. Stack: Leonardo Phoenix, Kling 3.0, Seedance 2.0, Gemini Pro, ElevenLabs,Claude Looking for cinematic AI video reels that stop the scroll? View my AI Video Service to discuss your product reel.
0
37
Visual Studio Code(2)
Kamran Akhlaq's avatar
Kamran Akhlaq
Islamabad, Pakistan
Web Developer Building Fast, Custom Websites & Tools.
New to Contra
Web Developer Building Fast, Custom Websites & Tools.
Cover image for CronShieldLabs.com (https://CronShieldLabs.com) - A SaaS
CronShieldLabs.com (https://CronShieldLabs.com) - A SaaS Monitoring Platform I designed and developed CronShieldLabs.com as a lightweight SaaS platform that helps developers, agencies and online businesses detect silent failures across their digital services. The platform combines five monitoring functions within one secure dashboard: cron heartbeat monitoring, website uptime and response-time checks, SSL certificate tracking, domain-expiry monitoring and DNS-change detection. Users can create and manage monitors, review historical results and receive failure, recovery and expiry notifications. I developed the application using PHP, MySQL/MariaDB, HTML and CSS, with scheduled server-side processes handling automated checks. The architecture includes secure authentication, account-based data isolation, CSRF protection, prepared database queries, rate limiting and private configuration stored outside the public website directory. CronShieldLabs.com also includes Free, Pro and Business subscription plans, manual Binance Pay verification, an administrator dashboard, registered-user management and service limits based on each customer’s plan. A major technical consideration was securing website checks against private-network access and unsafe redirects. The platform validates public destinations, blocks private and reserved addresses and rechecks redirect targets before connecting. The project was designed as a cost-efficient shared-hosting MVP with a clear expansion path. Future opportunities include branded public status pages, API and keyword monitoring, Telegram and webhook alerts, team accounts, incident management, multi-location checks and automated subscription billing. CronShieldLabs.com demonstrates my ability to design a complete SaaS product from public marketing pages and secure authentication to database architecture, background monitoring processes, payment workflows and future commercial planning. Website: https://cronshieldlabs.com
0
41
Cover image for AskTechDigital.com (http://AskTechDigital.com) is a lightweight
AskTechDigital.com (http://AskTechDigital.com) is a lightweight technology platform combining two complementary services: an automated technology-news discovery feed and a collection of practical browser-based utilities. The news section organizes current developments across software, artificial intelligence, cybersecurity, consumer technology, cloud services and digital products. Its automated workflow helps identify and organize relevant technology stories while preserving source attribution and directing readers to the original publisher for complete coverage. The second major component is the Web Utilities Directory. It provides fast, tracking-free tools that run primarily inside the visitor’s browser, reducing unnecessary server processing and helping protect user data. The utility collection includes text-processing tools, word and character counters, case conversion, JSON formatting and validation, Base64 encoding, URL encoding, password generation, QR-code creation, UUID generation, barcode generation, calculators, measurement converters and frontend-code utilities. The platform was developed with a lightweight PHP and JavaScript architecture suitable for standard hosting. Its modular structure allows additional utilities, content categories and automation workflows to be introduced without rebuilding the entire website. Responsive layouts provide a consistent experience across desktop, tablet and mobile devices. Technical SEO was incorporated through descriptive page titles, metadata, canonical URLs, internal linking, crawlable tool descriptions and sitemap-based discovery. Performance improvements include deferred functionality, efficient asset loading, browser-side processing and reduced dependency on heavy frameworks. The monetization structure also supports carefully placed affiliate recommendations inside relevant commercial content. Affiliate destinations are separated from general editorial navigation and accompanied by appropriate disclosure, helping preserve transparency and user trust. AskTechDigital.com has the potential to expand into a broader technology decision and productivity platform. Future services could include software-comparison pages, AI-tool directories, hosting comparisons, saved utility histories, user accounts, embeddable tools, API access and premium business utilities. The result is a scalable digital platform that attracts visitors through timely technology discovery while giving them practical reasons to return through its expanding collection of free web tools.
0
21
Cover image for HowToDocument.com (http://HowToDocument.com) is a technical
HowToDocument.com (http://HowToDocument.com) is a technical knowledge platform designed to make practical engineering solutions easier to discover, understand and reuse. Instead of publishing long, theory-heavy tutorials, the website organizes focused code blueprints covering PHP, Python, DevOps, server configuration, application security, data engineering and frontend performance. The platform combines a searchable blueprint catalogue with category filtering, individual documentation pages and community features. Registered users can interact with published solutions through upvotes and technical notes, helping useful implementations become easier to identify. A key component of the project is the browser-based Code Playground. It allows developers to write and preview HTML, CSS and JavaScript without installing a development environment. The playground includes separate editing tabs, automatic preview, console output, browser-based autosaving, code copying, reset controls and downloadable project output. The website was developed around a lightweight architecture intended to remain practical on standard hosting. The interface uses responsive layouts and reusable components to provide a consistent experience across desktop and mobile devices. Content is structured so that new blueprints and technical categories can be added without redesigning the platform. Search discoverability was treated as an important part of the architecture. Blueprint pages support focused titles and descriptions, internal category linking, crawlable content and sitemap-driven discovery. Performance work includes controlled asset loading, efficient frontend code and an interface that avoids unnecessary framework overhead. HowToDocument.com has strong expansion potential. Future development can introduce contributor profiles, blueprint collections, verified solutions, saved favourites, advanced code search, downloadable project bundles and premium implementation guides. The platform could eventually support subscriptions, sponsored technical content, expert reviews and a marketplace connecting businesses with developers capable of implementing the published solutions. The result is more than a documentation website it is the foundation of a community-driven technical blueprint library and practical developer toolkit.
0
27
Cover image for MobileMartPK is a custom-built mobile
MobileMartPK is a custom-built mobile discovery and price-comparison platform designed for the Pakistani market. I developed a responsive, SEO-friendly website where users can explore smartphones, compare prices and filter models by brand, budget, RAM and storage. The platform includes detailed product pages, brand listings, search functionality, blog content and a custom administration system for managing mobile data. Its lightweight interface delivers a fast and user-friendly experience across desktop and mobile devices.
0
56
Visual Studio Code(1)