Website: Balthazar Project

Name: Website: Balthazar Project
Author: Balthazar Project

Our own cutting-edge website showcasing advanced web technologies, AI integration, and sophisticated technical architecture.

ReactViteTailwind CSSi18nFramer MotionAdvanced SEO

The Challenge

Building a software agency website that not only showcases technical capabilities but also serves as a living demonstration of best practices in modern web development. The site needed to be blazingly fast, fully accessible, multilingual, and optimized for search engines while maintaining a premium, professional aesthetic.

•Traditional agency websites often sacrifice performance for visual flair
•Achieving true multilingual support (EN/SV) with proper SEO requires careful architecture
•Smooth animations and interactions typically increase bundle size and harm performance
•Local SEO for 13+ Swedish cities requires dynamic page generation at scale

Our Solution

We built our website using Next.js 15 with the App Router, implementing a hybrid static/dynamic rendering strategy. The site features 100% static generation for core pages, comprehensive i18n with next-intl, GSAP-powered animations that load progressively, and an automated local SEO system generating 78+ city/service landing pages.

•Next.js 15 App Router with route groups for clean separation of public and internal routes
•Comprehensive i18n setup with locale-specific slugs and proper hreflang implementation
•GSAP ScrollTrigger animations with progressive loading to maintain performance
•Automated local SEO page generation for 13 cities × 6 services = 78 landing pages

System Architecture

The website follows a modern Jamstack architecture with Next.js handling both static generation and dynamic API routes. Content is managed through JSON translation files, enabling rapid updates without CMS complexity while maintaining full type safety.

Next.js 15 App Router

Route groups separate public pages, internal CRM, and API routes with optimized layouts

App Router, Route Groups, Parallel Routes, Static Generation

i18n System

next-intl provides type-safe translations with locale-specific routing and SEO optimization

next-intl, EN/SV locales, Locale-specific slugs, hreflang tags

Animation Engine

GSAP with ScrollTrigger creates smooth, performant animations without impacting Core Web Vitals

GSAP, ScrollTrigger, Framer Motion, CSS-first approach

SEO Infrastructure

Comprehensive schema markup, dynamic sitemaps, and automated local SEO page generation

JSON-LD schemas, Dynamic sitemap.ts, 78 local SEO pages

Technology Stack

Frontend

Next.js 15React 19TypeScriptTailwind CSSGSAPFramer Motion

Content

JSON Translation FilesMDX Supportnext-intlType-safe i18n

SEO

JSON-LD SchemasDynamic SitemapsLocal SEO PagesOpen Graph

Performance

Static GenerationImage OptimizationCode SplittingEdge Caching

Infrastructure

Firebase HostingGitHub Actions CI/CDCloudflare CDNAutomated Deploys

Performance-First Animation Architecture

We developed a unique approach to web animations that maintains 90+ Lighthouse scores while delivering premium visual experiences. The key is progressive enhancement and careful separation of decorative vs. essential animations.

GSAP ScrollTrigger Integration

Scroll-driven animations using GSAP with optimized scrub values and proper cleanup to prevent memory leaks

CSS-First Approach

Simple transitions use pure CSS, reserving JavaScript animations for complex sequences that truly need them

Progressive Loading

Animation libraries load after initial paint, ensuring fast First Contentful Paint regardless of animation complexity

Reduced Motion Support

Full prefers-reduced-motion support disables decorative animations for accessibility compliance

Local SEO at Scale

Dynamic page generation creates unique, content-rich pages for each city/service combination with proper schema markup

Performance Metrics

Our website demonstrates that exceptional design and peak performance are not mutually exclusive. By prioritizing static generation and progressive enhancement, we achieved industry-leading metrics.

90+

Lighthouse Score

78+

Local SEO Pages

100%

Static Generation

Languages (EN/SV)

Next Project

Arktis-1: Privacy-Focused AI Assistant →

The Challenge

•Traditional agency websites often sacrifice performance for visual flair

•Achieving true multilingual support (EN/SV) with proper SEO requires careful architecture

•Smooth animations and interactions typically increase bundle size and harm performance

•Local SEO for 13+ Swedish cities requires dynamic page generation at scale

Our Solution

•Next.js 15 App Router with route groups for clean separation of public and internal routes

•Comprehensive i18n setup with locale-specific slugs and proper hreflang implementation

•GSAP ScrollTrigger animations with progressive loading to maintain performance

•Automated local SEO page generation for 13 cities × 6 services = 78 landing pages

System Architecture

Next.js 15 App Router

Route groups separate public pages, internal CRM, and API routes with optimized layouts

App Router, Route Groups, Parallel Routes, Static Generation

i18n System

next-intl provides type-safe translations with locale-specific routing and SEO optimization

next-intl, EN/SV locales, Locale-specific slugs, hreflang tags

Animation Engine

GSAP with ScrollTrigger creates smooth, performant animations without impacting Core Web Vitals

GSAP, ScrollTrigger, Framer Motion, CSS-first approach

SEO Infrastructure

Comprehensive schema markup, dynamic sitemaps, and automated local SEO page generation

JSON-LD schemas, Dynamic sitemap.ts, 78 local SEO pages

Technology Stack

Frontend

Next.js 15React 19TypeScriptTailwind CSSGSAPFramer Motion

Content

JSON Translation FilesMDX Supportnext-intlType-safe i18n

SEO

JSON-LD SchemasDynamic SitemapsLocal SEO PagesOpen Graph

Performance

Static GenerationImage OptimizationCode SplittingEdge Caching

Infrastructure

Firebase HostingGitHub Actions CI/CDCloudflare CDNAutomated Deploys

Performance-First Animation Architecture

GSAP ScrollTrigger Integration

Scroll-driven animations using GSAP with optimized scrub values and proper cleanup to prevent memory leaks

CSS-First Approach

Simple transitions use pure CSS, reserving JavaScript animations for complex sequences that truly need them

Progressive Loading

Animation libraries load after initial paint, ensuring fast First Contentful Paint regardless of animation complexity

Reduced Motion Support

Full prefers-reduced-motion support disables decorative animations for accessibility compliance

Local SEO at Scale

Dynamic page generation creates unique, content-rich pages for each city/service combination with proper schema markup