Hero Layout System Guide
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
orfeatured_video
exists → usestwo-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.