Foldly Journal
Project
02 / 16
Website
Scope
Editorial architecture | Frontend engineering | Motion
Status
Live Project
Summary
Foldly Journal gives the product a place to explain the human side of file handoffs through field notes, customer stories, and practical guidance. The experience opens with an image-led story carousel, then moves into focused article pages led by the writing, author context, and related navigation.
Published stories use a defined content model for titles, authors, categories, media, body blocks, and calls to action. Canonical metadata, social images, BlogPosting structured data, static route generation, and previous or next story links make every article a durable page that can be shared and indexed independently.
Inside the Build
Foldly Journal supports both checked-in stories and a Supabase-backed source through one content contract. Zod schemas validate incoming records and public asset paths before they reach the interface, while cache tags and an authenticated revalidation route publish approved content updates within the public read boundary.
Foldly Journal's carousel uses GSAP timelines, decoded image warm-up, timed progress indicators, keyboard and pointer navigation, and route-aware transitions. Isolated, tested motion plans coordinate foreground images, blurred backdrops, titles, profiles, and calls to action as one sequence.
Contribution
- I designed a typed public-story model with validated content and media boundaries
- I built repository adapters for static and database-backed publishing
- I created the timed editorial carousel and article transition system
- I added canonical metadata, structured data, cache control, and revalidation
Built with
- Next.js 16
- React 19
- TypeScript
- GSAP
- Supabase
- Zod
