refactor: redesign projects page to match blog/experience style#5
refactor: redesign projects page to match blog/experience style#5eglenn-dev wants to merge 2 commits into
Conversation
Switch from 3-column card grid to single-column editorial list with search (Cmd/Ctrl+F + URL-persisted via nuqs), consistent typography (text-3xl h1, muted subtitle), divide-y separators, and shared accent colors. Replace bulky Read/View buttons with inline icon links, drop TagIcon from tech badges, and wrap the client component in Suspense to satisfy prerender constraints.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Refactors the /projects route to match the blog/experience editorial list layout, adding client-side search synced to the URL via nuqs and simplifying project actions into inline icon links, while keeping the server route prerender-friendly via Suspense.
Changes:
- Introduces a new client component to render a single-column, divider-separated project list with URL-persisted search and Cmd/Ctrl+F focusing behavior.
- Simplifies per-project actions to inline “Read/View” links with icons and removes the Tag icon from technology badges.
- Updates the route’s
page.tsxto render the new client component insideSuspense.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| app/projects/projects.tsx | New client-rendered projects list with search, keyboard shortcuts, and inline action links/icons. |
| app/projects/page.tsx | Replaces the old card grid with a Suspense wrapper around the new client component. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Link | ||
| href={project.article} | ||
| target={ | ||
| project.article.startsWith( | ||
| "http", | ||
| ) | ||
| ? "_blank" | ||
| : "_self" | ||
| } | ||
| className="inline-flex items-center gap-1 text-muted-foreground hover:text-primary transition-colors" | ||
| > | ||
| <span>Read</span> | ||
| <ArticleIcon /> | ||
| </Link> |
There was a problem hiding this comment.
When opening an external URL in a new tab (target="_blank"), add rel="noopener noreferrer" to prevent reverse-tabnabbing. This link can render with _blank for http/https URLs but currently omits rel.
| <Link | ||
| href={project.link} | ||
| target={ | ||
| project.link.startsWith("http") | ||
| ? "_blank" | ||
| : "_self" | ||
| } | ||
| className="inline-flex items-center gap-1 text-muted-foreground hover:text-primary transition-colors" | ||
| > | ||
| <span>View</span> | ||
| <OpenIcon /> | ||
| </Link> |
There was a problem hiding this comment.
When project.link is external and you set target="_blank", include rel="noopener noreferrer" (consistent with mdx-components.tsx) to avoid reverse-tabnabbing.
Drop the right-aligned link cluster next to the title and place "View site" / "Read article" as small icon links below the tech badges. Clears the title row and treats the links as metadata, giving the projects page its own layout instead of mirroring blog.
Switch from 3-column card grid to single-column editorial list with
search (Cmd/Ctrl+F + URL-persisted via nuqs), consistent typography
(text-3xl h1, muted subtitle), divide-y separators, and shared accent
colors. Replace bulky Read/View buttons with inline icon links, drop
TagIcon from tech badges, and wrap the client component in Suspense
to satisfy prerender constraints.