refactor(portfolio): replace tech experience card grid with sortable table - #124
Conversation
0ddfbbf to
a30fdc1
Compare
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a30fdc1f03
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3be8415149
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 99a6739fbc
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const hiddenCount = $derived(sortedEntries.length - visibleCount); | ||
| const collapses = $derived(hiddenCount > 0); | ||
| const isExpanded = $derived(!enhanced || expanded || !collapses); | ||
| const visibleEntries = $derived(isExpanded ? sortedEntries : sortedEntries.slice(0, visibleCount)); |
There was a problem hiding this comment.
After a desktop user changes the sort while the table is collapsed, this slice can hide an entry from the original featured partition (for example, sorting by name hides TypeScript). Following that technology's keyword link from a project then leaves the table collapsed because PortfolioPage.remainingSkillIds still reflects only the initial recency partition, so the target row is absent and the hash navigation cannot focus or scroll to it. The fresh evidence beyond the earlier default-order issue is that the new local sort dynamically changes the hidden partition without updating the parent's expansion decision.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 664585f016
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| > | ||
| {label} | ||
| {#if sortKey === key} | ||
| <span aria-hidden="true">{sortDir === "asc" ? "▲" : "▼"}</span> |
There was a problem hiding this comment.
At viewport widths below sm, screen-reader users only receive aria-pressed for the active sort key, while this direction indicator is hidden from the accessibility tree. Repeatedly activating a pill therefore toggles ascending/descending order without announcing which order is active; include the direction in the accessible name or expose an equivalent status.
AGENTS.md reference: AGENTS.md:L285-L287
Useful? React with 👍 / 👎.
b3fe064 to
807f622
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 807f622cf6
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <col /> | ||
| <col class="w-[22%]" /> | ||
| </colgroup> | ||
| <thead class="max-sm:hidden"> |
There was a problem hiding this comment.
At viewport widths below sm, this hides the entire <thead> with display: none, removing every column header and its scope association from the accessibility tree. The data-label values added through CSS-generated ::before content are not semantic table headers, so mobile screen-reader table navigation encounters duration, project, and recency cells without associated column names; keep an accessible header row while hiding it only visually.
AGENTS.md reference: AGENTS.md:L282-L285
Useful? React with 👍 / 👎.
| <button | ||
| type="button" | ||
| class="w-full cursor-pointer text-left text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-[var(--color-brand-muted)] hover:text-[var(--color-brand-cyan)] focus-visible:text-[var(--color-brand-cyan)]" | ||
| onclick={() => toggleSort(key)} |
There was a problem hiding this comment.
When JavaScript is disabled, the server-rendered table still exposes these sorting buttons even though their onclick handlers cannot run, leaving keyboard and no-JS users with controls that do nothing. The rows correctly remain fully readable in this mode, but the sorting enhancement should be rendered only after enhanced becomes true, as the expand/collapse control already is, or otherwise degrade to non-interactive headings.
AGENTS.md reference: AGENTS.md:L63-L65
Useful? React with 👍 / 👎.
roschaefer
changed the title
roschaefer
changed the title
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2b5f8b7796
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
a963058 to
5f3e990
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5f3e990aa8
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
…table Show technology experience as a sortable table so visitors can compare breadth, duration, project count, and recency without scanning repeated cards. The table keeps the original static content readable without JavaScript, adds mobile-specific sorting controls only after enhancement, preserves hash targets when sort order changes, and avoids row transition animation for visitors who prefer reduced motion. Verification: git diff --check; pnpm check:types.
5f3e990 to
fcd5170
Compare
1 participant
Show technology experience as a sortable table so visitors can compare breadth, duration, project count, and recency without scanning repeated cards.
The table keeps the original static content readable without JavaScript, adds mobile-specific sorting controls only after enhancement, preserves hash targets when sort order changes, and avoids row transition animation for visitors who prefer reduced motion.
Verification: git diff --check; pnpm check:types.