helmhub-io · ifeatuosegbo · Nov 21, 2025 · Nov 25, 2025
diff --git a/assets/profile_photo/eseme.png b/assets/profile_photo/eseme.png
diff --git a/assets/profile_photo/ewere.jpg b/assets/profile_photo/ewere.jpg
diff --git a/assets/profile_photo/idowu.jpeg b/assets/profile_photo/idowu.jpeg
diff --git a/assets/profile_photo/ifeatu.jpg b/assets/profile_photo/ifeatu.jpg
diff --git a/assets/profile_photo/ilearo.jpeg b/assets/profile_photo/ilearo.jpeg
diff --git a/assets/profile_photo/oseni.jpeg b/assets/profile_photo/oseni.jpeg
diff --git a/assets/profile_photo/pix.png b/assets/profile_photo/pix.png
diff --git a/assets/profile_photo/utibe.jpeg b/assets/profile_photo/utibe.jpeg
diff --git a/assets/profile_photo/uv.jpeg b/assets/profile_photo/uv.jpeg
diff --git a/team.html b/team.html
@@ -49,12 +49,241 @@
         </div>
     </nav>
     <header>
-        <div class="container">
-            <h1>HelmHub.io Contributors</h1>
-            <p class="subtitle"> Here's the faces/accounts of Passionate Engineers commited to this project</p>
 
