Sortable Side Projects Team Block for React

Edit PROJECTS at the top of the file: a name, an owner and their role, a sentence of description, stack chips, stars, forks and the month it started as an ISO year and month ("2026-03", fixed, never read from the clock). The header's total, the sort orders and the figures all come from this list. Keep the stack to two or three short chips so every cell has the same height when the grid re-sorts.

The two options are a group of toggles named "Sort by"; arrow keys move between them, and one is always chosen. Choosing re-orders the cells in place and a polite line says what came first ("Sorted by newest: Reedhurst first"). The order of the list in the page is the sorted order, so screen reader users meet the same sequence.

Each project's name is the heading of an accordion item, so its button says whether it is open. One item is open at a time, and pressing the open one folds it. Choosing another sort keeps the open project open. With reduced motion the description opens without the height transition. Tab moves from one name to the next; arrow keys do not move between them.

The cells are the same cells in a different order, and every closed cell is built to the same height: one line for the name, one for the figures and one for the chips. Rows therefore never change height when a sort puts different projects side by side. Opening a description does make its row taller, as an accordion should.

Below md the grid is one column and each cell keeps its figures under the name. The sort stays in the header, under the text. Nothing scrolls sideways at 320 pixels.

Yes. The cells and the sort follow the page direction, the numbers and months are wrapped in bdi, and the chevrons turn with the open state.