Heylow Portfolio Landing Page

Overview

Heylow is a minimalist, eco-conscious portfolio for a digital agency that prioritizes low-carbon web design. It is an excellent clone reference for its clean aesthetic, sophisticated use of whitespace, and specialized data-driven project cards that highlight performance metrics (carbon rating and speed index).

Design System

• Color Palette & Visual Hierarchy: The palette is dominated by a "greenwhite" (#f1f5f2) background and a deep "darkgreen" for text, providing high contrast without the harshness of pure black. A vibrant "greenflash" (neon lime) is used sparingly for primary call-to-action buttons and feature cards to draw immediate attention.
• Typography: The system uses a high-contrast serif for emphasis (seen in the "for You & the Planet" italicized header) alongside a clean, modern sans-serif for body copy and UI elements. The hierarchy uses body-xxl and body-3xl classes for large, impactful section headers.
• Page Structure:
  1. Hero: Centered text content with an absolute-positioned, illustrated butterfly graphic acting as a visual anchor.
  2. Trust Bar: A simple horizontal logo row with CSS filters (brightness(0) invert(...)) to unify different brand logos into the site's dark green color.
  3. Feature Grid: A 3-column Bento-style layout using the greenflash background for service highlights.
  4. Project Showcases: Large-scale project cards featuring a layered image approach—a screenshot overlaying a custom background texture.
  5. Blog & CTA: A 3-column article grid followed by high-contrast footer sections.
• Reusable Components:
  • Project Cards: The info-project div includes a unique specs-project block with specific badges for "Carbon Rating" and "Speed Index."
  • Buttons: A standard pill-shaped button class with specific modifiers like greenflash and white for different backgrounds.
  • Bento Features: The .feature class handles transitions and responsive stacking for value propositions.
• Interactions & Motion: The site uses the AOS (Animate On Scroll) library extensively, with fade-up and fade attributes to stagger the entrance of grid items and headers.
• Implementation Clues: Built with utility-first CSS (Tailwind classes like flex-col, gap-8, and md:translate-x-1/2 are prominent). It utilizes a responsive picture element strategy with multiple webp sources to maintain the low-carbon/high-speed promise.

Use Cases

• Who should clone this: Independent designers, creative agencies, and environmental consultants who want to signal sustainability and performance through their visual identity.
• Effective Remixes:
  • SaaS Landing Pages: Replace the project cards with product feature screenshots while keeping the performance badge logic to show off platform speed.
  • Non-Profit Portfolios: Adaptive info architecture by swapping the "Our Work" focus for "Impact Reports," utilizing the clean, readable typography for long-form mission statements.
• Practical Directions: Reuse the CSS filter technique in the logo bar to quickly unify mismatched client logos. The Bento-style feature grid is highly modular and can be extracted for use in any landing page.
• Clone Scope: A full-page clone is best for those needing a cohesive, high-end portfolio. Alternatively, the project card component is a valuable standalone piece for any performance-focused showcase.