Project Case Study
Dopóki Życie Trwa
Monastic noir digital magazine about discipline, stoicism, and the body
A brutalist editorial platform for essays on carnivore diet, cold exposure, endurance, and stoic philosophy. Includes CMS, WebGL shaders, scroll animation, newsletter, and SEO, built solo in two weeks.
Metrics
2 weeks (solo, nights & weekends)
Build time
30+
Features shipped
3 pillars
Content categories
01
Overview
Dopóki Życie Trwa ("While Life Lasts") is an editorial site with articles organized around three pillars: CIAŁO (Body), HART (Grit), and DUCH (Spirit). The build includes a custom dark visual identity, desaturated imagery, cinematic typography, and a WebGL-driven hero.
02
Key Highlights
- WebGL shader hero: Custom GLSL fragment/vertex shaders via React Three Fiber creating an ice-like, breathing texture with center glow, vignette, and hover-reactive distortion.
- Cinematic scroll experience: GSAP ScrollTrigger–powered parallax dispersal — each typographic line animates independently with blur, scale, and directional movement.
- Headless CMS editorial system: Sanity Studio with custom schemas for articles, categories, authors, and block content — including monologue blocks, protocol boxes, and data tables.
- Newsletter & audience building: Email capture via Resend API with Zod validation, inline and footer form variants, and a dedicated landing page.
- Full SEO & content distribution: Dynamic sitemap, RSS feed, JSON-LD structured data, Open Graph, robots.txt, and Google Analytics integration.
03
Technical Notes
- Next.js 16 + React 19 with App Router, server components, ISR (60s revalidation), and dynamic draft preview mode via draftMode().
- Three.js / React Three Fiber for the hero section — custom GLSL shaders with vertex displacement, UV distortion, desaturation, cold tinting, and pulsating center glow.
- GSAP ScrollTrigger orchestrating pinned hero parallax, manifesto text reveal, image parallax, and horizontal marquee for category titles.
- Sanity CMS with custom Portable Text components (monologue, protocol box, data table), markdown alternative input, image hotspot cropping, and YAML-based article import scripts.
- Resend for transactional newsletter emails with server-side API route and client-side optimistic UI.
- Tailwind CSS 4 with custom design tokens: onyx, bone, blood, steel, charcoal — enforcing the monastic noir visual language across every component.
04
Results
- Full editorial platform delivered in two weeks, solo, with 30+ shipped features.
- Custom WebGL hero renders at 60fps with smooth pointer-reactive distortion and cinematic scroll dispersal.
- Content pipeline from YAML → Sanity import script → Studio → live article with SEO, RSS, and newsletter in a single workflow.
- Lighthouse performance optimized: dynamic imports for Three.js, lazy-loaded images, font optimization (Oswald + Montserrat via next/font), and ISR caching.