hugoblox.com/blocks/resume-biography-3
Resume Biography 3 block preview
Profile & resumeFree · MITHugo

Resume Biography 3 block

A horizontal biography layout with banner and avatar, plus integrated education and interests.

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

v1.0.0Version
9Options
MITLicense

Quick start

Add the Resume Biography 3 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-3
  content:
    username: me
    text: Research lead focused on alignment, evaluations, and safety tooling.
    headings:
      about: Professional summary
      education: Education
      interests: Interests
    button:
      url: /cv.pdf
      text: Download CV
  design:
    avatar:
      size: large
      shape: circle
    name:
      size: lg
    banner:
      filename: banners/research.jpg
    biography:
      style: "max-width: 70ch;"

Overview

About the Resume Biography 3 block

Comprehensive professional profile with integrated academic details

Present a complete professional picture with the Resume Biography 3 block - an expanded biography layout that combines personal information, social presence, education history, and interests in one cohesive, horizontally-oriented section.

🛠️ Customization

  • Name sizing: Adjust the profile heading size to accommodate long names using design.name.size:

    • compact: space-friendly for long names
    • balanced (default): matches the demo style
    • display: extra-large for short names
  • Section heading overrides: Customize any of the three main section headings using content.headings:

    • about: Biography section heading (default: "Professional Summary" from i18n about_me)
    • education: Education section heading (default: from i18n education)
    • interests: Interests section heading (default: from i18n interests)

Example front matter:

block: resume-biography-3
content:
  headings:
    about: Research Profile
    education: Academic Background
    interests: Research Areas
design:
  name:
    size: compact

✨ Key Features

  • Horizontal Layout: Desktop-optimized side-by-side arrangement for better space utilization
  • Integrated Education: Built-in education timeline with institution details
  • Interests Section: Personal interests display for a well-rounded professional image
  • Name Pronunciation: Ruby annotation displays pronunciation guides above your name (set name.pronunciation in your author YAML)
  • Social Integration: Complete social media profile links with proper external handling
  • Avatar Flexibility: Multiple size and shape options for personal branding
  • Academic Icons: Beautiful education and achievement icons
  • Responsive Stack: Gracefully converts to vertical layout on mobile devices

🎯 Perfect For

  • Academic Professionals: Researchers who need education prominently featured
  • Career Changers: Professionals highlighting diverse educational backgrounds
  • Consultants: Comprehensive profiles that establish expertise across domains
  • Thought Leaders: Complete professional picture including personal interests
  • Graduate Students: Academic profiles with research interests and education
  • Multi-Disciplinary Experts: Professionals with diverse backgrounds and interests

🚀 Why Choose Resume Biography 3?

Complete Picture: Combines biography, education, and interests for comprehensive professional presentation

Space Efficient: Horizontal layout maximizes content display while maintaining readability

Academic Focus: Integrated education section perfect for academic and research professionals

Personal Touch: Interests section adds humanity to professional profiles

📊 Professional Advantages

  • Comprehensive Credibility: Education and interests create complete professional narrative
  • Better Engagement: Personal interests create conversation starters and connections
  • Academic Authority: Prominent education display builds academic credibility
  • Professional Networking: Complete profile facilitates meaningful professional connections

💡 Layout Benefits

  • Desktop Optimization: Horizontal layout makes excellent use of wider screens
  • Content Density: More information displayed in less vertical space
  • Visual Balance: Side-by-side layout creates pleasing visual composition
  • Mobile Adaptation: Responsive design ensures great experience on all devices

🎨 Educational Excellence

  • Institution Recognition: Clear display of educational credentials
  • Timeline Clarity: Chronological education history with proper date formatting
  • Academic Icons: Beautiful visual elements that reinforce educational achievements
  • Degree Emphasis: Prominent display of areas of study and qualifications

Perfect for academics, researchers, consultants, and professionals who want to present a complete picture of their background, education, and interests in one comprehensive, beautifully designed section.

Create a professional profile that tells your complete story and opens doors to new opportunities.

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.
smallmediumlargedefaultxlxxl
avatar.shapeAvatar shape
circledefaultsquarerounded
name.sizeHeading size for the profile name. Responsive sizing from xs (text-xl to text-3xl) up to xl (text-5xl to text-7xl).
xssmmdlgdefaultxl

Reference

Configuration

Every option the Resume Biography 3 block accepts, generated from its schema.

Content options

Properties set under the block's content key.

PropertyTypeDefaultDescription
usernamestringmeAuthor username (references data/authors/{username}.yaml)
textstringBiography text override (supports Markdown). Defaults to the author profile bio.
headingsobjectOptional custom headings for sections
headings.aboutstringHeading for biography section (default: Professional Summary)
headings.educationstringHeading for education section (default: i18n 'education')
headings.interestsstringHeading for interests section (default: i18n 'interests')
buttonobjectOptional call-to-action button
button.urlrequiredstringButton URL
button.textrequiredstringButton text

Design options

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

PropertyTypeDefaultDescription
avatarobjectAvatar styling options
avatar.sizesmall | medium | large | xl | xxllargeAvatar display size. Sizes: small (150px), medium (200px), large (320px), xl (400px), xxl (500px). Images are generated at 2x for retina displays.
avatar.shapecircle | square | roundedcircleAvatar shape
bannerobjectOptional banner image
banner.filenamestringBanner image filename (in assets/media/)
biographyobjectBiography text styling
biography.stylestringCustom CSS styles for biography text
nameobjectProfile name typography controls
name.sizexs | sm | md | lg | xllgHeading size for the profile name. Responsive sizing from xs (text-xl to text-3xl) up to xl (text-5xl to text-7xl).

Compose

Works well with

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

Frequently asked

Resume Biography 3 block FAQ

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