How do I add the Resume Biography block to a Hugo site?

Add a "block: resume-biography" 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 Resume Biography 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 Resume Biography block?

Yes. It exposes 5 content options, plus 7 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 Resume Biography 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/resume-biography

Profile & resumeFree · MITHugo

Resume Biography block

A profile introduction — avatar, bio, and social links — for a personal site or online CV.

Customize with AI View source

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

v1.0.0Version

5Options

MITLicense

Quick start

Add the Resume Biography 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: resume-biography
  content:
    username: me
    text: I build AI research tooling and mentor applied ML teams.
    button:
      url: /cv.pdf
      text: Download CV
  design:
    avatar:
      size: large
      shape: circle
    banner:
      filename: banners/lab.jpg
    biography:
      style: "max-width: 60ch;"

Overview

About the Resume Biography block

Make a powerful personal first impression

Present yourself professionally with the Resume Biography block - a comprehensive profile component that combines your photo, personal details, social presence, and biography into one compelling, trust-building section.

✨ Key Features

High-Quality Avatar: Retina-optimized profile photos with multiple size options (small to xxl)
Flexible Shapes: Choose from circle, square, or rounded avatar styles
Social Integration: Beautiful social media links with icon support
Banner Support: Optional header banner for additional visual impact
Name Pronunciation: Ruby annotation displays pronunciation guides above your name (set name.pronunciation in your author YAML)
Pronoun Support: Inclusive pronoun display for professional clarity
Organization Links: Clickable organization affiliations
Download Button: Optional CV/resume download functionality

🎯 Perfect For

Academic Profiles: Researchers, professors, and graduate students
Professional Portfolios: Consultants, freelancers, and industry experts
Corporate Leadership: Executive profiles and team member pages
Personal Branding: Entrepreneurs and thought leaders
Creative Professionals: Designers, writers, and artists
Job Seekers: Professional online presence for career opportunities

🚀 Why Choose Resume Biography Block?

Professional Standards: Meets modern professional profile expectations with comprehensive information display

Visual Impact: High-quality imagery and clean layout create strong first impressions

Social Connectivity: Integrated social links help build professional networks

Accessibility First: Inclusive features like pronunciation guides and pronoun support

📊 Personal Branding Benefits

Immediate Recognition: Professional photo creates memorable personal brand
Credibility Signals: Organization affiliations and social links build trust
Accessibility: Pronunciation guides (Pinyin, furigana, IPA) displayed above your name help visitors remember and pronounce it correctly
Professional Network: Social links facilitate professional connections

💡 Customization Options

Avatar Sizing: From subtle small avatars to prominent xxl displays
Shape Variety: Match your brand aesthetic with circle, square, or rounded styles
Banner Integration: Add context with professional background images
Content Control: Use custom biography text or pull from author page content

🎨 Design Excellence

High-Resolution Ready: 2x retina support ensures crisp images on all screens
Typography Hierarchy: Clear information structure from name to details
Generous Whitespace: Clean layout that doesn't overwhelm visitors
Dark Mode Support: Beautiful presentation in both light and dark themes

💼 Professional Impact

Perfect for building authority, establishing credibility, and creating memorable personal brands. Whether you're building a personal website, company profile, or professional portfolio, the Resume Biography block ensures you make the right first impression.

Your professional story deserves professional presentation - create a biography section that opens doors and builds connections.

Flexibility

Layouts & variants

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

avatar.sizeAvatar display size. Sizes: small (150px), medium (200px), large (320px), xl (400px), xxl (500px). Images are generated at 2x for retina displays.

smallmediumdefaultlargexlxxl

avatar.shapeAvatar shape

circledefaultsquarerounded

Reference

Configuration

Every option the Resume Biography 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 (references data/authors/{username}.yaml)
`text`	`string`	—	Override biography text (Markdown); falls back to author profile bio when omitted
`button`	`object`	—	Optional button beneath the bio
`button.url`required	`string`	—	—
`button.text`required	`string`	—	Action label, 2-3 words. E.g. 'Download CV', 'View Resume'.

Design options

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

Property	Type	Default	Description
`avatar`	`object`	—	—
`avatar.size`	`small \| medium \| large \| xl \| xxl`	medium	Avatar display size. Sizes: small (150px), medium (200px), large (320px), xl (400px), xxl (500px). Images are generated at 2x for retina displays.
`avatar.shape`	`circle \| square \| rounded`	circle	Avatar shape
`banner`	`object`	—	—
`banner.filename`	`string`	—	Optional banner image filename in assets/media/
`biography`	`object`	—	—
`biography.style`	`string`	—	Inline CSS style applied to the bio text wrapper

Compose

Works well with

Blocks that pair naturally with Resume Biography on the same page.

Resume Awards Resume Experience Resume Skills

Frequently asked

Resume Biography block FAQ

Add a "block: resume-biography" 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 Resume Biography block?

Customize with AI View source