Skill Bars Grouped
Twelve skills across three discipline columns each with a div bar and a word level from Foundational to Fluent rather than a percentage.
Twelve skills across three discipline columns each with a div bar and a word level from Foundational to Fluent rather than a percentage.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Skill Bars Grouped organises twelve skills into three discipline columns: Design, Systems, and Development. Each skill carries a div bar filled with a theme token and a word label: Foundational, Working, Proficient, or Fluent. The lede is candid: the bars are a rough guide, not a precise measurement. Testing and QA sits at Foundational with a 38 percent fill; Product design sits at Fluent with 94 percent fill. The honest spread is the distinctive detail.
Groups are one array of three objects, each holding a skills array. Word labels rather than percentages are the distinctive choice: Fluent communicates something; 94 does not, and a bar at 100 would read as fiction.
Reach for this block on a dedicated skills page or after a capabilities grid on an about page. The installer swaps the three group headings, the skill names, the word labels, and the fill values, keeping at least one skill below Working to stay credible.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the design and development depth map for a hybrid designer-developer. Other grouped bar uses:
Tip: Foundational is not a weakness to hide; naming a low level honestly signals the other bars can be trusted.