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

Add a "block: resume-skills" 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 Skills 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 Skills block?

Yes. It exposes 3 content options, plus 1 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 Skills 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-skills

Profile & resumeFree · MITHugo

Resume Skills block

Technical and professional skills, grouped by category, with optional proficiency bars.

Customize with AI View source

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

v1.0.0Version

3Options

MITLicense

Quick start

Add the Resume Skills 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-skills
  content:
    username: me
    title: Skills
    text: Tooling and languages I use most often.
  design:
    columns: 3

Overview

About the Resume Skills block

Demonstrate expertise with organized skill categories and visual progress

Present your technical and professional competencies with the Resume Skills block - a comprehensive component that organizes your skills into clear categories with optional visual progress indicators that immediately communicate your expertise levels.

✨ Key Features

Skill Categories: Organize skills into logical groups (Technical, Soft Skills, Tools, etc.)
Progress Visualization: Optional progress bars show proficiency levels at a glance
Icon Integration: Beautiful icons for each skill that enhance visual recognition
Flexible Layout: Side-by-side categories on larger screens, stacked on mobile
Custom Colors: Configurable progress bar colors to match your brand
Automatic Bars: Bars appear when a skill has a level (1–5)
Markdown Support: Rich text formatting for skill names and descriptions

🎯 Perfect For

Software Developers: Showcase programming languages, frameworks, and tools
Designers: Display creative software proficiency and design skills
Data Professionals: Highlight analytics tools, programming languages, and methodologies
Marketing Professionals: Present digital marketing tools and strategic capabilities
Project Managers: Demonstrate methodologies, tools, and soft skills
Technical Consultants: Comprehensive skill display across multiple domains

🚀 Why Choose Resume Skills Block?

Clear Organization: Skill categories help employers quickly find relevant expertise

Visual Proficiency: Progress bars provide immediate understanding of skill levels

Comprehensive Coverage: Support both technical and soft skills in one organized presentation

Professional Standards: Clean, modern layout that meets current resume expectations

📊 Skill Presentation Benefits

Quick Scanning: Organized categories allow rapid skill assessment
Honest Communication: Progress bars encourage accurate self-assessment
Visual Engagement: Icons and progress bars are more engaging than text lists
Comprehensive View: Categories ensure no important skills are overlooked

💡 Professional Psychology

Expertise Signaling: Visual progress bars demonstrate self-awareness and competence
Category Logic: Organized presentation shows systematic thinking
Skill Balance: Mix of technical and soft skills presents well-rounded professional
Growth Mindset: Percentage-based system implies commitment to skill development

🎨 Customization Excellence

Brand Colors: Progress bars and icons can match your personal or company branding
Icon Flexibility: Support for various icon packs to match your aesthetic
Layout Control: Choose between progress bars or simple lists based on your preference
Content Freedom: Unlimited skill categories and items for comprehensive coverage

💼 Strategic Applications

Career Positioning: Clearly communicate your unique skill combination
Job Matching: Help employers quickly identify relevant expertise
Skill Gaps: Identify areas for professional development
Team Fit: Demonstrate how your skills complement team needs

Perfect for technical professionals, creative experts, and anyone who wants to present their skills in an organized, visually appealing format that helps employers quickly understand their capabilities and expertise levels.

Turn your skill set into a competitive advantage with professional presentation that clearly communicates your value proposition.

Reference

Configuration

Every option the Resume Skills 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)
`title`	`string`	—	Section title (supports Markdown)
`text`	`string`	—	Section description (supports Markdown)

Design options

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

Property	Type	Default	Description
`columns`	`integer`	2	Number of columns used to render skill groups (1-5). Responsive: 2 cols applies at md, 3 at lg, 4 at xl, 5 at 2xl.

Compose

Works well with

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

Resume Biography Resume Experience Tech Stack

Frequently asked

Resume Skills block FAQ

Add a "block: resume-skills" 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 Skills block?

Customize with AI View source