Sannan Abbasi
SaaS| Browser Extension Developer| Save Time with automation
New to Contra
Sannan is ready for their next project!
Modern Premium Brand Website Design | UI/UX Case Study
A modern, responsive website designed to create a premium digital experience. This project focuses on clean layouts, engaging animations, intuitive navigation, and a user-centered interface that helps businesses establish a strong online presence.
This project was created to showcase a high-end website experience that balances aesthetics with usability. Every section was carefully designed to guide users naturally through the content while maintaining a consistent visual identity.
What I Delivered
Modern UI/UX Design
Responsive Layout
Clean Typography & Visual Hierarchy
Smooth Page Transitions & Interactions
Conversion-Focused Landing Page
Pixel-Perfect Design
Mobile-Friendly Experience
Design Goals
Create a premium first impression.
Improve user engagement through clean layouts and intuitive navigation.
Maintain consistency across every section.
Deliver a responsive experience across all devices.
Tools Used
Figma
GSAP
Framer (or React/Next.js )
1
3
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
20
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
20
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
25
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
28