WHCP — Agency Website

Matija Žiberna

Web Designer

Fullstack Engineer

Copywriter

Next.js

PostgreSQL

Supabase

🚀 Project Overview

A high-performance marketing website for a development-as-a-service agency, featuring advanced animations, multilingual support, and SEO-optimized static generation.

Projects's homepage

Key Features:

Smooth GSAP animations in SSR environment

i18n implementation supporting English/German/Slovenian

Static-generated resource pages (FAQs, Blogs, Case Studies)

CMS-like content updates without client-side JavaScript

Interactive service configurator with pricing calculator

Unique Value Proposition: Combines marketing-site appeal with web-app functionality, achieving 95+ Lighthouse performance scores while maintaining rich interactivity.

Project Timeline: 6 weeks development + 2 weeks client revisions

🛠️ Technical Stack

Frontend:

Next.js 14 (App Router)

GSAP + React-spring hybrid animation system

Tailwind CSS + Shadcn UI component library

next-i18next for multilingual routing

Figma files for the project

Backend:

Supabase (PostgreSQL) for CMS content

Vercel Edge Config for geo-based language routing

💡 Technical Challenges & Solutions

1. Animation Hydration Mismatch Challenge: GSAP animations causing layout shift in SSR Solution: Created animation wrapper with useIsomorphicLayoutEffect and CSS will-change property optimization

2. Multilingual Static Generation Challenge: 3x content volume impacting build times Solution: Incremental static regeneration with localized cache revalidation

3. CMS-like Flexibility Without Client JS Challenge: Client needed rich text editing without CSR Solution: Pre-rendered Supabase content with portable text serialization

🔗 Links & Documentation

Live Demo:

🎓 Learning Outcomes

Technical:

Hybrid animation patterns for SSR frameworks

i18n implementation strategies for static sites

Contentful-ssg content pipelines

💼 Project Impact

For Client:

40% faster page loads vs previous WordPress site

25% increase in contact form submissions

Development Insights:

Created reusable i18n animation presets library

Documented SSR-safe GSAP patterns now used in 3+ projects

Like this project

Posted Jan 28, 2025

Built WHCP’s marketing site from wireframes to deployment. Partnered with a designer, wrote copy, and coded the Next.js frontend with GSAP animations.

Likes

Views