Monopo Saigon Creative Agency Portfolio

Overview

This website is the portfolio for Monopo Saigon, a creative agency, showcasing a sophisticated blend of high-end typography and immersive motion. It serves as an excellent reference for builders looking to implement a "dark mode" aesthetic paired with advanced scroll-driven animations and interactive WebGL elements.

Design System

• Color Palette & Visual Hierarchy: The design uses a deep charcoal/black background (#000000) providing high contrast for white and off-white text. Accents are introduced through textured image backgrounds and a "light mode" transition in specific sections (like the 'Partners' and 'Strengths' areas) to break the visual rhythm.
• Typography: The system relies on Roobert for a clean, modern sans-serif look and Raleway for localized Vietnamese text. The hierarchy is established through a massive display scale in the hero section and italicized "i" and "o" characters throughout the body text to create a bespoke, rhythmic brand signature.
• Page Structure: The flow follows a linear narrative: an interactive Canvas hero (#lens-artwork), followed by a vertical Selected Projects list, a Manifesto with text-reveal masks, a Strengths section featuring auto-playing MP4/WebM loops, a rotated image grid (.tiles--rotated), and finally an expandable accordion-style Team section.
• Reusable Components:
  • Project Cards: Overlapping image containers with sub-text categories.
  • Accordion Team Cards: Vertical list items that expand to reveal long-form bios and social links via a toggle button (.container-btn).
  • Rotated Tile Grid: A horizontal-scrolling image mosaic that uses transform: matrix3d for a skewed perspective.
• Interaction & Motion: The site utilizes Locomotive Scroll (indicated by data-scroll-container) for smooth, inertial scrolling. Notable patterns include parallax on images (data-scroll-speed), text mask reveals in the Manifesto, and a custom dot cursor that follows the mouse.
• Implementation Clues: The HTML confirms a Nuxt.js framework build. It uses HTML5 video for background assets and a <canvas> element for the interactive hero lens effect.

Use Cases

• Who should clone this: Creative agencies, individual directors, or high-end architectural firms that need a portfolio that feels "designed" rather than just functional.
• Product Remixing: This pattern works effectively for luxury brand landing pages or experimental product launches where visual storytelling outweighs dense information architecture.
• Practical Directions:
  • Quick Clone: Reuse the "Team" section's expandable card logic for an FAQ or a Bio page.
  • Full-Page Clone: Replace the @monopo.vn assets with bold photography to create a cinematic brand experience.
  • Selective Reuse: Adapt the rotated image grid (#tilesGrid) to create a unique gallery section for an e-commerce lookbook.
• Suggested Scope: A full-page clone is recommended to maintain the consistent scroll-velocity feel, though the individual project cards and accordion team members are highly portable.