feat: added member icon hovering for clickable contact platforms (linkedin, gmail, etc) on each profile image in the Members Page

Author: krish-134

src/pages/Members/Members.css

@@ -138,15 +138,6 @@
                     gap: 10px;
                     position: relative;
 
-
-                    img {
-                        aspect-ratio: 1 / 1;
-                        width: 150px;
-                        object-fit: cover;
-                        border-radius: 100%;
-                        /* border: 2px solid var(--dark-green); */
-                    }
-
                     svg {
                         position: absolute;
                         top: 130px;
@@ -169,6 +160,66 @@
                             font-weight: 400;
                         }
                     }
+
+                    .member-image-wrapper {
+                        position: relative;
+                        width: 150px;
+                        height: 150px;
+                        border-radius: 100%;
+                        overflow: hidden;
+                        flex-shrink: 0;
+                    }
+
+                    .member-image-wrapper img {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                        display: block;
+                    }
+
+                    .member-overlay {
+                        position: absolute;
+                        inset: 0;
+                        background: rgba(0, 0, 0, 0.4);
+                        border-radius: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                        gap: 10px;
+                        opacity: 0;
+                        transition: opacity 0.2s ease;
+                        overflow-y: auto;
+                        padding: 8px 0;
+                    }
+
+                    .member-image-wrapper:hover .member-overlay {
+                        opacity: 1;
+                    }
+
+                    .member-overlay a {
+                        color: white;
+                        display: flex;
+                        align-items: center;
+                        gap: 8px;
+                        font-size: 0.75rem;
+                        text-decoration: none;
+                        transition: color 0.15s ease;
+                    }
+
+                    .member-overlay a:hover {
+                        color: var(--yellow);
+                    }
+
+                    .member-overlay a svg {
+                        /* override the anchor icon absolute positioning */
+                        position: static;
+                        width: 36px;
+                        height: 36px;
+                        color: inherit;
+                        transform: none;
+                    }
+
                 }
 
                 .member-item:hover svg {

src/pages/Members/Members.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUser, faAnchor } from '@fortawesome/free-solid-svg-icons';
+import { faUser, faAnchor, faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import { faLinkedin, faGithub, faInstagram } from '@fortawesome/free-brands-svg-icons';
 
 import './Members.css';
 
@@ -92,15 +93,33 @@ function MemberItem({ member }: MemberItemProps) {
         return role === "lead";
     }
 
+    const links = [
+        { href: member.media.linkedIn, icon: faLinkedin, label: "LinkedIn" },
+        { href: member.media.instagram, icon: faInstagram, label: "Instagram" },
+        { href: member.media.github, icon: faGithub, label: "GitHub" },
+        { href: member.media.email ? `mailto:${member.media.email}` : "", icon: faEnvelope, label: "Email" },
+
+    ].filter(link => link.href !== ""); // Filter out empty links
+
     return (
         <div className="member-item">
-            <img src={member.image !== ""? `/images/members/${member.image}` : '/images/members/placeholder.png'} />
+            <div className="member-image-wrapper">
+                <img src={member.image !== "" ? `/images/members/${member.image}` : '/images/members/placeholder.png'} />
+                {links.length > 0 && (
+                    <div className="member-overlay">
+                        {links.map(link => (
+                            <a key={link.label} href={link.href} target="_blank" rel="noopener noreferrer" aria-label={link.label}>
+                                <FontAwesomeIcon icon={link.icon} />
+                            </a>
+                        ))}
+                    </div>
+                )}
+            </div>
             <h4>
                 {member.firstName}
                 <br />
                 <span>{member.lastName}</span>
             </h4>
-
             {isLead(member.role) ? <FontAwesomeIcon icon={faAnchor} /> : <></>}
         </div>
     );