2024
20 Degrees
A visually immersive website for a wellness startup using GSAP and ScrollTrigger for complex scroll-driven animations while maintaining high performance.
20 Degrees, a California-based wellness startup brimming with modern design and captivating animations. I poured all my best practices and learnings into this beauty and optimizing its performance.
1. Core Architecture & Build Systems
I transitioned the project from simple file uploads to a professional-grade production pipeline.
Modern Bundling: Configured Webpack and implemented the html-webpack-bundler-plugin to manage assets, CSS, and JS minification.
Production Stability: Resolved complex build issues, such as the "embedded CSS semicolon" bug in production and cache-busting for assets.
Cross-Platform Consistency: Squashed "font smoothing" and rendering bugs specifically for Chrome on macOS and Safari on iOS.
2. Advanced Frontend Features & UX
I built more than just static pages; I created a reactive, user-aware interface.
OS-Specific Intelligence: Developed logic to detect the user's Operating System (iOS vs. Android) to dynamically show the correct App Store/Play Store links and QR codes.
Dynamic Content Engine: Built a dynamic Blog Index that supports category filtering and real-time updates without manual page creation for every post.
4K & Responsive Optimization: Standardized the design system (border-radii, button styles) and performed deep CSS refactoring to ensure the site looks premium on everything from mobile to 4K monitors.
In-App Customization: Implemented `?inApp=true` query parameters to detect and hide web headers when the site is viewed inside the mobile app's webview.
3. Fintech & E-commerce Integration
I handled the critical "money" side of the business by integrating secure payment flows.
Stripe Integration: Built the complete Pricing and Checkout flow, including handling Stripe payloads and debugging API responses.
User Personalization: Added logic to capture emails from URL query parameters (`prefilled_email`) to auto-populate the checkout page, reducing friction.
Post-Purchase Experience: Created custom, responsive Success and Cancel pages with detailed order confirmations and integrated FAQs.
4. Marketing & Growth Stack
I integrated the site with enterprise-level marketing and support tools.
Brevo (Sendinblue) Integration: Deployed and customized various forms (Contact Us, Early Access, Joining Waitlist) with custom JS logic for success/failure messaging.
Bot Protection: Implemented Google reCAPTCHA across all forms to prevent spam while maintaining a smooth user experience.
Freshdesk Support: Integrated a live chat widget and customized its design to match the "20 Degrees" branding perfectly.
App Integration: Deployed Apple Smart App Banners to drive traffic from the website directly into the mobile app.
5. Technical SEO & Performance (The "Lighthouse" Mastery)
This is where my work as an optimization expert shines.
Performance Optimization: Implemented Lazy Loading for images. Deferred heavy scripts (Freshdesk, Brevo, and Captcha) so they only load when needed or after a delay, drastically improving initial load times. Performed image compression and asset renaming for better indexing.
SEO Infrastructure: Managed the `robots.txt` and `sitemap.xml` files, updated canonical URLs, and implemented internal linking strategies across blogs to boost domain authority.
Metadata Management: Configured Open Graph (Twitter/Facebook) schema tags and favicons for professional social sharing.
Summary of Impact
Fast: (Lazy loading, deferred scripts, minified code).
Scalable: (Webpack-based build system, dynamic blog engine).
Revenue-Ready: (Stripe integration, pre-filled checkouts).
Integrated: (Connected to CRM, Support, and Mobile App ecosystems).
Live Demo
Technologies
WebpackStripe APIGSAPScrollTriggerBrevo CRMSEOPerformance OptimizationUI/UX