Olmo Studio

Olmo Studio is a professional, high-performance digital studio template built for agencies, creative studios, and professionals who want to lead with impact, performance, and a cinematic visual edge. Designed with Astro 5 and React 19, this template combines bold, modern layouts with buttery-smooth GSAP animations and a robust content structure to guide visitors through your services and projects effortlessly.

Challenge and Solutions

• Performance vs. Motion: Achieved ultra-fast loading speeds while maintaining professional-grade GSAP transitions and scroll-triggered animations through Astro’s partial hydration strategy.
• Scalable Architecture: Implemented a centralized content system using a labels.ts file and TypeScript-powered configurations, allowing easy updates across all pages without touching core code.
• Production-Ready Contact: Developed a secure contact form with server-side Zod validation and Resend API integration, including optional Upstash Redis anti-spam protection.
• Unique Portfolio Experience: Created a sticky card stacking effect for the desktop project showcase, where cards stack with scale animations for a memorable browsing experience.

Features

• Ultra-fast Performance: Built with Astro 5 for optimal loading speeds and top-tier SEO optimization.
• Smooth Motion Design: Professional GSAP-powered transitions, scroll-triggered animations, and Lenis smooth scrolling.
• Complete Page Set: Includes Home, Works (Portfolio), Studio (About), Contact, Services, and Legal pages with individual project detail pages generated from Markdown.
• Type-Safe Configuration: All site data (team, services, values, testimonials) managed through TypeScript for error-free customization.
• Smart Navbar: Header that shrinks and gains rounded corners on scroll via GSAP animations.
• Responsive Design: Meticulously optimized for mobile, tablet, and desktop viewing experiences.

Future Improvements

• Multi-language Support: Leverage the existing labels.ts structure to implement full internationalization (i18n).
• Headless CMS Integration: Connect content collections to platforms like Sanity or Contentful for non-technical content management.
• Advanced Analytics: Integrate project view tracking and visitor behavior insights.