Roofstacks

A corporate site that keeps several products, services and companies legible as the portfolio grows.

Client: Roofstacks
Year: 2025
Role: Frontend Developer
Context: Istcode Digital Agency
Services: Corporate website, Information architecture, Motion
Stack: Next.jsTypeScriptTailwind CSSGSAP

Mockup/projects/roofstacks/hero.mp416:9 2400 × 1350

Overview

Roofstacks runs several products under one roof. The site had to present all of them without any one burying the others.

Mockup/projects/roofstacks/detail-1.jpg4:5 1920 × 2400

Mockup/projects/roofstacks/detail-2.jpg4:5 1920 × 2400

Challenge

A visitor should reach any product or service in two moves, regardless of which page brought them in.

Approach

Navigation and section components were built around that two-move rule. GSAP transitions make the hierarchy readable while scrolling rather than adding effect for its own sake.

Mockup/projects/roofstacks/wide-1.jpg16:9 2400 × 1350

Mockup/projects/roofstacks/interaction.mp44:3 2400 × 1800

Mockup/projects/roofstacks/detail-3.jpg3:4 1800 × 2400

Outcome

Shared components across pages mean new products can be added later without redesigning the shell around them.

Next Project

TURK Fatih Tutak

Mockup/projects/turk-fatih-tutak/cover.jpg4:3 2400 × 1800