Santi Jaramillo Design Portfolio Page

Overview

This design is a high-impact, minimalist portfolio for creative professionals that balances elegant serif typography with a dynamic, asymmetrical grid. It is an excellent clone reference for those looking to create an 'editorial-style' personal brand that prioritizes large-scale imagery and interactive micro-moments.

Design System

• Color Palette & Visual Hierarchy: The site uses a clean, high-contrast white background with black primary text. Visual interest is generated purely through project thumbnails, creating a system where the work provides the color while the interface remains neutral and sophisticated.
• Typography: The hero section uses a large-scale serif font (likely high-contrast display serif) with heavy use of italics for emphasis. The header text uses a clean sans-serif for utility links like 'About' and 'Santi Jaramillo,' creating a clear distinction between brand name and creative statement.
• Page Structure: The layout follows a top-down flow: a slim utility navigation bar, a massive typographic hero area (occupying significant vertical space), and a 'justified' thumbnail grid where project blocks vary in width but maintain a consistent horizontal alignment within rows.
• Reusable Components: The grid-row and grid-col structure from the HTML is a key component to clone, as it handles the uneven thumbnail widths (e.g., a 64% width image paired with a 31% width image). The hover-trigger system for GIFs is a highly reusable patterned component for adding personality to text.
• Interaction & Motion: The standout feature is the hover-title and hover-image relationship seen in the HTML code. Hovering over specific italicized terms in the hero text triggers the visibility of floating GIF layers (giphy-2.gif). Additionally, thumbnails utilize a scroll-transition-fade class for smooth entry as the user moves down the page.
• Responsive Behavior: The HTML indicates a liquid layout using percentage-based widths (e.g., width: 64.4251%) and data-elementresizer, suggesting a layout that fluidly scales before stacking into a single column for mobile devices.

Use Cases

• Who should clone this: Art directors, graphic designers, and photographers who want a 'portfolio-as-gallery' feel that showcases a high volume of work without feeling cluttered.
• Effective Remixes: This pattern can be remixed for high-end digital agencies or boutique architectural firms by swapping the playful GIFs for professional project snippets or technical drawings.
• Remix Directions: One could adapt the information architecture by replacing the 'justified' grid with a strict 3-column masonry layout while keeping the typographic hero section. The hover-triggered GIF logic could be reused for an 'About' page to reveal team headshots or studio culture photos.
• Clone Scope: For a fast setup, clone the hero section to immediately establish a strong brand voice. For a comprehensive project, a full-page clone is recommended to capture the specific math behind the asymmetrical thumbnail grid.