Retrail/Page Builder

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.

{
  "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:[email protected]",
      "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.

{
  "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.

{
  "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.

{
  "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.

{
  "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.

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

Separator Block

A horizontal line.

{
  "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.

{
  "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.

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

Socials Block

Buttons for your social profiles, with brand icons.

{
  "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.

{
  "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.

{
  "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`.

PreviousConfiguration NextTerms of Service