-
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>Helmhub Engineers</title>
+<style>
+  :root{
+    --cell-padding: 10px;
+    --photo-size: 140px;
+    --icon-size: 22px;
+    --gap: 8px;
+    --card-bg: #ffffff;
+    --muted: #6b7280;
+    --accent: #0f172a;
+    --shadow: 0 6px 18px rgba(15,23,42,0.06);
+  }
+
+  body{
+    font-family: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
+    margin:20px;
+    background:#f7fafc;
+    color:var(--accent);
+  }
+
+  .table-wrap{
+    overflow-x:auto;
+    border-radius:12px;
+    box-shadow:var(--shadow);
+    background:linear-gradient(180deg,#fff,#fbfdff);
+    padding:12px;
+  }
+
+  table.members {
+    border-collapse: collapse;
+    width:100%;
+    min-width: 940px; /* keeps layout stable on small screens, horizontal scroll appears */
+    table-layout: fixed;
+  }
+
+  table.members td {
+    padding: var(--cell-padding);
+    vertical-align: top;
+    width: calc(100% / 6); /* 6 columns */
+  }
+
+  .member-card {
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    gap: var(--gap);
+    background: var(--card-bg);
+    padding: 12px;
+    border-radius: 10px;
+    text-align:center;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
+    height:100%;
+  }
+
+  .member-photo{
+    width: var(--photo-size);
+    height: var(--photo-size);
+    border-radius: 10px;
+    object-fit: cover;
+    display:block;
+    box-shadow: 0 4px 10px rgba(2,6,23,0.06);
+  }
+
+  .member-name{
+    font-size: 0.95rem;
+    font-weight:600;
+    margin: 0;
+    color:var(--accent);
+  }
+
+  .member-title{
+    margin: 0;
+    font-size: 0.82rem;
+    color: var(--muted);
+  }
+
+  .social-row{
+    display:flex;
+    gap: 10px;
+    align-items:center;
+    justify-content:center;
+    margin-top:6px;
+  }
+
+  .social-link{
+    display:inline-grid;
+    place-items:center;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    text-decoration:none;
+    border: 1px solid transparent;
+    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
+  }
+
+  .social-link:focus,
+  .social-link:hover{
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(2,6,23,0.08);
+    background: #f3f6fb;
+    outline: none;
+    border-color: rgba(2,6,23,0.04);
+  }
+
+  .social-icon{
+    width: var(--icon-size);
+    height: var(--icon-size);
+    display:block;
+  }
+
+  /* small screens: make table single-column visually (user can scroll horizontally if needed) */
+  @media (max-width:720px){
+    table.members { min-width: 720px; }
+    :root { --photo-size: 110px; }
+  }
+</style>
+</head>
+<body>
+
+<div class="table-wrap" role="region" aria-label="Members directory">
+  <table class="members" aria-describedby="members-desc">
+    <caption id="members-desc" style="caption-side: bottom; text-align:left; padding-top:6px; color: #555; font-size:0.9rem;">
+
+    </caption>
+    <tbody id="members-tbody">
+      <!-- rows will be injected by JavaScript -->
+    </tbody>
+  </table>
+</div>
+
+<script>
+/*
+  Populate this array with your real member data.
+  For each member provide:
+   - name (string),
+   - title (string, optional),
+   - photo (url),
+   - linkedin (url or empty),
+   - github (url or empty),
+   - twitter (url or empty).
+
+  This script will create a 4 x 6 table (rows x columns). If members.length < 24,
+  empty cells will appear. If members.length > 24, extras are ignored.
+*/
+const members = [
+  { name: "Ewere Diagboya", title: "Enginner", photo: "/assets/profile_photo/ewere.jpg", linkedin: "https://www.linkedin.com/in/ewere/", github: "https://github.com/nimboya", twitter: "https://x.com/nimboya" },
+  { name: "Ileriayo Adebiyi", title: "Engineer", photo: "/assets/profile_photo/ilearo.jpeg", linkedin: "https://www.linkedin.com/in/ileriayo-adebiyi-0328b1101/", github: "https://github.com/Ileriayo", twitter: "https://twitter.com/ileriayooo" },
+  { name: "Utibe Okon", title: "Engineer", photo: "/assets/profile_photo/utibe.jpeg", linkedin: "https://www.linkedin.com/in/utibe-okon-8350a8111/", github: "https://github.com/yutee", twitter: "https://x.com/yutee_okon" },
+  { name: "Oseni Abdulhaleem", title: "Engineer", photo: "/assets/profile_photo/oseni.jpeg", linkedin: "https://www.linkedin.com/in/oseniabdulhaleem/", github: "https://github.com/oseniabdulhaleem", twitter: "#" },
+  { name: "Ukeme David Eseme", title: "Engineer", photo: "/assets/profile_photo/eseme.png", linkedin: "https://linkedin.com/in/ukemeeseme", github: "https://github.com/UkemeSkywalker", twitter: "https://twitter.com/SkywalkrShadow" },
+  { name: "John Idowu", title: "Engineer", photo: "/assets/profile_photo/idowu.jpeg", linkedin: "http://www.linkedin.com/johntoby007", github: "https://github.com/johntoby", twitter: "https://twitter.com/obacloud" },
+  { name: "Olalekan Sanni", title: "Engineer", photo: "/assets/profile_photo/pix.png", linkedin: "https://www.linkedin.com/in/olalekansannim/", github: "https://github.com/1MAGNOVA", twitter: "https://twitter.com/OlalekanSanni9" },
+  { name: "Theophilus Uviekugbere", title: "Engineer", photo: "/assets/profile_photo/uv.jpeg", linkedin: "https://www.linkedin.com/in/uviekugbere-theophilus/", github: "https://github.com/CloudknightOps", twitter: "#" },
+  { name: "FreemanBoss", title: "Engineer", photo: "/assets/profile_photo/pix.png", linkedin: "#", github: "https://github.com/FreemanBoss", twitter: "#" },
+  { name: "BILLIYON", title: "Engineer", photo: "/assets/profile_photo/pix.png", linkedin: "#", github: "https://github.com/BILLIYON", twitter: "#" },
+  { name: "Ifeatu Osegbo", title: "Engineer", photo: "/assets/profile_photo/ifeatu.jpg", linkedin: "https://www.linkedin.com/in/ifeatuosegbo/", github: "https://github.com/ifeatuosegbo", twitter: "https://x.com/IfeatuOsegbo" },
+  { name: "Abdulsomad Olayiwola Abdulwahab", title: "Engineer", photo: "/assets/profile_photo/pix.png", linkedin: "https://www.linkedin.com/in/abdulsomad-olayiwola-abdulwahab", github: "https://github.com/Roslaan001", twitter: "https://x.com/Roslaan001" },
+
+];
+
+const ROWS = 2;
+const COLS = 6;
+const tbody = document.getElementById('members-tbody');
+
+for (let r = 0; r < ROWS; r++) {
+  const tr = document.createElement('tr');
+
+  for (let c = 0; c < COLS; c++) {
+    const td = document.createElement('td');
+    const idx = r * COLS + c;
+    const data = members[idx];
+
+    if (!data) {
+      // empty cell placeholder
+      td.innerHTML = '<div style="height:100%;display:flex;align-items:center;justify-content:center;color:#9aa4b2;padding:12px;border-radius:10px;">Empty</div>';
+      tr.appendChild(td);
+      continue;
+    }
+
+    td.innerHTML = `
+      <div class="member-card" role="group" aria-label="${escapeHtml(data.name)} (${escapeHtml(data.title || '')})">
+        <img class="member-photo" src="${escapeHtml(data.photo)}" alt="Photo of ${escapeHtml(data.name)}" loading="lazy" width="300" height="300">
+        <div>
+          <p class="member-name">${escapeHtml(data.name)}</p>
+          <p class="member-title">${escapeHtml(data.title || '')}</p>
         </div>
+        <div class="social-row" aria-hidden="false">
+          ${socialLink('linkedin', data.linkedin, 'LinkedIn profile of ' + data.name)}
+          ${socialLink('github', data.github, 'GitHub profile of ' + data.name)}
+          ${socialLink('twitter', data.twitter, 'Twitter profile of ' + data.name)}
+        </div>
+      </div>
+    `;
+    tr.appendChild(td);
+  }
+  tbody.appendChild(tr);
+}
+
+/* helper to safely generate social links (returns empty string if url missing or '#') */
+function socialLink(type, url, ariaLabel) {
+  if (!url || url.trim() === '#') return '';
+  const svg = {
+    linkedin: `<svg class="social-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5C4.98 4.6 4.05 5.5 2.93 5.5 1.81 5.5.88 4.6.88 3.5.88 2.39 1.81 1.5 2.93 1.5c1.12 0 2.05.89 2.05 2zM.5 8.75h4.86v14.5H.5v-14.5zM9.07 8.75h4.66v1.98h.07c.65-1.23 2.24-2.53 4.62-2.53 4.95 0 5.86 3.26 5.86 7.5v8h-4.86v-7.06c0-1.68-.03-3.84-2.34-3.84-2.34 0-2.7 1.83-2.7 3.72v7.18H9.07v-14.5z"/></svg>`,
+    github: `<svg class="social-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.73.5.9 5.33.9 11.6c0 4.66 3.02 8.61 7.22 10.01.53.1.72-.23.72-.5 0-.25-.01-.92-.01-1.81-2.94.64-3.56-1.2-3.56-1.2-.48-1.23-1.17-1.56-1.17-1.56-.96-.66.07-.64.07-.64 1.06.07 1.62 1.09 1.62 1.09.94 1.61 2.48 1.15 3.08.88.09-.69.37-1.15.67-1.41-2.35-.27-4.82-1.17-4.82-5.2 0-1.15.41-2.09 1.08-2.82-.11-.27-.47-1.36.1-2.83 0 0 .88-.28 2.88 1.07A9.96 9.96 0 0112 6.86c.89.004 1.79.12 2.63.35 2-.35 2.88-1.07 2.88-1.07.56 1.47.2 2.56.1 2.83.67.73 1.08 1.67 1.08 2.82 0 4.04-2.48 4.93-4.84 5.19.38.33.72.98.72 1.98 0 1.43-.01 2.58-.01 2.93 0 .27.19.61.73.5 4.2-1.41 7.22-5.35 7.22-10.01C23.1 5.33 18.27.5 12 .5z"/></svg>`,
+    twitter: `<svg class="social-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23.4 4.8c-.7.3-1.4.5-2.2.6.8-.5 1.4-1.3 1.7-2.2-.8.5-1.6.9-2.6 1.1C18.6 3 17.3 2.4 16 2.4c-2.3 0-4.1 1.9-4.1 4.3 0 .3 0 .6.1.9-3.4-.2-6.5-1.9-8.6-4.5-.4.7-.6 1.6-.6 2.5 0 1.5.8 2.9 2.1 3.6-.6 0-1.2-.2-1.6-.5 0 2.1 1.5 3.9 3.6 4.3-.5.2-1 .2-1.6.1.5 1.5 2 2.6 3.7 2.6-1.4 1.1-3.1 1.7-5 1.7-.3 0-.5 0-.8-.1 1.8 1.2 3.9 2 6.2 2 7.5 0 11.6-6.7 11.6-12.6v-.6c.8-.6 1.5-1.3 2-2.2-.8.4-1.6.6-2.4.7z"/></svg>`
+  }[type];
+
+  // sanitized attributes
+  const href = escapeHtml(url);
+  const label = escapeHtml(ariaLabel || type);
+  return `<a class="social-link" href="${href}" aria-label="${label}" target="_blank" rel="noopener noreferrer">${svg}</a>`;
+}
+
+/* small helper to prevent simple injection via the members array */
+function escapeHtml(str) {
+  if (!str && str !== 0) return '';
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+</script>
+
+</body>
+</html>
+
+
     </header>
 
     <footer>