🚀
Triodash Platform
US Startup
Next.js • 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. Framer Motion powered the smooth scrolling animations and page interactions. 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
Framer Motion - Advanced animations and interactions
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 with scroll-linked animations
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