Career Path Spotlights About Block for React

Edit PEOPLE at the top of the file. Each person has a name, a role, a tenure in years, a fact, the three path labels joined, later and now, and three answers (a normal Tuesday, what the job turned out to be, and advice). The initials and the "Here N years" badge are derived. A new person becomes a new row and a new panel.

The list stays a vertical tab list, including on a phone where it looks like a row of chips, so Up and Down move between the names, Home and End jump to the first and last, and Tab moves into the open profile. The open row is the selected tab, marked by a bar on a large screen and a filled chip on a phone.

The profiles differ in length. An unseen, inert copy of every profile sits in the same grid cell as the open one, so the cell keeps the height of the tallest. Those copies are out of the accessibility tree and the tab order.

The open profile is the one mounted in the tab panel. The other profiles are not mounted there. The inert copies used to hold the height stay in the HTML, hidden from assistive technology, and are not a second set of profiles to read.

The names become one scrolling row of chips, and the role leaves the chip and stays under the name in the profile. The path stays three nodes across. Nothing else scrolls sideways at 320 pixels.

The header and the tab region fade up once when the page loads, and the profile fades in when you choose another person. With reduced motion the entrances are off and the profile swaps at once.