Junior Web Designer and Frontend Developer passionate about building modern, responsive, and user-friendly websites and web applications. I enjoy creating clean UI layouts, interactive sections, and mobile-first experiences that feel smooth and reliable.
I have hands-on experience using HTML, CSS, JavaScript, React.js, and Tailwind CSS, along with API integration for dynamic features. I’m also familiar with Figma and basic UI/UX principles, and I’m eager to contribute to real client projects—especially in remote or freelance roles—while continuously improving my skills.
Skills
Experience Level
Work Experience
Education
Qualifications
Industry Experience
Overview
Rock, Paper, Scissors is an engaging, lightweight web application that digitizes the classic decision-making game. Built with a focus on real-time feedback and smooth user interaction, the app enables players to compete against an automated computer opponent using clear, event-driven game logic.
Key Features
Player vs. Computer Gameplay: Dynamic move selection system with randomized computer decision-making.
Real-Time Result Evaluation: Automated match engine that instantaneously calculates round results (Win, Loss, or Draw).
Live Score Tracking: Dynamic score counter that keeps track of round histories in real time during continuous play.
Interactive UI/UX: High-contrast move buttons, visual outcome feedback, and clean, modern layouts tailored for fluid play across devices.
Technical Highlights
Dynamic DOM Manipulation: Built with modular JavaScript to update scores, game states, and visual elements seamlessly without page reloads.
Clean Architectural Logic: Robust conditional algorithms handling edge-case game states and quick state resets.
Overview
Tic-Tac-Toe Game is a clean, interactive web application that brings the classic strategy game into a modern digital experience. Engineered for seamless gameplay, it features real-time state management, dynamic win/draw detection, and a fluid, responsive UI designed across all screen sizes.
Key Features
Interactive Two-Player Gameplay: Smooth turn-based mechanics for local multiplayer mode.
Instant Win & Draw Logic: Built-in pattern recognition algorithm that automatically detects winning lines or tied matches in real time.
Game Reset & State Management: Fast, single-click board reset to quickly launch a new match without refreshing the page.
Responsive & Intuitive UI: Modern visual layout with high-contrast board indicators and smooth interaction states.
Technical Highlights
DOM Manipulation & Logic: Built with clean, modular JavaScript to manage grid state updates and turn transitions effectively.
User Experience (UX): Simple, clutter-free visual structure prioritizing instant feedback and enjoyable replayability.
Currency Converter App is a fast, lightweight web application designed to calculate real-time exchange rates between global currencies. Built with a minimalist user interface, it provides users with instant, accurate financial conversions with a single click.
Key Features
Real-Time Conversion Rates: Fetches up-to-date foreign exchange rate data for precise conversions.
Intuitive UI/UX: Clean, card-based layout featuring dynamic flag indicators for seamless selection.
Swap & Select Functionality: Dropdown controls allowing users to select and easily switch between source and target currencies (e.g., USD to PKR).
Instant Conversion Output: Displays exact exchange rate ratios alongside instant calculated values.
Tech & UI Design Highlights
Minimalist Aesthetic: Focused, distraction-free interface built with modern typography and sharp drop shadows for key interactive elements.
High-Contrast Action CTA: Prominent gold “Get Exchange Rate” button designed to drive intuitive user interactions.
Overview
Saintrix is a modern, high-performance digital product agency UI/UX concept engineered for a global clientele. The design balances dark-mode aesthetic precision with architectural integrity, bridging the gap between ultra-clean visual design and technical software development.
Key Layout Sections & Features
Hero & Mission Statement: A high-impact hero section highlighting core service offerings, paired with a dedicated leadership profile and interactive “Get a Quote” call-to-actions.
Core Services & Capabilities: Minimalist card layouts detailing primary service domains including UI/UX Design, Web Development, and Digital Growth.
Engineering Life Cycle & Process: A structured 4-step framework mapping out the journey from business alignment and high-fidelity prototyping to production-ready deployment.
Tech Stack Ecosystem: Interactive display showcasing core design and development technologies (HTML5, CSS3, Node.js, React, Figma).
Featured Work Showcase: Visual portfolio integration featuring modern, multi-platform UI mobile app and dashboard case studies.
Contact & Location Hub: Streamlined project inquiry form designed to capture key project metrics, budget ranges, and client goals.
Design & Visual Identity
Typography & Hierarchy: Ultra-readable typography structured with clean line heights for maximum scannability.
Color Palette: Premium deep dark-mode backdrop paired with vibrant neon blue and purple accent highlights.
User Experience (UX): Clean, spacious section breaks and clear visual contrast to drive high conversion rates.
Overview
Fitness Application is a modern, mobile-first learning platform designed to connect users with expert fitness instructors, professional personal training courses, and comprehensive nutrition guides. Built with an intuitive, sleek interface, the app allows users to learn at their own pace through structured video lessons, guided programs, and interactive course content.
Key Features
Seamless Onboarding: A bold, high-impact welcome screen welcoming users to learn directly from expert fitness instructors.
Course Discovery & Search: A curated home feed featuring trending courses, category filters (e.g., CrossFit, Fitness, Sports Nutrition), promotional discounts, and a search system.
Interactive Video Lessons: Embedded video player integration displaying course duration, ratings, instructor bios, and downloadable structured lesson plans.
Comprehensive Modules: Step-by-step breakdown of course contents including introduction, tactical training, and mental preparation.
Enrollment & Support Hub: Direct single-tap enrollment with dedicated sections for user support and community comments.
Design & Visual Identity
Typography & Hierarchy: Clean, modern typography designed for high contrast and effortless legibility.
Color Palette: Premium dark-mode accents paired with vibrant neon yellow primary CTA buttons to drive user conversion.
User Experience: Grid-based layout providing a structured, distraction-free learning environment.
Dessi Food is a modern and user-friendly food ordering application designed to provide customers with a smooth and convenient online food ordering experience. The application allows users to browse a variety of food items, explore detailed product information, add items to their order, and complete the checkout process.
The design includes essential user flows such as Login, Signup, Home, Food Categories, Product Details, Cart, Order Summary, Checkout, and Payment Methods. The interface focuses on a clean layout, easy navigation, visual hierarchy, and a responsive user experience.
This project was designed in Figma as a UI/UX design concept, demonstrating my skills in creating modern mobile application interfaces, organizing complete user flows, and designing consistent screens for a food ordering platform.
Hire a Web Designer
We have the best web designer experts on Twine. Hire a web designer today.