Huy Phan Design Portfolio Hero

Overview

This minimalist design portfolio showcases a high-end, "designer-centric" visual style characterized by sophisticated typography and expansive negative space. It is a premier reference for builders looking to master GSAP-powered character animations (splitting.js) and seamless page transitions (Barba.js) within a clean, modern interface.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast, monochrome-focused palette with a light-grey background (#E6E6E6 or similar) and deep black text. Visual hierarchy is achieved through extreme variance in font scale rather than color, keeping the focus on textual content.
• Typography: The system uses a dual-font approach. A stylized serif (referred to as font-Harmond in the code) provides elegance for headings, while a sans-serif font handles body copy and metadata. The layout utilizes splitting.js to animate individual characters, creating a dynamic, premium feel during page loads.
• Page Structure & Flow: The layout starts with a bold "Hello" hero section containing the user's name, followed by a "Person" section that balances text blocks with Lottie-based geometric animations. The navigation is hidden behind a full-screen mobile-style overlay, even on larger displays, emphasizing a clean primary canvas.
• Reusable Components: Key elements to clone include the animated transition overlays, the split-text navigation links with hover states, and the SVG shape containers used as icons/dividers. The preloader and the Lottie animation containers (#lottie-home, #lottie-loader) are well-structured for modular reuse.
• Interaction & Motion: The site features "magnetic" or smooth scrolling via Locomotive Scroll. Motion patterns include character-by-character vertical translates on enter, and full-screen text-mask transitions between pages. Navigation items use a menu-hover class that triggers character animations.
• Implementation Clues: The HTML reveals a heavy reliance on GSAP for timing, Barba.js for PJAX-style page transitions (evident in data-barba="container"), and Splitting.js for text manipulation. It uses a data-scroll-container attribute for its custom scrolling library.

Use Cases

• Who should clone this: Independent creatives, UX/UI designers, or creative agencies wanting a "digital business card" that feels technologically advanced yet visually understated.
• Effective Remixes: This pattern works well for high-end architecture firms, boutique fashion labels, or specialized tech consultancies where the brand identity relies on technical precision and minimalism.
• Remix Directions: Swap the light-grey background for a deep charcoal/black for a "dark mode" aesthetic, or replace the Lottie animations with 3D WebGL elements while keeping the robust GSAP transition framework.
• Suggested Clone Scope: Start with the character animation system and the Barba.js transition wrapper to establish a base-level interactivity before populating content.