Diogo Akio Minimalist Portfolio Landing

Overview

Diogo Akio’s portfolio is a masterclass in high-concept minimalism, utilizing a full-screen video background layered with clean, oversized typography. It is an excellent reference for designers or agencies wanting to build an immersive digital greeting card that feels both sophisticated and lightweight. The site excels at hiding complex information (like detailed bios and full client lists) behind a smooth vertical-slide overlay, maintaining a clean visual field.

Design System

• Color Palette & Visual Hierarchy: The visual system is monochromatic and high-contrast, designed to let underlying media (video/images) provide the color. Text is primarily white and positioned at the edges to act as a frame for the central content.
• Typography: Features a clean, utilitarian sans-serif (resembling Helvetica or Inter). The headline uses a large scale sitting at the top left, while secondary information at the bottom uses a smaller, uniform font size that creates a modular "grid" feel in the footer.
• Page Structure:
  • Hero Layer: The base layer is a loopable <video> or high-res image component (layout_video__vwI1a).
  • Interactive Overlay: The UI components are pinned to the viewport corners: title (top-left), menu/toggle (top-right), and a multi-column marquee footer (bottom).
  • Drawer Layer: An about_container that uses transform: translateY(100%) to slide up and cover the screen, revealing a detailed bio, portrait, and list of experience.
• Reusable Components:
  • Marquee Footer: Four columns that display static summary text, but contain hidden marquee variations (layout_marquee__2UEvr) for hover states.
  • Vertical Slide Overlay: A full-height container (layout_about_container__1FO2X) triggered by the down arrow icon.
  • Progress Bar: A thin, horizontal line indicating scroll depth or loading state.
• Interaction & Motion: The site relies on viewport-relative positioning and CSS transforms. The HTML structure indicates a Next.js implementation with styled modules, using transitions to animate the transition between the video landing and the text-heavy about page.

Use Cases

• Who should clone this: Independent creative professionals, architects, or boutique design studios who want a high-impact, low-friction landing page that prioritizes atmosphere over immediate text density.
• Effective Remixes:
  • Art Galleries: Replace the personal bio with an exhibition list and the background video with slow-motion footage of an installation.
  • Video Production Houses: Use individual project showreels as the background layer for a truly dynamic portfolio.
• Practical Directions: Builders should focus on cloning the layout_colfooter logic—the way it organizes professional metadata (Experience, Expertise, Recognition) into four equal columns—and the full-screen slide interaction. For a quick remix, swap the video source and update the global font to a serif to drastically shift the aesthetic from "Tech Minimalist" to "Editorial Luxury."
• Clone Scope: A full-page clone is recommended to maintain the intent of the spatial layout, though the four-column marquee footer is a highly reusable individual component for any minimalist footer.