30+ Apps Shipped | Flutter, Angular & ASP.NET
- $•••••
- Earned
- 7x
- Hired
- 5.0
- Rating
- 77
- Followers
30+ Apps Shipped | Flutter, Angular & ASP.NET
Graphic & Brand Designer | Web & SaaS Builder
What if exploring space started with a single click? 🚀
Just sharing SPACESIS, a futuristic landing page concept I worked on.
I wanted to create something that feels more like an experience than a typical website. So I experimented with oversized typography, cinematic astronaut imagery, dark tones, and a minimal layout to bring that feeling of space exploration to life.
The biggest focus was keeping the design visually striking without losing clarity or making the interface feel too complicated.
Really enjoyed working on this one!
Would love to hear what you think about the direction. 👀
1
1
162
Full-stack Engineer 9+ years of experience building websites
- $250k+
- Earned
- 2x
- Hired
- 59
- Followers
Full-stack Engineer 9+ years of experience building websites
Product Design, Growth and Developer
UAreWell (Susan Graf-Cote, LMFT) - in Collab with EmpowerAI365
I designed this website for a licensed marriage and family therapist in San Diego. The challenge was to feel warm and human while still communicating more than 30 years of professional experience.
The headline, "Begin Your Journey Toward Healing & Freedom," sets an emotional tone straight away, while a credential banner at the top establishes authority. An arched portrait of Susan in her office makes the first impression personal rather than clinical.
The palette uses warm cream, terracotta and deep brown with a refined serif, and italic accents give key words a softer voice. Subtle touches of sage and a faint network pattern add calm without clutter.
Each section answers a question a visitor is quietly asking: who she is, how she can help, what she specialises in, why the approach works, and what past clients say. The specialties appear as scannable tags alongside a simple visual of her philosophy, "Blending Science & Soul."
The page ends with a free discovery call form and a blog of practical articles, giving hesitant visitors a low-pressure way to take the first step.
0
156
PRESTORATIVE™ (Pacific Plant Nutrients)
I designed this website for an agricultural biostimulant brand that needed to earn trust from two very different audiences: growers who want application rates, and evaluators who want evidence. The goal was to make a technical product feel credible without leaning on bold marketing claims.
The hero states the idea plainly, "Feed the soil before it asks," and immediately splits visitors into two paths: "I grow, show me rates" and "I evaluate, show me the evidence." Each audience reaches what it needs in one click.
I used deep forest green, warm cream and an amber accent, pairing an editorial serif for headlines with monospace type for data. The result feels grounded and scientific rather than salesy.
Instead of vague benefits, the page is built on proof. It includes a crop-by-crop rate engine, an AI technical assistant that answers from product documentation, an evidence library with clear grading tiers, and a section that openly addresses the toughest objection buyers raise.
Every section moves the visitor from understanding to confidence, and ends with one clear action: design a trial.
1
204
I created this project as a personal portfolio experience that feels sharp, technical and credible without relying on generic futuristic visuals.
The main goal was to communicate what I do within a few seconds. Instead of vague agency language, I positioned myself clearly as an AI Developer, Automation Engineer and SaaS builder. The headline, “I build AI systems that remove manual work,” makes the value of my work immediately understandable.
I kept the design dark and premium, using charcoal, off-white and a small emerald accent to create a focused technical feel. The grid is intentionally subtle and only appears around the project area, adding structure without making the page feel like a system dashboard.
The layout uses an asymmetric composition. Rather than using fake analytics or decorative 3D objects, I included a believable product view with the actual product name, purpose and technology stack.
Every element guides attention in a natural order: my name, what I do, the problem I solve, the project proof, and finally the services I offer. The buttons are simple and direct so the visitor can either view my work or start a conversation without distractions.
2
385
I designed this concept website for a custom home builder. The idea was to let people design their house themselves and see a real price before they ever speak to a salesperson. The challenge was to make something as complex as building a home feel simple, visual and even fun.
Hero. The headline makes the promise in bold, tightly set type: "Design your new home in 3D. See what it costs in minutes.", with a hand-drawn rust underline beneath "in minutes." On the right, a model farmhouse sits inside an architect's frame with dimension lines (65′ 10″ × 32′ 6″) and a north arrow. Under it, a project card shows the design name, living area and ballpark price, with a dark "Customise this plan" bar. Three small checkmarks, "No sign-up," "Takes about 3 minutes" and "Free consultation," remove hesitation before the visitor starts.
Visual language. I built the whole site around an architectural drawing set:
Numbering: every section is labelled like a blueprint sheet (A-102, A-201, A-301), and monospace labels read like annotations on a plan.
Grid: a faint drafting grid runs behind the page.
Palette: warm paper cream, charcoal ink and one rust-orange accent for buttons and key prices.
The navigation is numbered too (01 Design yours, 02 How it works, 03 Our homes, 04 FAQ), with a US/UK currency switch and a click-to-call phone number.
The 3D designer. This is the heart of the site. On the left, a live 3D model of the house; on the right, a step-by-step panel:
Start: choose from four starting designs (Contemporary, Modern Farmhouse, Traditional, Single-Storey) or start from scratch.
Size: storeys, a living-area slider, a rectangle or L-shaped footprint, ceiling height and basement.
Rooms: steppers for bedrooms and bathrooms, plus chips for a home office, laundry, pantry or media room.
Roof: shape, pitch, material and colour swatches.
Exterior: cladding type, colour and accent options like a stone base.
Windows: window count, window style, rear doors and balconies.
Outdoor: garage size, porch and patio, plus a roof terrace or fireplace.
Finish: Essential, Premium or Luxury, ending on a summary.
Every choice rebuilds the 3D house instantly, and a live estimate at the bottom of the panel updates with each decision. The viewer has its own controls: front, back, side and aerial cameras; a night mode with glowing windows; an inside cutaway of the floor plan; dimension overlays; and zoom.
Supporting the decision. The rest of the page answers what a buyer asks next:
"Three steps from first sketch to front door" uses large outlined numbers and simple line icons.
"One team. One price. No surprises." lists the builder's guarantees.
"Start from a favourite" shows four home designs as plan cards with specs and prices, each loading straight into the designer.
The build schedule is a Gantt-style timeline across 11 months, from consultation to handover, separating "with you" steps from "we handle it."
Client notes and FAQ: client notes pull out one large quote, and the FAQ gives five straight answers.
The page closes on a dark section, "Your home, designed in minutes.", with a line drawing of a house and two clear actions: design your home or talk to the team.
0
75
AI Automation Engineer | Web, Apps, Graphic & Video Editing
- 86
- Followers
AI Automation Engineer | Web, Apps, Graphic & Video Editing
A premium, high-end website I designed and built as a portfolio project for an international heavy-duty trailer manufacturing company. The dark navy and gold design looks professional, modern, and trustworthy, exactly what serious business clients expect. This video is a full walkthrough of the site.
Portfolio demonstration project with sample content. Every price, amount, and detail is fully editable, so it can be customized for your real business.
What is inside:
Powerful hero section with company introduction and clean navigation
Custom trailer configurator: choose wheels, axles, payload, and size, with a live blueprint preview
Pricing table with model codes, payload ratings, and prices, easy to edit
Regional payment methods section (bank wire, ACH, Stripe, PayPal) with editable amounts and details
Showroom gallery with category filters and photo lightbox
Repair and service, engineering process, and case studies sections
Contact form to send inquiries directly to the company
Why it stands out: premium design, strong typography, smooth navigation, and a layout that turns visitors into customers.
I can build a similar website for your business:
Company and corporate websites
Product, showroom, and catalog websites
Pricing pages and online inquiry forms
Landing pages and website redesign
Message me with your idea, and I will deliver a clean, professional website.
2
3
259
Maison de Champagne is a luxury champagne house brand identity and interactive website concept, designed to present a Grand Cru Blanc de Blancs Millésimé 2008 from Épernay, France. The goal was to create a premium digital experience that feels as refined as the wine itself, with a dark emerald and 24K gold visual language, elegant serif typography, and a clean, rigorous layout.
THE CHALLENGE
Luxury wine brands need to communicate heritage, rarity, and trust in the first few seconds. The challenge was to turn a centuries-old champagne house story into a modern, fast, easy-to-navigate website that works as both a brand showcase and an allocation (pre-order) funnel for collectors.
WHAT I DESIGNED AND BUILT
• Hero section: a striking bottle presentation with heritage storytelling, key wine specifications (dosage, aging, grape variety, cellaring potential), and clear call-to-action buttons for private allocation.
• Collection explorer: a tabbed catalog of vintages (Blanc de Blancs, Cuvée Royale, Rosé de Saignée, Réserve Perpétuelle) with tasting notes for appearance, nose and palate, aromatic tags, technical sheet and pricing.
• Terroir and chalk cellars: an immersive section about the Côte des Blancs terroir, with live-style cellar data such as depth, temperature, and humidity.
• Interactive riddling (remuage) demo: a hands-on element that shows the traditional manual turning of bottles.
• Brand guidelines section: full color palette with HEX and CMYK values, copy-to-clipboard swatches, typography hierarchy, and strategic brief compliance.
• Sticky navigation with smooth section scrolling, private cellar access, and a gold CTA button.
DESIGN DIRECTION
Color palette: Forest Emerald Glass, 24K Micro-Embossed Gold, Vintage Parchment Cream, Deep Cellar Noir and Chalk Limestone White. Typography pairs a classic high-contrast serif for headlines with a clean sans-serif and monospace details for technical data. The overall style combines Swiss rigor with old-world French luxury.
SKILLS AND SERVICES SHOWN IN THIS PROJECT
Brand identity design, luxury website design, UI/UX design, front-end development, responsive web design, design system and brand guidelines, interactive web elements, premium packaging-style presentation.
WHO THIS IS FOR
Wine and spirits brands, luxury and premium product companies, boutique hotels, restaurants, and any business that wants a high-end brand identity with a website that builds trust and drives inquiries.
Looking for a brand identity or website with this level of polish? Message me on Contra and let's discuss your project.
0
101
Aurore D'Or: Luxury Perfume Brand Identity, Packaging & Visual Design Showcase
OVERVIEW
Aurore D'Or is a luxury brand identity and visual design concept for a fictional French haute parfumerie house. The project shows how a high-end fragrance brand can look and feel across every customer touchpoint, from the perfume bottle itself to premium packaging, editorial advertising, and personal stationery.
The goal was simple: create a refined, cohesive brand world where every detail signals luxury, craftsmanship and French elegance.
THE CHALLENGE
Luxury fragrance brands compete on perception. Customers cannot smell a perfume online, so the visuals must communicate scent, quality, and heritage on their own. A premium perfume brand needs:
A strong, recognizable visual identity
Packaging that feels expensive before the box is opened
Advertising that tells an emotional story
Consistent design across digital and print
The challenge was to bring all of these together in one consistent brand system that feels timeless, not trendy.
THE DESIGN APPROACH
The brand identity is built on a restrained palette of deep black and champagne gold, paired with elegant serif typography. This combination suggests heritage, exclusivity, and quiet confidence, the qualities customers expect from a luxury perfume house.
Warm natural light, travertine stone, brushed brass, and textured paper are used throughout the visuals to give the brand a tactile, sophisticated personality.
THE SIX KEY VISUALS
Hero Perfume Bottle
The signature fluted crystal bottle with a brass cap and leather tassel, presented on a travertine pedestal in warm morning light. This is the brand's main identity piece.
Brass Cap & Monogram Detail
A close-up of the cap and AO monogram, highlighting craftsmanship and fine material detail.
Luxury Rigid Secondary Box
Premium packaging design with a textured cotton-rag finish and hot foil debossing, designed to create a memorable unboxing moment.
Heritage Collection Trio
Three fragrances shown together in a graduated amber palette, presenting the brand as a complete collection rather than a single product.
Editorial Campaign Print Ad
A magazine-style advertisement set in a Parisian interior with natural window light, built to tell a story of elegance and quiet confidence.
Stationery & Scent Blotter Suite
Envelopes, note cards, olfactory strips and a wax seal, extending the brand into personal, client-facing communication.
SPEC SHEETS: FROM CONCEPT TO PRODUCTION
Each visual is paired with a detailed spec sheet covering materials, finishes, lighting, and technical tolerances. This shows how the design could move from a creative idea to a real production brief, which is the kind of detail brands and print partners need.
INTERACTIVE PORTFOLIO EXPERIENCE
The work is presented in an interactive portfolio deck with:
Slide navigation and a slide grid
A brand system view
An olfactory pyramid section
A pitch monogram section
Autoplay and present mode
An inspector panel for design details
Click-and-drag zoom for close-up inspection of high-resolution visuals
This makes it easy for clients and creative teams to review the brand the way they would in a real pitch.
WHAT THIS PROJECT DEMONSTRATES
Luxury brand identity design
Packaging design direction
Editorial and advertising visuals
Consistent visual systems across multiple touchpoints
Attention to material, lighting and print detail
Presentation design for client pitches
WHO THIS WORK IS FOR
This style of work suits luxury and premium brands in perfume, beauty, fashion, jewelry, and lifestyle, as well as startups and entrepreneurs who want a high-end visual identity from the start.
LET'S WORK TOGETHER
If you are building a premium brand and need a visual identity, packaging concept, or brand presentation that feels polished and professional, I would be glad to help. Message me on Contra to discuss your project.
1
115
WingStation – Food Ordering App; Delivery App. WingStation is a modern food ordering app that makes discovering, customizing, and ordering favorite meals easy and enjoyable. Key Features: Food Menu: Browse dishes, photos, prices, ratings, and categories.Search (http://categories.Search) amp; Filters: Quickly find favorite meals and popular items.Food (http://items.Food) Customization: Choose portion sizes, sauces, flavors, and spice levels.Cart amp; Checkout: Add items, update quantities, apply coupons, and place orders.Secure (http://orders.Secure) Payments: Pay online through supported payment integrations.Live (http://integrations.Live) Order Tracking: Follow order progress and delivery through GPS integration.AI (http://integration.AI) WingBot: Get food recommendations, menu guidance, and order assistance.Favorites amp; Reordering: Save favorite meals and reorder with ease.Customer Profile: Manage personal details, addresses, preferences, and order history.Rewards amp; Membership: Earn points, unlock badges, and access special offers.Ratings amp; Reviews: Rate meals and share customer feedback.Notifications: Receive order updates, delivery alerts, and promotions.Customer Support: Report delivery issues, incorrect orders, and missing items.Restaurant (http://items.Restaurant) Dashboard: Manage orders, menus, prices, availability, and sales. Additional Features: Personalized meal suggestions, dietary information, pickup options, group ordering, and multilingual support can further enhance the experience.Goal: WingStation aims to deliver a seamless, personalized food ordering experience while helping restaurants improve customer satisfaction, manage operations, and encourage repeat orders.Note: Payments, GPS tracking, AI assistance, notifications, and restaurant management require appropriate backend integrations.
1
129
Web Developer | Motion developer | full stack engineer
PrimeNest Realty is a demo real estate website I designed and developed to show clients what I can build for property businesses. Many agency sites feel cluttered and hard to use, so I focused on a clean, premium look and a simple path from search to enquiry.
What’s inside:
A homepage with a built-in property search (buy or rent, location, price range, type, bedrooms)
Property listings for sale and for rent, with filters
Buying and renting FAQs to answer common questions
Neighbourhood pages (Downtown, Riverside, Oakwood) showing the homes in each area
A “Sell your property” page with a simple enquiry form
An About page introducing the agents
Featured properties, testimonials and clear call-to-action sections
The design uses a warm off-white background with navy and gold accents and elegant serif headings. The layout is consistent from page to page so visitors always know where to click.
Note: all listings, agents and reviews are fictional sample content. I made this as a portfolio demo.
If you want a website like this for your business, message me and I’ll build it around your brand.
Skills to used
Web Design
Web Development
UI Design
UX Design
Responsive Design
Landing Page Design
Front-End Development
Real Estate Website
0
389
Maison Belle — Elegant Salon & Beauty Website Design 🌸
An elegant, modern salon website concept created to showcase how a beauty business can present its services and brand through a polished online experience.
Designed by Ubaid Web Studio, this project features a soft, luxurious color palette, refined typography, and a stylish layout inspired by the beauty and aesthetics industry.
✨ Key Features
Elegant UI Design: A sophisticated visual style with soft colors and modern typography.
Beauty Services: Sections for presenting salon treatments and services.
Service Pricing: A clear layout for showcasing sample service prices.
Team Profiles: Space to introduce beauty professionals.
Contact & Booking Sections: Convenient ways for visitors to explore contact and booking information.
Responsive Design: Designed for browsing on desktop and mobile devices.
🎯 Project Goal
To demonstrate how thoughtful web design can help salons present their services, communicate their brand identity, and create a welcoming first impression for potential customers.
Project Type: Salon Website Design & Development Demo
Demo Website: https://masionbelleastheticbyubaidwebstudio.netlify.app/
Note: Maison Belle is a demonstration project created to showcase my web design and development skills. It is not a commissioned client project.
1
409
Iron Core Fitness — Modern Gym Website Design 💪
A bold, modern gym website concept designed to showcase how a fitness business can build a strong and professional online presence.
Created by Ubaid Web Studio, this project combines a powerful dark theme, vibrant lime-green accents, and bold typography to deliver a fitness-focused visual experience.
Key Features
Bold Visual Design: A striking gym-inspired look with modern typography and colors.
Membership Plans: Clear presentation of membership options and pricing.
Fitness Programs: Dedicated sections to showcase training programs and services.
Trainer Profiles: Sections introducing trainers and their expertise.
Class Schedule: A structured view of fitness classes and timings.
Responsive Layout: Designed for a smooth browsing experience on desktop and mobile.
Contact & Join Sections: Clear pathways for visitors to explore membership and contact the gym.
Project Goal
To demonstrate how a well-designed website can help gyms present their services, communicate their brand, and make important information easier for potential members to find.
Project Type: Gym Website Design & Development Demo
Demo Website: https://ironcorefitness2.netlify.app/
Note: Iron Core Fitness is a demonstration project created to showcase my web design and development skills. It is not a commissioned client project.
1
275
BrightSmile Dental — Modern Dental Clinic Website Design 🦷
I designed this modern dental clinic website concept to demonstrate how a professional online presence can help dental clinics showcase their services and build trust with potential patients.
The design combines a clean, professional layout with a calming teal-and-white color palette to create a welcoming experience. It features dental services, dentist profiles, testimonials, frequently asked questions, and an appointment enquiry section.
Key Features
Modern UI/UX: Clean layout with a professional dental-care aesthetic.
Responsive Design: Designed to provide a smooth experience across desktop and mobile screens.
Service Showcase: Helps visitors explore dental treatments and services.
Trust-Focused Sections: Dentist profiles and testimonial sections create space for clinic information.
Appointment Enquiry: A clear section for visitors interested in contacting the clinic.
My Goal
To demonstrate how thoughtful web design can make a dental clinic's information easier to explore and help potential patients take the next step toward contacting the clinic.
Project Type: Dental Website Concept / Portfolio Demo
Note: BrightSmile Dental is a demonstration project created to showcase my web design and development skills. It is not a commissioned client project.
1
203
Full Stack Web Developer | .NET + HTML/CSS/JS | Clean & Fast
- 26
- Followers
Full Stack Web Developer | .NET + HTML/CSS/JS | Clean & Fast
Creating immersive digital experiences with smooth website animations ✨
Designed & developed by Usman DevHub Tech & Creative Studio.
We create premium websites with modern UI, interactive animations, and unique visual experiences that help brands stand out. 🚀
Want a website like this for your brand?
DM us and let's discuss your project.
#WebDesign #WebDevelopment #WebsiteAnimation #UIDesign #CreativeStudio #DigitalAgency #UsmanDevHub
11
14
2.5K
Creating immersive digital experiences with smooth website animations ✨
Designed & developed by Usman DevHub Tech & Creative Studio.
We create premium websites with modern UI, interactive animations, and unique visual experiences that help brands stand out. 🚀
Want a website like this for your brand?
DM us and let's discuss your project.
#WebDesign #WebDevelopment #WebsiteAnimation #UIDesign #CreativeStudio #DigitalAgency #UsmanDevHub
9
10
2.4K
🚀 3D Animated Product Website — Built for a Client
Recently designed and developed this interactive 3D website for a client’s product, combining modern UI/UX with smooth animations and an engaging user experience.
✨ 3D Product Animation
✨ Smooth Interactive Experience
✨ Premium UI/UX
✨ Responsive Design
🔗 Live Demo: https://www-juicydrop.netlify.app/
Have a product or business that needs a modern 3D animated website?
📩 Feel free to reach out — I’d love to work on your next project.
💬 What do you think of the design? I’d love to hear your feedback!
#3DWebsite #3DAnimation #WebDevelopment #WebDesign #UIUX #FrontendDeveloper #FreelanceDeveloper #Contra
7
12
1.9K
Creating immersive digital experiences with smooth website animations ✨
Designed & developed by Usman DevHub Tech & Creative Studio.
We create premium websites with modern UI, interactive animations, and unique visual experiences that help brands stand out. 🚀
Want a website like this for your brand?
DM us and let's discuss your project.
#WebDesign #WebDevelopment #WebsiteAnimation #UIDesign #CreativeStudio #DigitalAgency #UsmanDevHub
12
11
2.3K
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
