केस स्टडी
CodeMirror
पुणे के एक design, development और automation studio के लिए scroll-driven company website और content admin।
CodeMirror पुणे का एक technology partner है जो digital products design, build और automate करता है। मैंने उनकी नई website end to end बनाई — scroll-driven particle hero, pinned services और process scenes, SEO-ready service pages, और एक admin panel जहाँ team बिना code छुए services, work, reviews, jobs और enquiries edit करती है।
गैलरी
योगदान
- नई CodeMirror website का build lead किया — पहले layout से लेकर production-ready Next.js app तक।
- Scroll-driven Three.js particle hero बनाया जो design, develop और automate phases से होकर बदलता है।
- GSAP ScrollTrigger और Lenis से pinned services deck और horizontal process timeline लागू की।
- Per-service metadata, FAQs, sitemap, robots और JSON-LD के साथ SEO-ready service pages ship किए।
- Services, work, reviews, jobs, enquiries और site settings के लिए Supabase पर admin panel बनाया।
परिणाम
एक modern, admin-editable company website deliver की जो CodeMirror के design, development और automation काम को एक साफ़ scroll story में दिखाती है।
तकनीकी निर्णय
Scroll-choreographed marketing site
Next.js App Router site जहाँ GSAP ScrollTrigger और Lenis एक ही scroll clock से hero, services deck और process timeline चलाते हैं।
Next.js · GSAP · Lenis · Three.js
Content code से बाहर
Services, projects, reviews, jobs और settings एक छोटी store layer के पीछे Supabase में रहते हैं, और पहली बार चलने पर starter content से seed होते हैं।
Supabase · TypeScript
Team के लिए admin panel
एक protected admin area जहाँ हर public section edit होता है, contact enquiries पढ़ी जाती हैं और job openings post होती हैं — updates के लिए developer की ज़रूरत नहीं।
Next.js · Supabase
चुनौतियाँ
भारी motion, फिर भी तेज़ page
WebGL particle hero और कई pinned scroll scenes आसानी से load time बिगाड़ सकते हैं और phones पर अटकते हुए लग सकते हैं।
समाधान: Particle shaders हल्के रखे, scenes सिर्फ़ वहीं pin किए जहाँ जगह है, और छोटी screens व reduced motion पर सीधा layout दिया।
एक team, कई services
Design, development और automation की आठ services को homepage को catalogue बनाए बिना साफ़ दिखाना था।
समाधान: Homepage पर story को design, develop और automate phases में बाँटा, और detail के लिए हर service को अपना SEO page दिया।