The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Designed a professional client onboarding intake form for NightShift Leads — used to collect all required information from HVAC, plumbing, and roofing businesses before chatbot setup begins. Covers business details, website access credentials, chatbot tone preferences, lead delivery preferences, and service agreement authorization. Ensures consistent and professional onboarding for every client from day one.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Interactive Themed Developer Portfolio & Web Showcase | React, Framer Motion & Tailwind CSS
Key Features & Highlights:
Custom Vector Artwork & Layered Visuals:
Implemented an intricate, responsive fixed SVG backdrop showcasing a night cricket oval under floodlights, illuminated mountain peaks, starry sky, and subtle ambient glows.
Preserved full content readability and contrast using layered dark vignettes and custom opacity masks.
Fluid Framer Motion Animations:
Designed staggered entry transitions, conic orbit rings, continuous pulse indicators, and interactive micro-animations.
Added smooth hover states, reactive button effects, and dynamic drawer transitions.
Modern Glassmorphism UI:
Applied frosted glass design patterns (backdrop-blur, semi-transparent RGBA palettes, and soft glowing border outlines) across all cards, timelines, forms, and navigation elements to allow the themed backdrop to show through elegantly.
Clean Architecture & Iconography:
Streamlined visual consistency by adopting modern vector icon sets via react-icons across navigation, badges, timeline bullets, and interactive controls.
Purged unnecessary toggles and redundant state to enforce a refined, distraction-free aesthetic.
Full-Stack Form Integration:
Configured asynchronous contact messaging using EmailJS with client-side validation, error handling, status banners, and loading indicators.
Optimized & Responsive:
100% mobile, tablet, and desktop responsive layout with a custom slide-out navigation drawer.
Built using Vite for optimized bundle sizes, fast hot module replacement (HMR), and clean production builds.
Tech Stack:
Frontend: React 18, React Router, JavaScript (ES6+)
Styling & Design: Tailwind CSS, PostCSS, Custom CSS Variables, Glassmorphism
Animation & Interactivity: Framer Motion
Icons & Assets: React Icons (react-icons), Custom Vector SVG
Third-Party Services: EmailJS
Build Tooling: Vite
Impressive attention to detail. The themed visuals and smooth animations give the portfolio a distinctive identity.
AI Email Automation with n8n and Google Gemini
An AI workflow that reads every incoming email, sorts it into 6 categories, and takes the right action automatically.
The problem: businesses lose time and leads because customer emails are mixed with promotions, job alerts, and security emails.
What I built:
Gmail Trigger that picks up each new email
AI Text Classifier (Google Gemini) with 6 categories: Security Alert, Promotions, Jobs, Personal, Payments, and Client Inquiries
Automatic Gmail labels for every category
Google Sheets log for jobs, leads, and payments
AI information extraction for client emails (name, phone, service, budget)
AI-written reply drafts for client emails, saved as drafts so a person approves every reply
Instant Discord alerts for security, payment, and client emails
Tools: n8n, Google Gemini, Gmail, Google Sheets, Discord
This project is a working demo built on my own inbox. The same system can be adapted to any business email, such as travel agencies, event venues, stores, recruiters, and consultants.
Impressive workflow! I especially like the human approval step for AI-written replies. Automation with the right oversight makes a real difference. 🙌
Brand Fill Loader: your logo is the loader.
Drop in any logo and it fills up like liquid while a rolling counter climbs to 100%, then the logo pops and a check badge lands. It is made for SaaS upload, export and onboarding screens, where a generic spinner would normally sit.
To rebrand it, replace one logo image, retype three texts (status, done message, brand name) and change two colors. The second brand in the video (Nimbus Pay) was made through the SVGator MCP in six edits.
Named layers: logo, status-text, status-done, brand-name, progress-bar, badge-bg, percent. Motion designed in code, project built and rebranded through the SVGator MCP, then checked in the SVGator editor.
Amaixng dear