Webflow & Framer Developer | Smooth Website Animations
- 1x
- Hired
- 5.0
- Rating
- 12
- Followers
Webflow & Framer Developer | Smooth Website Animations
A little wait, a lot of motion. 🟠
A preloader animation that counts smoothly from 0 to 100%, turning loading time into part of the experience.
Built with CSS and GSAP, where even the smallest details matter.
#GSAP #WebAnimation #FrontendDevelopment #CreativeCoding #WebDesign
1
66
Built a little menu interaction study.
When the menu opens, the main content slides away with a subtle rotation, creating that layered, almost physical transition.
I also added a character-by-character roll effect to the menu links using GSAP SplitText, so the typography feels just as interactive as the layout.
Nothing huge. Just experimenting with motion, timing, and small details that make an interface feel more alive.
Built with GSAP, CustomEase & SplitText.
#GSAP #WebAnimation #FrontendDevelopment #CreativeCoding #WebDesign #InteractionDesign #MotionDesign #FrontendDeveloper #JavaScript #Awwwards
1
79
Gutstring — Early Access Landing Page
My client Temi was launching a new platform called Gutstring and needed a clean landing page to collect early access signups before the official launch.
The goal was simple - one page, one action. Users land on the page, click a button, enter their email and get confirmation. No distractions, no extra pages.
The main challenge was the backend setup. The client wanted emails saved automatically and a thank you email sent instantly to every person who signed up, all without paying for any monthly tools or subscriptions.
On the design side, the interaction needed to feel smooth and intentional. When a user clicks the Register Early button, it doesn't navigate to a new page - instead it animates and transforms directly into an email input field. Once they submit, the form fades out and a confirmation message appears on screen with a clean fade up animation. The whole experience feels seamless with no page refresh at any point.
I solved the backend by building everything with Google Apps Script - completely free. When someone submits their email, it automatically saves to the client's Google Sheet and triggers a thank you email from their own email address. No Zapier, no Mailchimp, no extra costs.
The result is a smooth, branded landing page with polished animations, instant success confirmation, and a fully automated backend that the client owns and controls entirely.
1
109
Web Developer | UI/UX| 3D Product Animation |
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
Synapse — Designing an AI Assistant People Actually Want to Open
A personal case study on building an AI-powered product, from idea to interface
What This Project Is
Synapse is a concept landing page for an AI-powered assistant app — the kind of tool that can chat with you, write content, help with code, generate images, and even listen through voice mode. Think of it as one AI brain that switches roles depending on what you need that day: writer, designer, developer, or thinking partner.
I didn't build the actual AI behind it (that needs a real backend and a language model). What I built is the front door — the website that would greet a new user, explain what the product does, and convince them to try it. It's coded by hand using HTML, CSS, and JavaScript, and it's designed to feel like a real, funded, 2026-era AI startup — not a template.
Why I Made It
AI products are one of the most in-demand niches for designers and developers right now. Every week, a new AI tool launches, and every one of them needs the same three things: a website that explains it, an interface that's easy to trust, and a visual identity that doesn't look like everyone else's chatbot page.
I built Synapse for three reasons:
To learn by doing. Reading about animations and 3D CSS is one thing — actually building a rotating 3D orb, scroll reveals, and a typewriter chat demo forced me to understand how these effects really work under the hood.
To build a strong portfolio piece. Clients hiring for AI-product design want to see that you can design for AI — chat interfaces, live-typing states, "thinking" animations — not just static pages.
To practice going from brief to finished product, the same way a real freelance or agency project would run: picking a name, a color story, a tone of voice, and carrying it consistently across every section.
What's Inside
Section Purpose Hero Introduces Synapse in one glance — headline, floating 3D orb, live chat bubbles Marquee strip Builds trust by showing "who uses it" Stats Numbers that count up on scroll, for quick credibility Features grid Explains the 6 things Synapse can do How it works A simple 3-step flow: ask → Synapse reasons → get result Live demo A fake but realistic chat window that types out an answer, showing how the product feels in use Voices (testimonials) Social proof from "users," scrolling infinitely CTA band The final push to get someone to try the product Footer Quick links and closing brand mark
Skills I Practiced
UI/UX design thinking — deciding what a first-time visitor needs to see first, second, and last
Visual design & branding — building a color palette (violet, cyan, magenta, amber) and pairing three fonts (Space Grotesk, Inter, JetBrains Mono) that feel techy but warm
Responsive layout — making sure the page holds up on mobile, tablet, and desktop
Motion & interaction design — deciding where animation adds meaning (a "thinking" AI deserves movement) instead of adding effects just because I could
Front-end development — writing real, working HTML/CSS/JS instead of just designing static mockups
Copywriting — writing headlines and feature text that sound like a real product, not placeholder "Lorem ipsum" text
Problem-solving / debugging — like the navigation bug we just fixed, which taught me how a small JavaScript mistake can break a whole page's usability
Tools Used
HTML5 / CSS3 — structure and all visual styling, including 3D transforms and keyframe animations
Vanilla JavaScript — scroll reveals, cursor glow, orb parallax, counters, typewriter effect, mobile menu
Google Fonts — Space Grotesk, Inter, JetBrains Mono
Unsplash — free stock photography for avatars and testimonial faces
What I'll Build On Next (Future Contributions)
This version is the front door only. Here's where it can grow:
A working chat interface — connect it to a real AI API so the "demo" becomes a real conversation
A pricing page — since every SaaS/AI product needs a clear plan comparison
A dashboard / product screens — the inside of the app, not just the marketing page
Dark/light mode toggle — a common expectation in 2026 products
Accessibility pass — screen reader labels, better color contrast checks, keyboard navigation testing
Case study presentation — turning this into a polished Behance/Dribbble post with before/after and process shots
Closing Thoughts
Synapse started as a way to practice one skill — building an AI-product landing page — but it ended up teaching me design decisions, real front-end code, and debugging, all in one project.
Link to see my whole project: https://saifullah-ai-assistant.netlify.app
2
1
202
Project title: Local Density Launch Strategy — Tennis Matchmaking App
Category tags: Growth Marketing, Digital Marketing, User Acquisition, Web Design
Description:
A live launch-strategy case study built for a tennis matchmaking app, designed to solve the real problem behind local matchmaking products: density, not just downloads. Instead of a generic acquisition plan, this project sequences growth around one core insight — a matchmaking app only works when enough real players exist close enough to actually play each other.
What's included: a 90-day sequenced launch plan (seeding acquisition through existing community touchpoints, local creator/influencer partnerships over broad-reach influencers, a paired referral mechanic for online + offline growth, and a neighborhood-by-neighborhood density rollout for matchmaking), plus a sample referral flow mockup and projected KPI framework — all built and deployed independently as a working site (HTML/CSS/JS, hosted on Netlify).
Live site: https://saifullah-tennis-launch.netlify.app
0
127
Title: Pawsability Web & Mobile Based Redesign Concept 🐾📱✨
Complete Project Description 🚀
Pawsability is a modern, high-converting web and mobile platform designed as a UI/UX case study and interactive digital experience for a Bushwick, Brooklyn-based social enterprise 🏙️🐶. The platform seamlessly bridges two powerful missions: delivering top-tier professional dog training services to pet owners while providing structured vocational training and career pathways for neurodivergent and autistic adults 💡💙.
The site is engineered with a sensory-friendly, highly accessible design architecture 🎨, featuring soft color palettes, smooth micro-interactions, clean visual hierarchy, and full support for reduced-motion preferences ⚡.
Core Sections & Features Breakdown 🛠️
Hero & Impact Metrics 🎯
Bold Value Proposition: "Every leash has two ends" — instantly engaging both target audiences 🐕.
Dual-Path Navigation: Clear CTAs for dog owners booking services & individuals seeking vocational training 🚀.
Trust-Building Stats: Highlighting key performance metrics like 01:1 graduate job placement focus and a calm 3:1 dog-to-trainer ratio 📊.
Our Story (Dual-Purpose Model) 🤝
Visual storytelling showing how pet care and workplace skill training intersect naturally.
Transparent model explaining how dog service bookings directly fund participant paychecks 💰✨.
Vocational Training Roadmap 📌
Interactive 4-stage progression guide:
01. Meet & Assess ➔ 02. Hands-On Training ➔ 03. Supervised Shifts ➔ 04. Job Placement 🏆
Dog Services Hub 🐕🦺
Structured, high-converting service cards detailing 1:1 Private Training, Small Group Classes, and Structured Daycare & Boarding 🎾.
Get Involved & Call to Action 📩
Multiple conversion touchpoints allowing visitors to book services, sponsor a trainee, or hire graduates 🤝✨.
Skills Applied 🧠💎
UI/UX Design & Spatial Architecture: Crafting intuitive user flows, conversion-focused wireframes, and sensory-friendly layout systems 📐.
Fully Responsive Design: Building fluid desktop grid systems and flexible layouts optimized seamlessly for mobile, tablet, and widescreen displays 📱💻.
Accessibility (a11y) Standards: Implementing high-contrast text, clear focus states, and reduced-motion options for an inclusive user experience ♿✨.
Brand Strategy & Visual Identity: Curating muted color palettes, cohesive visual tone, and modern typography 🎨.
Interactive Prototyping & Motion: Designing subtle scroll-triggered effects, micro-animations, and fluid state changes ✨.
Tools & Tech Stack ⚙️🧰
Framer: Used as the primary design canvas and interactive visual production engine to build fluid, fully responsive web layouts without manual backend overhead 🚀.
Framer Motion Logic: Powers smooth transitions, custom keyframe animations, and adaptive micro-interactions 🔥.
Auto-Layout & Dynamic Components: Guarantees pixel-perfect layout responsiveness across all screen resolutions 📐.
Semantic Web Principles: Structured with high-performance CSS/HTML visual principles for fast loading speeds and smooth responsiveness ⚡.
🚀 To see my project click on this link https://pawsability-redesign.netlify.app
0
135
Expert Custom Website Developer
Code the stack. Add the intelligence
Marocana - Shopify Custom Theme Development
A custom Shopify theme I developed for Marocana, built to deliver a unique, high-converting online store tailored to the brand's identity. The theme features a clean, responsive design with custom product, collection, and checkout layouts optimized for a smooth shopping experience. Built with fast load times, SEO best practices, and seamless integration of Shopify apps and payment gateways. Delivered a polished, easy-to-manage store that stands out and is ready to sell.
Tags: Shopify, Custom Theme Development, E-commerce Development, Liquid, Responsive Design, Frontend Development, Store Customization, SEO Optimization, UI/UX Design
1
119
🎨 Talent Marketplace Platform — UI Design Exploration
Hi everyone! 👋
Sharing some insights from a recent marketplace design exploration — a talent marketplace platform built to connect businesses, startups, and individuals with skilled UI/UX designers. 🚀
🎯 The Concept
The idea was to make finding the right design talent feel effortless. Whether you're a startup hunting for your first designer or a business scaling your team, the platform bridges that gap with a smooth, intuitive experience. 🤝
🎨 The Design Direction
✨ Clean, modern style — clarity and focus in every screen
🌈 Bright accent colors — fresh, energetic, and inviting
📐 Strong visual hierarchy — easy browsing from search to hire
💼 Purpose-built layouts — designed around real user needs
The result is a fresh, welcoming marketplace experience that feels professional yet approachable. 🔥
What do you think? Let me know in the comments! 💬
Feel free to leave feedback, press (L) if you like it ❤️, and don't forget to follow our Contra account for more!
UI Designer: Mudassir 🎨
0
97
🎩 Mystic Dreams — Cigar Band Brand Identity & Packaging Design
Design isn't decoration. It's expectation.
A cigar band has only a few square inches to communicate quality, heritage, and value. Every line, ornament, texture, and finish shapes that perception — there's no room for anything that doesn't earn its place. ✨
The Concept
For Mystic Dreams, we developed an identity inspired by classical engraving, ancient symbolism, and luxury packaging — creating a brand that feels timeless rather than trendy. 🕰️
The goal was simple but demanding: design something collectors would want to keep — not just remove and discard.
The Details
✒️ Classical engraving — intricate linework that signals craftsmanship
🔮 Ancient symbolism — meaning and mystique woven into the mark
💎 Luxury packaging sensibility — premium finishes that feel collectible
🏛️ Timeless over trendy — built to age with grace, not fade with fashion
Mystic Dreams — White Label Edition.
Naming, brand identity, creative direction, illustration, and presentation by DH Solutions. 🖋️
0
99
🚗 Autonomous Mobility App — Smart City Transportation UI Concept
About the Project
A futuristic mobility application designed for autonomous transportation and smart city experiences. The interface reimagines how we move through the city — making commuting seamless, intelligent, and completely stress-free. 🌆
🎯 The Experience
Every screen is built around one goal: effortless, next-generation travel. From booking to arrival, the app guides users with clarity and confidence.
🚕 Seamless Ride Booking — request a ride in just a few taps
🧭 AI-Powered Navigation — smart routing for faster, smoother trips
📍 Real-Time Tracking — always know exactly where your ride is
🧘 Stress-Free Commuting — a calm, intuitive experience end to end
🎨 The Design Direction
Built with a minimal UI approach, immersive vehicle presentation, and high-contrast layouts, the design delivers a premium, next-generation feel. Clean typography and a modern visual system make advanced technology feel simple, sleek, and human. ✨
Perfect for: autonomous mobility startups, ride-hailing platforms, smart city apps, EV and transportation brands, and future-focused tech products. 🌐
0
127
Expert Computer Scientist focused on latest technologies
- $1k+
- Earned
- 1x
- Hired
- 5.0
- Rating
- 5
- Followers
Expert Computer Scientist focused on latest technologies
I made a chrome browser extension called JSONify for my client.
JSONify is a Chrome extension that addresses a significant issue for Squarespace users: your site lacks the structured information… With one click, JSONify creates this missing data and lets you copy it for use elsewhere. This helps search engines better categorize your site and can improve how you show up in search results and AI-powered searches. Perfect for Squarespace users who want their sites to be properly understood by search engines and AI—no coding required.
28
233
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
387
Title: Nexa Electronics: Premium E-Commerce Website with Interactive 3D Exploded Views
Description:
Nexa Electronics is a demo e-commerce website I designed and built to show my skills in modern web design, front-end development and interactive 3D experiences. This video is a walkthrough of the site.
What’s in the vedio.
The home page, with a cinematic hero section and a 3D device showcase
Browsing by category: Smartphones, Laptops, Audio, Gaming, Smartwatches, Smart Home and Accessories
Product pages with configuration and colour options, a zoom inspection view, pricing, stock status and customer reviews
The interactive 3D exploded view (“Explore Inside in 3D”), where you can take products apart layer by layer to see their internal components
Quick View, the device comparison matrix, the shopping bag and a full checkout flow (shipping details, payment, order review and confirmation)
Customer sign-in and an admin dashboard for managing the store
Website features
Interactive 3D exploded views of products, with labelled internal parts and an explode slider
A mega-menu navigation and fast category browsing
Product configuration (storage and colour variants) with live pricing
Wishlist, compare and shopping bag functionality
Device comparison matrix
A simulated checkout with order confirmation
Customer accounts (sign-in)
An admin dashboard with store stats and inventory and price management
A newsletter signup section
A toggle to turn the 3D experience on or off
A responsive, dark and light themed premium UI
Note: I made this video with the help of AI, and it is just a demo to show my skills. To see my work properly, I recommend visiting live website.
4
848
Sunny Rock — Cinematic Paris Travel Website | Creative Web Development
Experience Paris through Sunny Rock, a cinematic travel website concept designed to combine immersive visuals, elegant UI/UX, and interactive scrolling into a premium digital experience.
This self-directed project explores modern web design through cinematic imagery, scroll-driven animations, glassmorphism, smooth transitions, and responsive layouts.
🛠️ Technologies & Skills
HTML5 & CSS3 — Semantic structure, modern styling, and responsive layouts
JavaScript (ES6+) / TypeScript — Interactive behavior and animation logic
React.js — Reusable components, hooks, and state management
Tailwind CSS — Utility-first styling and responsive design
HTML5 Canvas API — 2D rendering for visual effects and image sequences
Scroll-Driven Animation — Frame-by-frame image sequences synchronized with scrolling
requestAnimationFrame & Linear Interpolation (Lerp) — Smooth animation updates
Lenis Smooth Scrolling — Fluid scrolling experiences
Intersection Observer API — Scroll-triggered reveals and entrance animations
UI/UX & Visual Design — Visual hierarchy, typography, glassmorphism, and interaction design
SVG Graphics — Scalable icons and vector elements
AI Visual Generation & Prompt Engineering — Cinematic visual assets
Cloudinary — Media hosting and image optimization
Performance Optimization — Efficient asset loading and animation rendering
Python & Browser Automation — Development utilities, asset processing, and testing
✨ Design Highlights
Cinematic, immersive visual storytelling
Premium travel-inspired aesthetic
Smooth, scroll-based animation sequences
Modern glassmorphism interface
Responsive layouts for different screen sizes
Interactive elements and refined micro-interactions
Project Type: Self-Directed Portfolio Project
Focus Areas: Creative Front-End Development · Web Design · UI/UX Design · Interactive Experiences · Animation
Designed and developed by Ubaid | Ubaid Web Studio.🔥
9
11
2K
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
407
Full-Stack Developer | MERN & WordPress Expert.
Looking for a high-performance website that stands out? 🚀
I specialize in crafting custom web experiences that combine pixel-perfect designs with powerful optimization. Whether you need a fresh landing page, an E-commerce build, or technical SEO improvements, I've got you covered! 💻⚡
Here’s what I can do for your business:
✅ Full-Stack Website Design & Development
✅ Custom WordPress & E-Commerce Integration
✅ Performance & Search Engine Optimization (SEO)
✅ High-Converting Landing Page Designs
Let's build your online identity together. Drop a comment or send a message right here on Contra to discuss your next project! ✨
#webdevelopment #wordpress #seo #ecommerce #fullstack #freelancing
1
61
Building fast, modern e-commerce experiences with React & Next.js 🚀
Here’s a quick walkthrough of a custom e-commerce storefront I built, featuring clean product architecture, smooth navigation, and responsive UI components designed for high conversions.
Key highlights of this build:
Modern Tech Stack: Built with React / Next.js for instant page loads and seamless browsing.
Conversion-Focused UI: Clean product cards, dynamic variant previews, and clear call-to-action flows.
Custom & Scalable: Zero bloated templates—built from the ground up for speed and performance.
Looking to launch a custom online store or upgrade your existing e-commerce website? Send me a message right here on Contra to discuss your project! ✨
#nextjs #reactjs #ecommerce #webdevelopment #fullstackdeveloper #frontend
0
9
Full Stack Developer
VELOUR is a luxury perfume-store concept featuring a cinematic 3D entrance: the camera approaches the boutique, the doors open, and visitors discover the fragrances inside.
The experience includes interactive perfume bottles, animated spray effects, a personalized scent quiz, product filtering, bottle-size selection, and a shopping bag. A complete demo checkout takes visitors through delivery details to an order-confirmation screen.
Built with HTML, CSS, JavaScript, and WebGL, with responsive layouts and motion controls. This is a frontend showcase; checkout does not process real payments or orders.
6
5
442
GymFlow is a responsive gym website that brings membership plans, trainer profiles, and fitness tools together in a polished, easy-to-navigate interface.
The website features a landing page, membership plans section, professional trainers page, statistics dashboard, BMI calculator, and admin panel. Its glassmorphism styling and responsive layouts create a consistent experience across desktop and mobile devices.
Built with HTML5, CSS3, JavaScript, and Node.js.
1
113
Introducing Aurelia 🍽️ my food delivery web app with a dark olive and gold design, smooth animations, and a responsive layout.
Built with React, Node.js, Express, and MongoDB, it features restaurant browsing, searchable menus, cuisine filters, and a shopping cart with a demo checkout.
I wanted the experience to feel as inviting as the food itself. Here’s a look at what I’ve been building!
What do you think of the design? ✨
2
1
152
My portfolio is live! ✨
I’m Arooj, a full-stack developer building responsive websites and web applications. My portfolio brings together projects like SafeSocial, Aurelia, and GymFlow, with a dark theme, soft pink accents, and interactive animations.
Take a look: https://arooj-portfolio-ivory.vercel.app
I’m available for freelance projects and collaborations. If you need a website or web app, let’s connect!
I’d love to hear your feedback on the design 💬
4
7
448