How do I add the Dev Hero block to a Hugo site?

Add a "block: dev-hero" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Is the Dev Hero block free to use?

Yes. Every HugoBlox block is free and open-source under the MIT license — use it in personal and commercial projects, with no attribution required.

Can I customize the Dev Hero block?

Yes. It exposes 24 content options, plus 3 design options, and inherits the shared block settings for background, spacing, and colors. You can also describe the changes you want to Hugo Chat AI and it will edit the config for you.

Does the Dev Hero block work with any Hugo theme?

The block ships in the open-source HugoBlox kit. Add the kit to any Hugo site and the block becomes available in your page sections — there is no theme lock-in.

hugoblox.com/blocks/dev-hero

HeroFree · MITHugo

Dev Hero block

A dark-mode, developer-focused hero with gradient effects, social links, and call-to-action buttons.

Customize with AI View source

Add it to any Hugo page's sections list — no build step.

v1.0.0Version

24Options

MITLicense

Quick start

Add the Dev Hero block

Drop this into your page's front matter, under the sections list. Edit the values, and HugoBlox renders the block — no build step.

Add to your page's sections

- block: dev-hero
  id: hero
  content:
    username: me
    greeting: Hi, I'm
    show_status: true
    show_scroll_indicator: true
    cta_buttons:
      - text: View My Work
        url: "#projects"
        icon: arrow-down
      - text: Get In Touch
        url: "#contact"
        icon: envelope
  design:
    style: centered
    avatar_shape: circle
    background:
      color:
        dark: "#0a0a0f"

Overview

About the Dev Hero block

A modern, developer-focused hero section optimized for dark mode with gradient effects, animated backgrounds, and flexible layouts.

Features

Gradient Text: Name displayed with beautiful gradient styling
Animated Background: Floating orbs with subtle grid pattern
Social Links: Automatic icon detection for common platforms
CTA Buttons: Primary and secondary button styling
Two Layouts: Centered or split (avatar on side) layouts
Author Integration: Pulls data from author profiles
Emoji Status Badge: Optional personalized emoji on avatar (💻 developer, 🎨 designer, 🚀 startup, etc.)
Scroll Indicator: Optional animated scroll prompt

Usage

Centered Layout (Default)

- block: dev-hero
  id: hero
  content:
    username: me
    greeting: "Hi, I'm"
    show_status: true
    show_scroll_indicator: true
    cta_buttons:
      - text: View My Work
        url: "#projects"
        icon: arrow-down
      - text: Get In Touch
        url: "#contact"
        icon: envelope
  design:
    style: centered
    avatar_shape: circle
    background:
      color:
        dark: "#0a0a0f"

Split Layout

- block: dev-hero
  id: hero
  content:
    username: me
    greeting: "Hello, I'm"
    cta_buttons:
      - text: View Projects
        url: "#projects"
      - text: Download Resume
        url: "/resume.pdf"
        icon: document-arrow-down
  design:
    style: split
    avatar_shape: rounded

Parameters

Content

Parameter	Type	Default	Description
`username`	string	`me`	Author folder to pull data from
`title`	string	-	Override author title
`tagline`	string	-	Override author role
`bio`	string	-	Override author bio
`greeting`	string	-	Text above the name
`name_prefix`	string	-	Prefix before name (styled differently)
`show_status`	boolean	`false`	Show emoji status badge (uses author's `status.icon`)
`show_scroll_indicator`	boolean	`false`	Show scroll prompt
`social`	array	-	Override author social links
`cta_buttons`	array	-	Call-to-action buttons

Design

Parameter	Type	Default	Description
`style`	string	`centered`	Layout style (`centered` or `split`)
`avatar_shape`	string	`circle`	Avatar shape (`circle` or `rounded`)

Social Networks

The block automatically detects icons for these networks:

github → GitHub logo
linkedin → LinkedIn logo
twitter → X (Twitter) logo
email → Envelope icon

Other networks will use a generic link icon unless you specify a custom icon.

CTA Buttons

The first button is styled as primary (filled), subsequent buttons are secondary (outlined).

cta_buttons:
  - text: Primary Button
    url: "#action"
    icon: arrow-right  # optional
  - text: Secondary Button
    url: "#other"

Author Data

The block automatically pulls from /data/authors/{username}.yaml:

name.display → Name
role → Tagline/role
bio → Short biography
links → Social links
avatar → Profile image
status.icon → Emoji badge (shown when show_status: true)

Status Emoji Examples:

# In data/authors/me.yaml
status:
  icon: "💻"  # Developer
  # Or: 🎨 Designer, 🚀 Entrepreneur, 🔬 Researcher, 🎓 Student

Styling

The block includes:

Animated gradient orbs in the background
Subtle grid pattern overlay
Gradient text effect on the name
Glass morphism social buttons
Primary/secondary CTA button styles

Flexibility

Layouts & variants

Switch the block's design with these presets — no custom CSS.

styleLayout style

centereddefaultsplit

avatar_shapeAvatar shape

circledefaultrounded

Reference

Configuration

Every option the Dev Hero block accepts, generated from its schema.

Content options

Properties set under the block's content key.

Property	Type	Default	Description
`username`	`string`	me	Author username to pull data from (matches folder name in /authors/)
`title`	`string`	—	Override name/title (falls back to author title)
`tagline`	`string`	—	Override role/tagline (falls back to author role)
`bio`	`string`	—	Override bio text (falls back to author bio)
`greeting`	`string`	—	Small greeting text above the name
`name_prefix`	`string`	—	Prefix before the name (styled differently)
`show_status`	`boolean`	false	Show status emoji badge on avatar (uses author's status.icon from profile)
`show_scroll_indicator`	`boolean`	false	Show scroll down indicator at bottom
`scroll_target`	`string`	#projects	CSS selector for scroll indicator target
`links`	`object[]`	—	Override social links (falls back to author links)
`links[].icon`required	`string`	—	Icon identifier
`links[].url`required	`string`	—	Link URL
`links[].label`	`string`	—	Link label/title
`cta_buttons`	`object[]`	—	Call-to-action buttons
`cta_buttons[].text`required	`string`	—	Button text
`cta_buttons[].url`required	`string`	—	Button URL
`cta_buttons[].icon`	`string`	—	Button icon (optional)
`typewriter`	`object`	—	Typewriter animation for cycling through roles/taglines
`typewriter.enable`	`boolean`	false	Enable typewriter effect
`typewriter.strings`	`string[]`	—	Array of strings to cycle through
`typewriter.prefix`	`string`	—	Static text before the animated part
`typewriter.type_speed`	`integer`	80	Typing speed in milliseconds per character
`typewriter.delete_speed`	`integer`	50	Delete speed in milliseconds per character
`typewriter.pause_time`	`integer`	2000	Pause time in milliseconds before deleting

Design options

Properties set under the block's design key — shared background, spacing, and color settings apply on top.

Property	Type	Default	Description
`style`	`centered \| split`	centered	Layout style
`avatar_shape`	`circle \| rounded`	circle	Avatar shape
`animations`	`boolean`	false	Enable scroll and typewriter animations

Frequently asked

Dev Hero block FAQ

Add a "block: dev-hero" entry to the sections list in your page's front matter, then fill in the content fields. HugoBlox renders it automatically — copy the example config above as a starting point.

Ready to build with the Dev Hero block?

Customize with AI View source