Hero Layout System Guide

The hero system supports multiple flexible layout modes that can be configured via front matter in your Jekyll posts and pages.

Layout Options

1. Auto (Default)

hero_layout: auto  # or omit the field entirely
  • Automatically detects the best layout based on available media
  • If featured_image or featured_video exists → uses two-column
  • If no media → uses terminal-only

2. Two Column

hero_layout: two-column
featured_image: /img/my-image.jpg
  • Classic side-by-side layout
  • Media (image/video) on the left (8/12 width)
  • Terminal on the right (4/12 width)
  • Responsive: stacks vertically on mobile

3. Fullscreen Background

hero_layout: fullscreen
featured_image: /img/background.jpg
# OR for video background:
featured_video: /videos/background.mp4
  • Full viewport height background
  • Image or video covers entire screen
  • Terminal content overlaid on top with backdrop blur
  • Great for hero pages and dramatic introductions

4. Center Overlay

hero_layout: center-overlay
featured_image: /img/background.jpg
  • Background image/video with centered content
  • 80% viewport height (more compact than fullscreen)
  • Terminal centered with backdrop blur
  • Perfect for landing pages

5. Terminal Only

hero_layout: terminal-only
  • Just the terminal component
  • No background media
  • Centered layout (8/12 width, offset)
  • Clean, minimal appearance

Video Options

For any layout with video support:

hero_layout: fullscreen
featured_video: /videos/my-video.mp4
featured_image: /img/poster.jpg  # Optional poster image
featured_video_autoplay: true    # Default: false for two-column, true for backgrounds
featured_video_muted: true       # Default: true for backgrounds, false for two-column
featured_video_loop: true        # Default: false

Examples

Homepage with Fullscreen Image

---
layout: post
title: Welcome
hero_layout: fullscreen
featured_image: /img/hero-background.jpg
---

Blog Post with Side Media

---
layout: post
title: My Project
hero_layout: two-column
featured_image: /img/project-screenshot.jpg
---

Video Background Landing Page

---
layout: page
title: Portfolio
hero_layout: center-overlay
featured_video: /videos/portfolio-demo.mp4
featured_image: /img/video-poster.jpg
---

Clean Terminal Page

---
layout: post
title: About
hero_layout: terminal-only
---

Mobile Behavior

  • Two-column: Automatically stacks vertically on mobile
  • Fullscreen/Center-overlay: Reduces height to 60vh on mobile for better usability
  • Terminal-only: Maintains responsive behavior

Styling Notes

  • Background layouts use backdrop-filter blur effects on the terminal card
  • All layouts maintain your existing terminal component styling
  • Navigation footer (prev/next links) is preserved across all layouts
  • Overlay layouts add semi-transparent backgrounds for better readability

Migration

Existing pages without hero_layout specified will continue to work exactly as before using the "auto" detection mode.