From 2769277efbdab25487406af291c92b6ad6e1a19b Mon Sep 17 00:00:00 2001
From: Nikhil M Warrier <nikhilmw.dev@gmail.com>
Date: Thu, 5 Mar 2026 21:09:33 +0530
Subject: Update member cards

---
 src/components/MemberCard.astro | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

(limited to 'src/components/MemberCard.astro')

diff --git a/src/components/MemberCard.astro b/src/components/MemberCard.astro
index b98e3ee..1d4e9c6 100644
--- a/src/components/MemberCard.astro
+++ b/src/components/MemberCard.astro
@@ -22,13 +22,17 @@ const socialLinks: SocialLink[] = [
   member.data.twitter && { href: member.data.twitter, label: 'Twitter' },
   member.data.linkedin && { href: member.data.linkedin, label: 'LinkedIn' },
   member.data.mail && { href: `mailto:${member.data.mail}`, label: 'Email' },
+  member.data.instagram && {
+    href: `mailto:${member.data.instagram}`,
+    label: 'Instagram',
+  },
 ].filter(Boolean) as SocialLink[]
 ---
 
 <div
-  class="has-[a:hover]:bg-muted/50 overflow-hidden rounded-xl border p-4 transition-colors duration-300 ease-in-out"
+  class="has-[a:hover]:bg-muted/50 w-64 overflow-hidden rounded-xl border p-4 transition-colors duration-300 ease-in-out"
 >
-  <div class="flex flex-wrap gap-4">
+  <div class="flex flex-col items-center gap-4">
     <Link
       href={`/members/${member.id}`}
       class={cn('block', isAuthorPage && 'pointer-events-none')}
@@ -39,23 +43,27 @@ const socialLinks: SocialLink[] = [
         alt={`Avatar of ${name}`}
         fallback={name[0]}
         className={cn(
-          '.:data-[slot="avatar-fallback"]:rounded-md size-32 rounded-md',
+          '.:data-[slot="avatar-fallback"]:rounded-md size-32 rounded-lg',
           !isAuthorPage &&
             'hover:ring-primary transition-shadow duration-300 hover:cursor-pointer hover:ring-2',
         )}
       />
     </Link>
-    <div class="flex grow flex-col justify-between gap-y-4">
+    <div
+      class="flex grow flex-col items-center justify-between gap-y-4 text-center"
+    >
       <div>
-        <div class="flex flex-wrap items-center gap-x-2">
+        <div class="flex flex-col items-center gap-x-2">
           <h3 class="text-lg font-medium">{name}</h3>
           {
             pronouns && (
-              <span class="text-muted-foreground text-sm">({pronouns})</span>
+              <span class="text-muted-foreground font-mono text-xs">
+                {pronouns}
+              </span>
             )
           }
         </div>
-        <p class="text-muted-foreground text-sm">{bio}</p>
+        <p class="text-muted-foreground mt-3 leading-relaxed">{bio}</p>
       </div>
       <SocialIcons links={socialLinks} />
     </div>
-- 
cgit v1.2.3