update

Author: yuhattor

data/members.yaml

@@ -2,6 +2,7 @@ members:
   - name: "Matt Cobby"
     role: "Secretary"
     area: "Australia"
+    linkedin: "https://www.linkedin.com/in/mattcobby/"
 
   - name: "Ada Dai"
     role: "Member"
@@ -26,10 +27,12 @@ members:
   - name: "Georg Grütter"
     role: "Assistant Treasurer"
     area: "Germany"
+    linkedin: "https://www.linkedin.com/in/georggruetter/"
 
   - name: "Sebastian Spier"
     role: "Board Member"
     area: "Germany"
+    linkedin: "https://www.linkedin.com/in/sebastianspier/"
 
   - name: "Guilherme Dellagustin"
     role: "Member"
@@ -38,6 +41,7 @@ members:
   - name: "Isabel Drost-Fromm"
     role: "Member"
     area: "Germany"
+    linkedin: "https://www.linkedin.com/in/isabel-drost-fromm-2a064a2/"
 
   - name: "Maximilian Capraro"
     role: "Member"
@@ -46,14 +50,17 @@ members:
   - name: "Tom Sadler"
     role: "Treasurer"
     area: "United Kingdom"
+    linkedin: "https://www.linkedin.com/in/tom-sadler-5b7b0726/"
 
   - name: "Danese Cooper"
     role: "Board Member"
     area: "Ireland"
+    linkedin: "https://www.linkedin.com/in/danesecooper/"
 
   - name: "Clare Dillon"
     role: "Board Member"
     area: "Ireland"
+    linkedin: "https://www.linkedin.com/in/claredillon/"
 
   - name: "Cristina Coffey"
     role: "Member"
@@ -66,10 +73,14 @@ members:
   - name: "Yuki Hattori"
     role: "Vice President"
     area: "japan"
+    linkedin: "https://www.linkedin.com/in/yukihattori/"
+    twitter: "https://twitter.com/yuhattor"
+    website: "https://hattori.dev"
 
   - name: "Daniel Izquierdo Cortázar"
     role: "President"
     area: "Spain"
+    linkedin: "https://www.linkedin.com/in/dicortazar/"
 
   - name: "Igor Zubaiurre"
     role: "Member"
@@ -118,6 +129,7 @@ members:
   - name: "Russell Rutledge"
     role: "Executive Director"
     area: "United States of America"
+    linkedin: "https://www.linkedin.com/in/russellrutledge/"
 
   - name: "Silona Bonewald"
     role: "Member"

index.html

@@ -8,6 +8,7 @@
     <script src="https://unpkg.com/globe.gl"></script>
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <script src="https://unpkg.com/topojson-client@3"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <style>
         body {
             margin: 0;
@@ -36,13 +37,28 @@
             top: 0;
             right: 0;
             background: rgba(255, 255, 255, 0.95);
-            padding: 20px;
             box-shadow: -2px 0 5px rgba(0,0,0,0.1);
-            overflow-y: auto;
             min-width: 300px;
             max-width: 400px;
             height: 100vh;
             z-index: 2;
+            display: flex;
+            flex-direction: column;
+        }
+        #members-panel h2 {
+            margin: 0;
+            padding: 20px 20px 10px 20px;
+            color: #2c3e50;
+            border-bottom: 2px solid #3498db;
+            background: rgba(255, 255, 255, 0.95);
+            position: sticky;
+            top: 0;
+            z-index: 3;
+        }
+        #members-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
         }
         .region-card {
             padding: 20px;
@@ -76,16 +92,45 @@
         .member-item {
             padding: 8px 0;
             border-top: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+        }
+        .member-info {
+            flex: 1;
         }
         .member-name {
             color: #34495e;
             font-weight: 500;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
         }
         .member-role {
             color: #7f8c8d;
             font-size: 0.9em;
             margin-top: 2px;
         }
+        .member-social {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+        }
+        .social-icon {
+            color: #7f8c8d;
+            text-decoration: none;
+            transition: color 0.2s ease;
+            font-size: 1.1em;
+        }
+        .social-icon:hover {
+            color: #2c3e50;
+        }
+        .region-card.active .social-icon {
+            color: rgba(255, 255, 255, 0.8);
+        }
+        .region-card.active .social-icon:hover {
+            color: white;
+        }
         .state-section {
             margin-top: 10px;
             padding-left: 15px;
@@ -99,13 +144,6 @@
         .region-card.active .state-section {
             border-left-color: rgba(255, 255, 255, 0.3);
         }
-        h2 {
-            margin-top: 0;
-            color: #2c3e50;
-            border-bottom: 2px solid #3498db;
-            padding-bottom: 10px;
-            margin-bottom: 20px;
-        }
     </style>
 </head>
 <body>

js/app.js

@@ -170,7 +170,13 @@ function updateMembersList() {
     const panel = document.getElementById('members-panel');
     if (!panel) return;
 
-    panel.innerHTML = '<h2>Foundation Members</h2>';
+    // ヘッダーとリストコンテナを設定
+    panel.innerHTML = `
+        <h2>Foundation Members</h2>
+        <div id="members-list"></div>
+    `;
+    
+    const listContainer = document.getElementById('members-list');
 
     // 地域ごとにメンバーをグループ化
     const groupedMembers = {};
@@ -248,8 +254,29 @@ function updateMembersList() {
             <div class="member-list">
                 ${sortedMembers.map(member => `
                     <div class="member-item">
-                        <div class="member-name">${member.name}</div>
-                        <div class="member-role">${member.role}</div>
+                        <div class="member-info">
+                            <div class="member-name">
+                                ${member.name}
+                                <div class="member-social">
+                                    ${member.linkedin ? `
+                                        <a href="${member.linkedin}" target="_blank" rel="noopener noreferrer" class="social-icon">
+                                            <i class="fab fa-linkedin"></i>
+                                        </a>
+                                    ` : ''}
+                                    ${member.twitter ? `
+                                        <a href="${member.twitter}" target="_blank" rel="noopener noreferrer" class="social-icon">
+                                            <i class="fab fa-twitter"></i>
+                                        </a>
+                                    ` : ''}
+                                    ${member.website ? `
+                                        <a href="${member.website}" target="_blank" rel="noopener noreferrer" class="social-icon">
+                                            <i class="fas fa-globe"></i>
+                                        </a>
+                                    ` : ''}
+                                </div>
+                            </div>
+                            <div class="member-role">${member.role}</div>
+                        </div>
                     </div>
                 `).join('')}
             </div>
@@ -273,7 +300,8 @@ function updateMembersList() {
             }
         });
 
-        panel.appendChild(regionCard);
+        // パネルではなくリストコンテナに追加
+        listContainer.appendChild(regionCard);
     });
 }