Fix: Make project card links clickable on /projects page

[Pixeder]

Description

This PR fixes a bug on the /projects page where the project links (e.g., "Agora", "EduAid") were not clickable, preventing users from visiting the project repositories.

The Problem

The UI was rendering the project link and icon inside a <p> (paragraph) tag instead of an <a> (anchor) tag. This displayed the text correctly but provided no click functionality, even though the correct URLs were available in the data file.

File: src/pages/projects.jsx

Old (Broken) Code:

<p className="...">
  <LinkIcon ... />
  <span>{project.link.label}</span>
</p>

The Solution

I have replaced the <p> element with a functional <a> tag.

• It correctly uses the project.link.href for the link's destination.
• It uses target="_blank" and rel="noopener noreferrer" to securely open the link in a new tab.
• The styling and icon have been preserved.

New (Fixed) Code:

<a
  href={project.link.href}
  target="_blank"
  rel="noopener noreferrer"
  className="relative z-10 mt-6 flex text-md font-semibold font-mono text-zinc-600 dark:text-zinc-200 hover:text-[#00843D] dark:hover:text-yellow-400"
>
  <LinkIcon className="h-6 w-6 flex-none scale-110" />
  <span className="ml-2">{project.link.label}</span>
</a>

How to Test

1. Pull this branch.
2. Run npm install (if needed) and then npm run dev.
3. Navigate to the /projects page in your browser.
4. Click on any of the project links (e.g., "Agora").
5. Verify: The project's repository should open in a new browser tab.

Additional Note

As mentioned in the original bug report, the "OpenChat" project has its href set to "#" in the data file. This PR fixes the UI component, but that specific project will still not lead to a valid destination.

Summary by CodeRabbit

• New Features
  • Project links are now fully interactive and clickable across the entire link area.
  • Links open in a new tab with security best practices.
  • Enhanced hover states in both light and dark modes provide improved visual feedback.

[vercel]

Someone is attempting to deploy a commit to the AOSSIE Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

The PR converts a static project link display into a functional hyperlink by replacing the text container <p> element with an anchor tag, adding proper href and security attributes (target="_blank", rel="noopener noreferrer"), and updating hover styles for both light and dark modes.

Changes

Cohort / File(s)	Summary
Link Enhancement src/pages/projects.jsx	Replaced static paragraph element with functional anchor tag, added href and security attributes for new-tab link opening, updated hover styling from group-hover on paragraph to direct hover on anchor

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Single-file change with straightforward element and attribute updates
• CSS class changes follow a consistent pattern (group-hover → hover)
• No complex logic or state management involved
• Clear, focused modification with explicit intent

Possibly related issues

• Project links on /projects page are not clickable (UI does not use href) #481: Directly addresses the core objective of converting the non-clickable project link display into a functional anchor element with proper new-tab behavior and security attributes.

Poem

🐰 A clickable link hops into view,
No longer just text in static blue,
With href and rel so secure,
New tabs open—the fix is pure!
thump thump ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and accurately describes the main change: converting non-clickable project card links into functional clickable links by replacing a element with an anchor element.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/pages/projects.jsx (1)

86-94: LGTM! The fix correctly makes project links clickable.

The anchor element properly addresses the bug with correct security attributes (rel="noopener noreferrer") for external links opening in new tabs. The hover styling for both light and dark modes is maintained.

Optional enhancement: Consider using Material-UI's Link component for consistency.

Since the project already uses Material-UI components throughout, you could optionally use the Link component from @mui/material instead of a plain <a> tag for better consistency:

+import Link from '@mui/material/Link';

Then in the CardActions:

-              <a
-                href={project.link.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="relative z-10 mt-6 flex text-md font-semibold font-mono text-zinc-600 dark:text-zinc-200 hover:text-[#00843D] dark:hover:text-yellow-400"
-              >
+              <Link
+                href={project.link.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                underline="none"
+                className="relative z-10 mt-6 flex text-md font-semibold font-mono text-zinc-600 dark:text-zinc-200 hover:text-[#00843D] dark:hover:text-yellow-400"
+              >
                 <LinkIcon className="h-6 w-6 flex-none scale-110" />
                 <span className="ml-2">{project.link.label}</span>
-              </a>
+              </Link>

Optional accessibility enhancement:

You could add an aria-label to provide more context:

               <a
                 href={project.link.href}
                 target="_blank"
                 rel="noopener noreferrer"
+                aria-label={`Visit ${project.name} repository`}
                 className="relative z-10 mt-6 flex text-md font-semibold font-mono text-zinc-600 dark:text-zinc-200 hover:text-[#00843D] dark:hover:text-yellow-400"
               >

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dfb8668 and 5893814.

📒 Files selected for processing (1)

• src/pages/projects.jsx (1 hunks)