Add LinkedIn and website icons to team profiles

package.json

@@ -22,6 +22,7 @@
     "react-dom": "^19.2.8"
   },
   "overrides": {
+    "js-yaml": "3.15.2",
     "lighthouse": "13.4.1",
     "nanoid": "3.3.18",
     "tmp": "0.2.7"

src/components/ui/icons.tsx

@@ -53,3 +53,26 @@ export function MailIcon() {
     </StrokeIcon>
   )
 }
+
+export function LinkedInIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" />
+    </svg>
+  )
+}
+
+export function WebsiteIcon() {
+  return (
+    <StrokeIcon width="20" height="20" strokeWidth={2}>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M3 12h18M12 3c2.7 2.6 3.8 6 3.8 9s-1.1 6.4-3.8 9c-2.7-2.6-3.8-6-3.8-9S9.3 5.6 12 3z" />
+    </StrokeIcon>
+  )
+}

src/features/home/TeamSection.module.css

@@ -31,8 +31,24 @@
   transform: rotate(-0.3deg);
 }
 
-.person a {
-  display: inline-block;
+.person .profileLink {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  margin-top: 6px;
+  color: var(--ink-muted);
+  border-radius: 6px;
+}
+
+.profileLink:hover {
+  color: var(--blue-deep);
+}
+
+.profileLink:focus-visible {
+  outline: 2px solid var(--blue-deep);
+  outline-offset: 2px;
 }
 
 .avatar {

src/features/home/TeamSection.tsx

@@ -1,3 +1,4 @@
+import { LinkedInIcon, WebsiteIcon } from '~/components/ui/icons'
 import { Pin } from '~/components/ui/Pin'
 import { Section } from '~/components/ui/Section'
 import { founders, judge, staff, type Person } from '~/data/team'
@@ -6,7 +7,7 @@ import typography from '~/styles/typography.module.css'
 import styles from './TeamSection.module.css'
 
 function Avatar({ person }: { person: Person }) {
-  const img = (
+  return (
     <img
       className={styles.avatar}
       src={person.photo}
@@ -17,19 +18,6 @@ function Avatar({ person }: { person: Person }) {
       decoding="async"
     />
   )
-
-  if (!person.href) return img
-
-  return (
-    <a
-      href={person.href}
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label={`${person.name} (opens in a new tab)`}
-    >
-      {img}
-    </a>
-  )
 }
 
 function PersonCard({ person, wide }: { person: Person; wide?: boolean }) {
@@ -39,6 +27,21 @@ function PersonCard({ person, wide }: { person: Person; wide?: boolean }) {
       <Avatar person={person} />
       <p className={styles.name}>{person.name}</p>
       <p className={styles.role}>{person.role}</p>
+      {person.href && (
+        <a
+          className={styles.profileLink}
+          href={person.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={`${person.name} — ${new URL(person.href).hostname === 'www.linkedin.com' ? 'LinkedIn' : 'website'} (opens in a new tab)`}
+        >
+          {new URL(person.href).hostname === 'www.linkedin.com' ? (
+            <LinkedInIcon />
+          ) : (
+            <WebsiteIcon />
+          )}
+        </a>
+      )}
       {person.bio && (
         <details className={styles.bio}>
           <summary>read her bio &darr;</summary>