Enhance projects page with animated detail transitions

[remcostoeten]

Summary

• Replace the projects listing with a ProjectBrowser that provides animated, view-like transitions, keyboard shortcuts, and accessible overlays for project details.
• Update the projects page framing to emphasize the minimal, playful showcase layout.
• Refresh the project detail view header to align metadata, status, and stack presentation with the new interaction model.

Testing

• npm run build (fails: existing compilation errors in src/components/blog/posts-client.tsx and src/components/landing/tech-stack-cloud.tsx)

---

Codex Task

Summary by Sourcery

Introduce an interactive ProjectBrowser experience for the projects page with animated detail overlays and refreshed layouts for list and detail views.

New Features:

• Add a ProjectBrowser component that presents projects in an animated, keyboard-navigable overlay with previous/next navigation and deep links to full project pages.

Enhancements:

• Update the projects listing view to use the new ProjectBrowser instead of filterable cards and adjust empty-state messaging.
• Refine the projects page and project detail view headers, spacing, and card styling to better match the new minimal, playful interaction model.
• Display project summaries in the detail header, make media optional, and constrain the detail layout width for improved readability.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
remcostoeten-nl	Error		Dec 31, 2025 4:40am

[sourcery-ai]

Reviewer's Guide

Replaces the projects index grid and filters with a new animated ProjectBrowser overlay experience and refreshes the project detail layout/typography to match the updated interaction model.

Sequence diagram for ProjectBrowser detail overlay interactions

sequenceDiagram
  actor User
  participant ProjectsView
  participant ProjectBrowser
  participant Overlay as ProjectDetailOverlay
  participant FocusMgr as FocusManager
  participant KB as KeyboardHandler

  User->>ProjectsView: Navigate to /projects
  ProjectsView->>ProjectBrowser: Render with projects
  ProjectBrowser-->>User: Show animated project list

  User->>ProjectBrowser: Click project button
  ProjectBrowser->>ProjectBrowser: setActiveSlug(slug)
  ProjectBrowser->>Overlay: Mount overlay with activeProject
  Overlay-->>User: Animate overlay open
  Overlay->>FocusMgr: useEffect(activeProject) set focus to closeRef
  FocusMgr-->>Overlay: close button focused

  User->>KB: Press ArrowRight key
  KB->>ProjectBrowser: openNext()
  ProjectBrowser->>ProjectBrowser: update activeSlug to nextProject.slug
  ProjectBrowser->>Overlay: Animate layoutId transition to next project

  User->>KB: Press Escape key
  KB->>ProjectBrowser: closeDetail()
  ProjectBrowser->>Overlay: Unmount overlay
  Overlay-->>User: Animate overlay close
  ProjectBrowser->>FocusMgr: useEffect(activeProject=null)
  FocusMgr->>ProjectBrowser: Focus lastSlug button in list
  ProjectBrowser-->>User: List retains scroll position and focus

Loading

Class diagram for updated projects view and new ProjectBrowser component

classDiagram
  class ProjectsView {
    +ProjectFilter filter
    +ProjectsView(filter)
  }

  class ProjectBrowser {
    +Project[] projects
    -string activeSlug
    -Record_string_HTMLButtonElement_or_null buttonRefs
    -HTMLButtonElement_or_null closeRef
    -string_or_null lastSlug
    +ProjectBrowser(projects)
    +openDetail(slug string) void
    +closeDetail() void
    +openPrevious() void
    +openNext() void
    +setButtonRef(slug string, node HTMLButtonElement_or_null) void
  }

  class ProjectDetailView {
    +Project project
    +Project_or_undefined previous
    +Project_or_undefined next
    +ProjectDetailView(project, previous, next)
  }

  class Project {
    +string slug
    +string title
    +string summary
    +string description
    +string[] categories
    +ProjectDates dates
    +ProjectStatus status
    +ProjectStackItem[] stack
    +ProjectLinks_or_undefined links
    +ProjectMedia_or_undefined media
  }

  class ProjectDates {
    +Date start
    +Date_or_undefined end
    +Date updated
    +number year
  }

  class ProjectLinks {
    +string_or_undefined live
    +string_or_undefined repo
    +string_or_undefined docs
  }

  class StatusBadge {
    +StatusBadge(status ProjectStatus)
  }

  class StackPills {
    +StackPills(stack ProjectStackItem[], className string)
  }

  class MediaFrame {
    +MediaFrame(media ProjectMedia)
  }

  class ProjectNav {
    +ProjectNav(previous Project_or_undefined, next Project_or_undefined)
  }

  ProjectsView --> ProjectBrowser : renders
  ProjectsView --> Project : filters via filterProjects

  ProjectBrowser --> Project : consumes
  ProjectBrowser ..> StatusBadge : uses
  ProjectBrowser ..> StackPills : uses

  ProjectDetailView --> Project : displays
  ProjectDetailView ..> StatusBadge : uses
  ProjectDetailView ..> StackPills : uses
  ProjectDetailView ..> MediaFrame : conditionally uses
  ProjectDetailView ..> ProjectNav : uses

  Project --> ProjectDates
  Project --> ProjectLinks
  Project --> ProjectMedia
  Project --> ProjectStackItem

Loading

File-Level Changes

Change	Details	Files
Replace the projects list and filters with a ProjectBrowser-based animated list/detail experience.	Remove ProjectCard grid rendering and ProjectFilters usage from the projects view. Limit project registry usage in the view to filtering projects only. Render a ProjectBrowser for the current filtered projects and adjust the empty-state copy and styling. Update the projects page header styling, spacing, and copy to emphasize the new minimal, playful layout.	src/app/(marketing)/projects/view/projects-view.tsx
Refresh the project detail page layout and content structure to align with the new interaction model.	Constrain the detail article to a max width and adjust vertical spacing. Update header container styles (border radius, gradient, padding, backdrop blur). Switch the short text under the title to use project.summary instead of project.description. Make media optional when rendering MediaFrame and soften card section corners. Refine spacing around title, metadata row, stack pills, and link buttons for better hierarchy.	src/app/(marketing)/projects/view/project-detail-view.tsx
Introduce a ProjectBrowser component that provides animated list-to-detail overlays with keyboard navigation and accessibility affordances.	Implement client-side ProjectBrowser using framer-motion LayoutGroup, motion components, and AnimatePresence for card-to-dialog transitions. Track active project via slug, derive active/previous/next projects, and manage focus restoration between trigger buttons and the dialog close button. Handle Escape/ArrowLeft/ArrowRight keyboard events globally while a detail overlay is open to close or navigate between projects. Render a compact list of project cards with summary, status, year, and category, and an overlay dialog showing extended metadata, stack, and key links. Add next/previous navigation buttons and a link to the full project page within the overlay, with disabled states and ARIA attributes for accessibility.	src/app/(marketing)/projects/view/project-browser.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}