Mario Carrillo Minimalist Portfolio Landing Page

Overview

This minimalist personal portfolio template focuses on spatial breathing room and essential information architecture. It provides a highly extensible "blank canvas" framework that prioritizes typography over heavy imagery, making it an excellent starting point for developers who want to integrate dynamic background scripts like WebGL or Three.js.

Design System

• Color Palette & Visual Hierarchy: The design uses a high-contrast monochromatic base (pure black text on a whitespace-heavy background). The primary visual hierarchy is driven by positioning, with essential navigation anchored to the top-left to guide the eye immediately upon entry.
• Typography: Features a geometric sans-serif font family. The logo uses a thicker weight with tight kerning for brand identity, while the navigation links use a lighter-weight (thin) variant to maintain a delicate, artisanal aesthetic.
• Page Structure: The layout follows a classic sidebar-style vertical arrangement on the left margin, leaving the majority of the viewport—represented by the <div class="canvas-wrapper"></div>—available for immersive content or interactive visualizations.
• Reusable Components:
  • Sidebar Nav: A clean list structure using nav__item classes with hidden bullet wrappers (nav__bullet) that can be used for hover state indicators.
  • Sticky Footer: A minimalist copyright span that anchors the bottom-left corner, providing a professional bookend to the layout.
• Interaction Design: The HTML structure includes class-specific bullets (e.g., nav__bullet--red, nav__bullet--green) suggesting a hover-triggered dot system or color-coded indicators for different site sections.
• Implementation Clues: The code uses a BEM (Block Element Modifier) naming convention (e.g., header__wrapper, nav__link), making the CSS highly modular and easy to target for styling overrides.

Use Cases

• Who should clone this pattern: Creative developers, generative artists, and architects who need a non-distracting interface to showcase visually complex background work.
• Remix Directions:
  • Background Inject: Use the canvas-wrapper to host a p5.js sketch, a video background, or a high-resolution hero image.
  • IA Expansion: Adapt the minimalist list into a vertical social media link-tree for personal branding.
  • Typography Swap: Replace the geometric sans with a serif font (like Playfair Display) to instantly pivot from a "tech" feel to a "high-fashion" editorial aesthetic.
• Suggested Clone Scope: A full-page clone is recommended as the layout depends on the precise spatial relationship between the top-left navigation and the bottom-left footer.