Page Builder

Build stunning landing pages without writing code. Stack pre-made blocks—modular sections like Hero banners, Portfolios, and Contact forms—to compose dynamic pages in minutes.

How It Works

A Landing Page (like your homepage) is defined in content/_index.md. It contains a list of sections, where each section uses a specific block (design).

---
title: Home
type: landing

sections:
  - block: markdown     # <--- A Block
    content:
      title: Welcome
      text: Hello World!
  - block: collection   # <--- Another Block
    content:
      title: Latest Posts
---

Adding Sections

To add a section, open content/_index.md and append a new entry to the sections list.

Example: Hero Section

- block: markdown
  id: hero
  content:
    title: Hi, I'm George
    subtitle: I build open source software.
    text: Welcome to my portfolio.
  design:
    background:
      image:
        filename: bg.jpg
        filters:
          brightness: 0.5

Customizing Blocks

Every block supports common design parameters like background, spacing, and styling.

Backgrounds

Use a photo from assets/media/.

design:
  background:
    image:
      filename: background.jpg
      parallax: true
      filters:
        brightness: 0.6

Use a solid color.

design:
  background:
    color: 'navy'
    text_color_light: true # White text

Create a gradient effect.

design:
  background:
    gradient_start: '#4bb4e3'
    gradient_end: '#2b94c3'
    gradient_angle: 180

Spacing & Style

Control padding and custom CSS classes.

design:
  spacing:
    # Top, Right, Bottom, Left
    padding: ['20px', '0', '20px', '0']
  css_class: 'my-custom-class'

Views

Collection blocks (like Blog or Portfolio) let you choose how to display items.

Showcase

Large featured images with side-by-side text. view: showcase

Card

Standard grid of cards with images. view: card

Compact

Minimal list with small thumbnails. view: compact

Masonry

Pinterest-style layout for portfolios. view: masonry

Icons

Use icons throughout blocks, buttons, and menus with the pack/icon-name syntax:

icon: brands/github
icon: hero/sparkles
icon: academicons/google-scholar