Concrete Club Portfolio Landing Page

Overview

Concrete Club is the personal portfolio of Gaétan Pautler, featuring a striking, experimental aesthetic centered around bold color and large-scale typography. It is an excellent clone reference for creatives who want to master horizontal scrolling layouts, canvas-integrated backgrounds, and refined hover-state interactions.

Design System

• Color Palette & Visual Hierarchy: The site utilizes a high-contrast palette consisting of a primary coral-red background (rgb(217, 70, 43)) and a light mint/off-white text color (rgb(215, 229, 216)). The hierarchy is driven by size; massive typography dominates the screen, while navigation and secondary metadata are tucked into the corners.
• Typography: A sophisticated high-contrast serif typeface is used for large headings, giving it a classic editorial feel. Smaller UI elements and body text utilize a clean, monospace-adjacent sans-serif for technical clarity and "meta" information (e.g., location and time stamps).
• Structure & Flow: The site follows a vertical-to-horizontal flow. It opens with an massive animated hero section, transitions into a three-column text story supported by canvas animations, and moves into a project gallery composed of two horizontally-scrolling rows. It concludes with a list of "Selected Rules."
• Reusable Components:
  • Project Preview Card: A sophisticated implementation including a base image and a secondary .project-preview__image-hover layer that displays a GIF on mouseover.
  • Overlay Nav System: A persistent grid-based overlay providing context on where the user is within the scroll progress.
  • Canvas Backgrounds: Lightweight <canvas> elements placed behind text to provide organic, fluid-like movement.
• Interaction & Motion: The site relies heavily on GSAP or similar JS-driven animation for sticky horizontal scrolling. The headers use mask-path polygons for revealing text, and buttons use dramatic 100% translation shifts for entry/exit animations.
• Implementation Clues: Built with Nuxt (id="__nuxt"), the site leverages Vue-based component state for page transitions. The scroll logic uses absolute positioning and transform: translate to convert vertical scroll distance into horizontal project movement.

Use Cases

• Creative Agency Portfolio: Agencies aiming to showcase high-impact visual work through a unique gallery format rather than traditional grids.
• Product Lookbooks: Fashion or lifestyle brands can remix the horizontal project rows to display seasonal collections with dynamic GIF previews of clothing in motion.
• Artisan Showcase: Individual artists or architects can reuse the "Selected Rules" and "Story" sections to communicate their design philosophy with experimental typography.
• Practical Remix Directions:
  • Brand Swap: Replace the coral-red with a neutral dark mode (black/steel) to instantly professionalize the aesthetic for more corporate creative services.
  • Scope-Down: Clone just the home-projects row wrapper to add a horizontal scroll feature to a standard vertical landing page.
  • Navigation Focus: Reuse the corner-anchored, minimal header for a distraction-free mobile-first design.