Back to Portfolio
🚀
Triodash Platform
US Startup
Next.js • GSAP • Framer Motion • Tailwind CSS • Express.js
🎯The Challenge
A US startup needed a pixel-perfect website built from an Adobe XD mockup with advanced animations, horizontal scrolling, multi-step forms, and a custom backend—all while maintaining blazing fast performance and staying within a tight budget for hosting.
💡The Solution
I built a static site using Next.js for optimal performance and SEO. GSAP with ScrollTrigger powered the smooth scrolling animations, while Framer Motion added polish to interactions. The horizontal scrolling about page was implemented using GSAP's horizontal scroll feature. Tailwind CSS ensured pixel-perfect styling that matched the Adobe XD design. For the backend, I created a lightweight Express.js API for form handling, also hosted on Vercel to keep costs minimal.
🛠️Technologies Used
Next.js - Static site generation for speed
GSAP & ScrollTrigger - Advanced scroll animations
Framer Motion - UI interactions and transitions
Tailwind CSS - Pixel-perfect styling
Express.js - Custom form handler backend
Vercel - Cost-effective hosting for both frontend and backend
✨Key Features
SVG animations on hero section with custom drawn paths
Intuitive mega menu with smooth transitions
Horizontal scrolling about page using GSAP
Multi-step forms with validation and progress tracking
Custom email handler backend with Express.js
Optimized images and lazy loading for performance
🚀Results & Impact
Super fast load times with static generation
Pixel-perfect match to Adobe XD mockup
Smooth, professional animations throughout
Cost-effective hosting on Vercel
Scalable form handling with custom backend
Excellent user experience on all devices