# Page Builder

URL: https://zerodev.ca/docs/retrail/page-builder

> Every block you can put on your page, with all of its fields.



The page is the `blocks` array in `settings.json`, drawn top to bottom. Put blocks in any order, use a block more than once, and hide one with `"enabled": false`.

## Hero Block

Your name, avatar, headline, bio, a status badge and buttons.

```json
{
  "type": "hero",
  "enabled": true,
  "name": "Example Name",
  "headline": "Example Title & Profession",
  "bio": "Short personal bio or mission statement.",
  "avatar": "https://example.com/avatar.jpg",
  "avatarPosition": "left",
  "avatarSize": 56,
  "statusText": "Available for projects",
  "statusColor": "neon-green",
  "statusEnabled": true,
  "align": "left",
  "actions": [
    {
      "label": "Get in touch",
      "url": "mailto:example@example.com",
      "variant": "filled",
      "icon": "mail",
      "enabled": true
    }
  ]
}
```

| Field            | Type      | Description                                                           |
| ---------------- | --------- | --------------------------------------------------------------------- |
| `avatarPosition` | `string`  | Position of profile image: `"left"`, `"right"`, or `"top"` (default). |
| `avatarSize`     | `number`  | Size in pixels (defaults to `56` when inline, `84` when top).         |
| `statusColor`    | `string`  | Color for the status badge dot (e.g. `"neon-green"`, `"teal"`).       |
| `statusEnabled`  | `boolean` | Set to `false` to hide the status indicator.                          |
| `align`          | `string`  | Alignment: `"left"`, `"center"`, or `"right"`.                        |

## Projects Block

Cards for your projects, with tags, badges and links.

```json
{
  "type": "projects",
  "enabled": true,
  "title": "Projects",
  "description": "Featured applications and tools.",
  "layout": "grid",
  "columns": 2,
  "items": [
    {
      "id": "project-1",
      "title": "Example Project",
      "description": "High-performance service with status tracking.",
      "image": "",
      "tags": ["Next.js", "Mantine", "TypeScript"],
      "featured": true,
      "enabled": true,
      "stats": [
        { "label": "Status", "value": "Online", "enabled": true }
      ],
      "links": [
        { "label": "Live Demo", "url": "https://example.com", "icon": "external", "enabled": true }
      ]
    }
  ]
}
```

| Field      | Type      | Description                                                        |
| ---------- | --------- | ------------------------------------------------------------------ |
| `layout`   | `string`  | `"grid"` for responsive cards or `"list"` for single-column cards. |
| `columns`  | `number`  | Grid column count: `1`, `2`, or `3`.                               |
| `featured` | `boolean` | Displays a prominent "Featured" badge on the project card.         |

## Skills Block

Skills grouped by area, with an icon and level on each.

```json
{
  "type": "skills",
  "enabled": true,
  "title": "Technical Skills",
  "description": "Core competencies and tools.",
  "categories": [
    {
      "name": "Frontend",
      "enabled": true,
      "skills": [
        { "name": "React", "level": "Advanced", "icon": "code", "enabled": true },
        { "name": "TypeScript", "level": "Advanced", "icon": "terminal", "enabled": true }
      ]
    }
  ]
}
```

## Experience Block

A timeline of roles with companies, dates and tags.

```json
{
  "type": "experience",
  "enabled": true,
  "title": "Work Experience",
  "description": "Previous engineering roles.",
  "items": [
    {
      "role": "Senior Software Engineer",
      "company": "Example Company",
      "period": "2023 - Present",
      "location": "Remote",
      "description": "Architected low-latency monitoring platforms.",
      "tags": ["TypeScript", "Docker"],
      "url": "https://example.com",
      "enabled": true
    }
  ]
}
```

## Stats Block

A row of numbers, such as years of experience or projects shipped.

```json
{
  "type": "stats",
  "enabled": true,
  "items": [
    { "label": "Experience", "value": "5+", "description": "Years active", "icon": "briefcase", "enabled": true },
    { "label": "Projects", "value": "25+", "description": "Shipped applications", "icon": "code", "enabled": true }
  ]
}
```

## Section Block

A heading with a badge and subtitle, to start a part of the page.

```json
{
  "type": "section",
  "enabled": true,
  "title": "Section Title",
  "description": "Optional lead paragraph.",
  "badge": "Category",
  "align": "left"
}
```

## Separator Block

A horizontal line.

```json
{
  "type": "separator",
  "enabled": true,
  "variant": "solid",
  "label": ""
}
```

| Field     | Type     | Description                                          |
| --------- | -------- | ---------------------------------------------------- |
| `variant` | `string` | Line style: `"solid"`, `"dashed"`, or `"dotted"`.    |
| `label`   | `string` | Optional text rendered at the center of the divider. |

## Testimonials Block

Quotes from people you worked with.

```json
{
  "type": "testimonials",
  "enabled": true,
  "title": "Client Endorsements",
  "description": "What partners say.",
  "items": [
    {
      "quote": "Consistently delivers clean, performant software.",
      "author": "Example Client",
      "role": "Product Director",
      "company": "Example Inc",
      "avatar": "",
      "enabled": true
    }
  ]
}
```

## Contact Block

A card with a heading and an email button.

```json
{
  "type": "contact",
  "enabled": true,
  "title": "Let's build something together",
  "description": "Feel free to reach out for project inquiries.",
  "email": "example@example.com",
  "buttonText": "Send an email",
  "badge": "Connect"
}
```

## Socials Block

Buttons for your social profiles, with brand icons.

```json
{
  "type": "socials",
  "enabled": true,
  "align": "center",
  "items": [
    { "platform": "discord", "label": "Discord", "url": "https://example.com/discord", "enabled": true },
    { "platform": "github", "label": "GitHub", "url": "https://example.com/github", "enabled": true },
    { "platform": "x", "label": "X", "url": "https://example.com/x", "enabled": true }
  ]
}
```

### Supported Brand Platforms

* Font Awesome: `discord`, `github`, `x`, `twitter`, `linkedin`, `youtube`, `twitch`, `bluesky`, `reddit`, `steam`, `spotify`, `instagram`, `tiktok`.
* General Lucide: `globe`, `mail`, `share`, `user`.

## Image Block

A full-width image, such as a screenshot or banner.

```json
{
  "type": "image",
  "src": "/images/banner.png",
  "alt": "My latest project",
  "caption": "The dashboard I built in 2026.",
  "height": 320,
  "radius": "md",
  "align": "center"
}
```

| Field     | What it does                                               |
| --------- | ---------------------------------------------------------- |
| `src`     | Image path or URL. Files in `public/` are served from `/`. |
| `alt`     | Text for screen readers.                                   |
| `caption` | Optional text under the image.                             |
| `height`  | Height in pixels.                                          |
| `radius`  | Corner rounding: `xs`, `sm`, `md`, `lg` or `xl`.           |
| `align`   | `left`, `center` or `right`.                               |

## Text Block

A paragraph of your own text.

```json
{
  "type": "text",
  "content": "I build tools for game servers and small businesses.",
  "size": "md",
  "align": "left"
}
```

| Field     | What it does                 |
| --------- | ---------------------------- |
| `content` | The text.                    |
| `size`    | `sm`, `md` or `lg`.          |
| `align`   | `left`, `center` or `right`. |