Expertise Bars
A two-column expertise display with five div proficiency bars filled via theme tokens and plain-language level labels from Foundational to Fluent instead of percentages.
A two-column expertise display with five div proficiency bars filled via theme tokens and plain-language level labels from Foundational to Fluent instead of percentages.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Expertise Bars shows five skills across a two-column layout, the left holding the section heading "Where I am strongest" and an honest disclaimer, the right holding the bars. Each bar is a div filled with the primary theme token to a numeric fill value, with a plain-language level label beside the skill name: Fluent, Proficient, Working, or Foundational. The block names the four levels explicitly and notes that no single bar tells the whole story.
Skills are one typed array with name, level string, and fill number. The word label instead of a percentage is the distinctive choice: a number pretends to precision that does not exist, a word is honest about what the bar actually shows.
Reach for this block on an about page or a skills page when relative depth matters more than a flat list. The installer swaps the five skills and adjusts the fills and level labels to reflect their own honest range.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the product designer depth map. Other configurations:
Tip: keep the disclaimer text; removing it makes the bars read as a measurement, which they are not.