[UI/UX] Add Hover Tooltips to Tech Stack Icons on Project Cards

[Aditya948351]

Description

The project cards in the community hub display technology icons (like React, Node.js, etc.). However, newer developers might not recognize all the icons.

Proposed Solution

1. Use a tooltip library (like Radix UI or a simple CSS hover implementation).
2. Wrap each tech stack icon in the ProjectCard component with a tooltip displaying the technology name.

Expected Outcome

A more inclusive UI where hovering over an icon tells you exactly what technology it is.

[Tannuu18]

heyy @Aditya948351 i would like to work on this issue. Please assign me this issue.

[nishupr]

Hey @Aditya948351 !

I'd love to work on this issue. I've already looked through the codebase and have a solid plan to add hover tooltips to tech stack icons in the ProjectCard component.

Root Cause

The tech stack icons in Projects.tsx are rendered as plain <img> or icon elements with no accessible label or hover state, making them unrecognizable to newer developers unfamiliar with certain logos.

Implementation Plan

• Locate the tech icon rendering logic inside Projects.tsx / ProjectCard component
• Use a lightweight CSS tooltip - no extra library needed, keeping the bundle size clean
• Wrap each icon in a relative group container and use Tailwind's group-hover: to show a tooltip label
• Ensure accessibility - add aria-label and title attributes on each icon for screen reader support
• Test on mobile - tooltips will gracefully fall back to title attribute on touch devices

Code Change (Rough Idea)

// Before
<img src={tech.icon} alt={tech.name} className="w-5 h-5" />

// After
<div className="relative group">
  <img
    src={tech.icon}
    alt={tech.name}
    title={tech.name}
    aria-label={tech.name}
    className="w-5 h-5"
  />
  <span className="absolute -top-8 left-1/2 -translate-x-1/2 scale-0 group-hover:scale-100
    transition-all duration-200 bg-gray-800 text-white text-xs rounded px-2 py-1
    whitespace-nowrap z-10">
    {tech.name}
  </span>
</div>

Why CSS over a library?

• Zero new dependencies
• Fully controlled styling - easy to match DevPath's existing design tokens
• Radix UI can always be added later if more complex tooltip behavior is needed

Could you please assign this issue to me?