About this block

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.

When to use

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

• About split

After

• Skills section
• Contact section

What you can display

One strong use is the ten year design career stepped through by employer. Other tabbed shapes:

• Freelance clients. One tab per client with the brief and the outcome in each panel.
• Focus areas. Group work by discipline rather than employer, one tab per practice.
• Selected projects. A tab per flagship project with scope and results in the detail panel.

Tip: keep the What I owned list to real responsibilities so each panel earns its tab.