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.
SaaS| Browser Extension Developer| Save Time with automation
SaaS| Browser Extension Developer| Save Time with automation
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
58
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
69
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
68
Expert Website Designer: Boost Your Online Presence
Expert Website Designer: Boost Your Online Presence
Branding | Brand Identity | Website
Tesla Roadster website design and development concept by Scroldev. A responsive automotive landing page built around speed, clarity, and scroll. Unofficial portfolio project, not affiliated with Tesla, Inc.
1
302
Strata’s brand runs on one colour, one shape and one rule. Restraint was the strategy.
I designed the brand identity for Strata, an enterprise SaaS platform that connects fragmented systems, data, workflows and teams. A product that removes chaos can’t have a chaotic brand, so every element earns its place: “Every layer, working as one.”
One shape: Five horizontal layers forming a subtle S. It works as the logo, a pattern and a rhythm for layouts.
One colour: Strata Blue #2447F9, carried by near-black and white. Solid only, never a gradient.
One rule: Complexity, organized into movement. If a layout feels busy, it’s wrong.
Structure: Modular grids, strong alignment and architectural spacing across every surface.
Imagery: Single-colour portraits in Strata Blue, so even the photography follows the system.
Fewer elements, used with discipline, scale further than more elements used loosely.
If your enterprise SaaS company needs a brand that stays consistent as it grows, let’s talk.
#VisualIdentity #SaaSBranding #B2BBranding #BrandDesign
1
97
AI Architect | SaaS, Voice AI & Automation
Expert Custom Website Developer
Web Developer | UI/UX| 3D Product Animation |
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
137
🚨 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
87
🖤 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
89
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
216
Financial Modeler for Startups | Dashboards & Forecasts
- 8
- Followers
Financial Modeler for Startups | Dashboards & Forecasts
13-Week Cash Flow Forecast: Will Your Cash Last?
Plenty of profitable businesses still run out of cash. Customers pay late, a big stock order lands in the wrong week, and suddenly the bank balance is the problem, not the profit.
This forecast shows it coming, week by week, for the next 13 weeks.
Set your opening cash, sales, growth, costs and ad spend, and choose how quickly customers pay you. The dashboard draws your cash balance week by week, marks the lowest point, and tells you in one plain-English sentence whether you’re safe or heading below zero.
It’s a simplified demo with sample data. For a real business I build the forecast around your own sales, payment terms and costs, in the format your bank or investor expects.
If you’d like a cash flow forecast for your numbers, send me a message.
0
66
SaaS Unit Economics & Churn Dashboard for Founders
Most SaaS founders track revenue but can’t say whether each customer is worth what it cost to win them. This dashboard answers that in seconds.
It models a subscription business over 12 months. Change the price, the monthly churn, the acquisition cost or the gross margin, and the dashboard recalculates customer lifetime, lifetime value, the LTV to CAC ratio and the months it takes to earn back the acquisition cost.
A stacked chart shows how the customer base changes: the customers you started with fade out through churn while new ones build up, and a table underneath shows the revenue, acquisition spend and net contribution for each month.
It’s a simplified demo with sample data. For a real company I build the full model around your own pricing, churn and acquisition numbers.
This is one of several financial dashboards I build for early-stage startups. If you’d like one for your numbers, send me a message.
0
138
Rental Property Investment Calculator: Does the Deal Pay?
A rental can look great on paper and still lose money every month. The rent sounds high, but then come the mortgage, taxes, insurance, repairs, empty months and the management fee.
This calculator shows what’s really left.
Enter the price, down payment, interest rate and rent, and it works out the cap rate, your cash-on-cash return, the first year’s cash flow, and whether the rent covers the mortgage. A chart then shows how much equity the property builds over the years you plan to hold it, and a table gives the numbers year by year.
It’s a simplified demo with sample data. It leaves out selling costs, taxes and refinancing. For a real deal I build the model around your own property, financing and plans, and compare several properties side by side.
If you’d like a calculator for a deal you’re considering, send me a message.
0
64
Budget vs Actual Variance Dashboard: Spot Overspend Fast
Every month ends the same way. You look at the bank balance, feel that something is off, and spend the next hour digging through a spreadsheet to find out what.
This dashboard does the digging for you.
Enter your budget and what you actually spent, and it shows in seconds where you’re over, where you’re under, and what that did to your profit. Overspending lines get flagged automatically, and you choose how strict the alarm is. A plain-English summary at the bottom tells you the story in one sentence, for example: revenue came in short, marketing ran 19% over, and profit fell $4,500 below plan.
It’s a simplified demo with sample data. For a real business I build the version around your own budget lines, your categories and your reporting rhythm, so month-end takes minutes instead of hours.
If you’d like a dashboard like this for your numbers, send me a message.
0
128