Scope ProjectCard glow to image container; add pointer-events-none and aria-hidden

[Copilot]

The absolute glow element was positioned relative to the entire image column wrapper, which also contains the mobile-only buttons. This caused the glow to paint above the buttons on small screens, blocking clicks and degrading contrast.

Changes

• Scoped glow to image only: Introduced an inner relative group wrapper around just the image container. Mobile buttons are now siblings outside this stacking context.
• pointer-events-none: Prevents the decorative overlay from intercepting any input events.
• aria-hidden="true": Hides the purely decorative element from assistive technologies.

{/* Before: glow scoped to entire column including mobile buttons */}
<div className="w-full lg:w-5/12 relative group">
  <div className="absolute -inset-1 bg-gradient-to-r ..."></div>
  <div className="relative ... aspect-video">...</div>
  {/* Mobile buttons could be overlaid by glow ↑ */}
  <div className="lg:hidden">...</div>
</div>

{/* After: glow scoped to image wrapper only */}
<div className="w-full lg:w-5/12">
  <div className="relative group">
    <div className="absolute -inset-1 ... pointer-events-none" aria-hidden="true"></div>
    <div className="relative ... aspect-video">...</div>
  </div>
  {/* Mobile buttons are outside the glow's stacking context */}
  <div className="lg:hidden">...</div>
</div>

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
react-portfolio	Error		Mar 12, 2026 0:46am

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/react-portfolio/react-portfolio/node_modules/.bin/vite build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)