Moxai
React
Next.js
Tailwind CSS
TypeScript
Lenis
Landing page for a web development agency, built with Next.js, Tailwind CSS, TypeScript, and Lenis. Project focused on SEO and performance.
My Role: Full Stack Developer
Client: Web development agency from Mexico
Duration: 3 Weeks
About this project
- Next.js Foundation: Hybrid static & server-side rendering with Incremental Static Regeneration (ISR) for blazing performance and fresh content.
- Modular React Components: Atomic-design pattern using TypeScript + Tailwind CSS for reusable, maintainable UI modules and rapid iteration.
- Smooth Scrolling (Lenis): Hardware-accelerated, jank-free scroll experiences orchestrated by Lenis for seamless user engagement.
- Frame-Perfect Animations (GSAP): GSAP timelines & ScrollTrigger to choreograph high-impact animations without sacrificing responsiveness.
- SEO-First Strategy: Dynamic meta tags, Open Graph, JSON-LD structured data, sitemap generation, and robots.txt for optimal crawlability.
- Pixel-Perfect Design: Figma → Tailwind CSS translation with strict design tokens and sub-pixel accuracy across all viewports.
- Image Optimization & CDN: Next.js Image component with AVIF/WebP fallbacks, integrated with CloudFront CDN for minimal Time to Interactive.
- TypeScript-Driven Quality: End-to-end type safety to eliminate runtime errors and accelerate developer onboarding with self-documenting code.
- Performance Monitoring: Lighthouse CI in the CI/CD pipeline and Real User Monitoring probes to catch regressions and maintain 90+ Lighthouse scores.
Screenshots
