Egstad Minimalist Design Portfolio

Overview

This project is a refined, minimalist portfolio designed for high-end creative professionals, leveraging Nuxt.js for a performant, component-driven experience. It stands out as a clone reference for its sophisticated use of CSS variables to manage themes and its integration of bold, oversized variable typography with interactive canvas elements.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast, yet warm, neutral palette defined via HSLA variables in the root container (--background: hsla(47, 14%, 87%, 100%)). This creamy off-white background paired with a deep charcoal foreground (--foreground: hsla(40, 4%, 14%, 100%)) creates a premium, tactile feel.
• Typography System: The design is anchored by "Metaphor," a custom variable sans-serif used at massive scales for branding (e.g., the "EGSTAD" hero text) to establish immediate visual impact. This is balanced by "System85," a monospace font used for metadata and technical details to provide a structured, architectural contrast.
• Structure & Flow: The layout follows a modular grid. It begins with a massive typographic hero, followed by a hidden-by-default grid of text blocks (t-2 class) containing personal history and professional experience, and ends with a colophon section dedicated to design and tech attribution.
• Reusable Components: The site-menu dialog is a highly reusable filter utility, using t-mono list items for category-based navigation. The eggcarton canvas container provides a template for integrating interactive, generative art into a standard layout flow.
• Interaction & Motion: The UI utilizes specific interactive states such as isCursor and isTouch classes on the site root, suggesting custom cursor behavior and touch-optimized layout shifts. The presence of a <canvas> element indicates a background or foreground layer used for generative motion.
• Implementation Clues: Built on Nuxt.js with Sanity.io as a headless CMS, the site uses scoped CSS (indicated by data-v- attributes) and CSS variables for global styling, making it highly themeable by simply adjusting the HSLA values in the main wrapper.

Use Cases

• Who should clone this: Designers, developers, and agency owners who want a "low-chrome, high-impact" portfolio that focuses on typography and technical sophistication rather than image-heavy carousels.
• Remix Directions: Swap the primary variable font to change the entire brand personality; because the root uses CSS variables for colors, you can flip the theme to a dark mode or high-saturation brand palette by changing only three variable lines.
• Practical Adapting: Developers can reuse the navigation filter logic (site-menu) for blog categories or product stores. The colophon section is a great pattern for open-source projects or creative labs to credit their stack.
• Suggested Scope: A full-page clone is ideal for those wanting a cohesive, minimal single-page identity. For existing sites, the site-menu modal and the HSL-based variable system are the most valuable components to extract.