Skills Matrix
A heading and lede above a bordered table pairing skill rows with three engagement columns, one filled dot per row marking lead, build, or refer.
A heading and lede above a bordered table pairing skill rows with three engagement columns, one filled dot per row marking lead, build, or refer.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Skills Matrix lays skills against three engagement columns in a bordered, horizontally scrollable table. The header row names the modes (I lead it end to end, I build alongside a team, I bring in a specialist) and each skill row carries exactly one filled dot under the mode that fits, with smaller muted dots in the other two cells. The heading and lede frame it as one mark per row, more useful than a score out of ten.
Columns and rows are two typed arrays, and each row renders a filled dot only where its mode matches the column key. The single mark rule is the honest constraint: it forces a clear stance on every skill instead of a hedge.
Reach for this block on a skills or services page when the installer wants to show scope honestly, naming what they own versus what they hand off. The installer swaps the skill rows and their mode, keeping one mark per row so the grid stays legible.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the lead, build, or refer scope grid. Other configurations:
Tip: resist adding a fourth column; the value is in forcing one clear stance per row, which a wider grid quietly undoes.