Studio Thomas Full-Screen Portfolio

Overview

This minimalist portfolio design uses high-impact visual layering and vertical scroll-snapping to create a cinematic browsing experience. It is a premier reference for designers wanting to master full-screen layouts that balance bold typography with immersive, parallax-enhanced backgrounds.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast, dual-tone strategy for its hero (Blue background #4A6FEA vs. Gold circle #CEA44A). The hierarchy is flat but impactful, relying on large-scale geometry and centralized, high-contrast black typography to anchor the user's focus.
• Typography System: A clean, modern sans-serif is used throughout. The hero features a large-scale h1 with "snug" line-height to maximize boldness, while case study titles (h2) are smaller but paired with distinctive underlined "View project" links.
• Page Structure & Flow: The flow is built on a fullpage-wrapper. It starts with a parallax hero section (.section.text-center), followed by a series of full-height case study slides (.section.home-project.fullscreen-media), and concludes with a text-heavy approach panel for studio information.
• Reusable Components:
  • Parallax Shape Container: The #scene div with data-depth attributes creates a multi-layered circle effect that reacts to cursor movement.
  • Dynamic Header: A sticky .header-wrap that alternates between "default" and "dark" states based on the background color of the active section (using the midnight.js logic seen in the HTML).
  • Responsive Media Slides: <picture> elements with multiple sources optimized for both portrait (max-width: 768px) and landscape orientations.
• Interaction & Motion: The site utilizes vertical scroll-snapping (fp-section classes indicating fullpage.js usage). Links feature a line-animation hover state, and the hero circle uses a 3D transform effect (translate3d) for depth.
• Implementation Clues: The HTML reveals a dependency on fullPage.js for section transitions and likely Parallax.js for the hero animation. The header uses midnightHeader classes to handle color switching during scroll transitions.

Use Cases

• Who should clone this: Creative directors, photographers, and branding agencies who want their work to be the primary interface rather than traditional UI components.
• Product Remixes: This pattern effectively suits luxury brand landing pages, architecture portfolios, or digital lookbooks where image quality and "vibe" outweigh dense information density.
• Practical Directions:
  • Brand Swap: Change the hero circle to a brand-specific SVG or a video mask while keeping the scroll-snap logic.
  • UI Adaptation: Replace the full-screen images with high-resolution video backgrounds for a more dynamic feel.
  • Modular Reuse: Clone just the parallax hero section to act as an entry point for a more traditional long-scroll website.
• Suggested Clone Scope: A full-page clone is recommended to maintain the integrity of the scroll-snap transitions and the dynamic header behavior, though the .home-project slide is an excellent standalone component for any gallery.