Experience Tabs
A vertical rail of companies switches a detail panel showing the role title, a first person summary, what you owned, and a stat row.
A vertical rail of companies switches a detail panel showing the role title, a first person summary, what you owned, and a stat row.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Experience Tabs renders a vertical rail of four companies with year ranges that switches a detail panel beside it. Selecting a company (Ledger, 2022 to now) swaps in the role title, the period, a first person summary, a What I owned list, and a three figure stat row. The tab form lets a visitor step through a whole history one role at a time rather than scrolling every entry at once.
Roles are one const array. The shadcn Tabs component drives selection, with the rail built from TabsList triggers and each panel a matching TabsContent. The active trigger takes a soft filled state so the current company stays obvious while the panel reads.
Reach for this block on an about page or a resume page where the visitor wants to explore each role in depth without a long vertical scroll. The installer swaps every company, role, and stat for their own history, keeping each summary in the first person.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the ten year design career stepped through by employer. Other tabbed shapes:
Tip: keep the What I owned list to real responsibilities so each panel earns its tab.