hyperloopWebsite/members.html at main · hyperloop-cornell/hyperloopWebsite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<!DOCTYPE html>
<html class="dark" lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Cornell Hyperloop — Members</title>
<meta name="description" content="Meet the Cornell Hyperloop roster of faculty advisors, team leads, subteam leads, and members."/>
<meta name="robots" content="index,follow"/>
<link rel="canonical" href="https://www.cornellhyperloop.com/members.html"/>
<meta property="og:title" content="Cornell Hyperloop — Members"/>
<meta property="og:description" content="Meet the Cornell Hyperloop roster of faculty advisors, team leads, subteam leads, and members."/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.cornellhyperloop.com/members.html"/>
<meta property="og:image" content="https://www.cornellhyperloop.com/res/2025springhyperloop.avif"/>
<meta property="og:image:alt" content="Cornell Hyperloop team at competition"/>
<meta property="og:site_name" content="Cornell Hyperloop"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Cornell Hyperloop — Members"/>
<meta name="twitter:description" content="Meet the Cornell Hyperloop roster of faculty advisors, team leads, subteam leads, and members."/>
<meta name="twitter:image" content="https://www.cornellhyperloop.com/res/2025springhyperloop.avif"/>
<link rel="icon" href="https://www.cornellhyperloop.com/favicon.png" type="image/png"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; form-action 'self'; img-src 'self' data: https:; font-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; connect-src 'self'; frame-src https://www.youtube.com; worker-src 'self'; object-src 'none'"/>
<link rel="stylesheet" href="res/tw.css?v=8"/>
<style>
  @font-face{font-family:'Material Symbols Outlined';src:url('res/fonts/material-symbols-outlined.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'Inter';src:url('res/fonts/inter/inter-variablefont_opsz,wght.subset.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
  @font-face{font-family:'Inter';src:url('res/fonts/inter/inter-italic-variablefont_opsz,wght.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap}
  @font-face{font-family:'Space Grotesk';src:url('res/fonts/space_grotesk/spacegrotesk-variablefont_wght.subset.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
  .material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
  .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 }
  .grid-overlay {
    background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  html,body{background:#0c1324;color:#dce1fb;overflow-x:hidden}
  .member-photo { transition: transform 0.4s ease; }
  .group:hover .member-photo { transform: scale(1.04); }
  .member-card-touch-active .member-photo { transform: scale(1.04); }
  .img-skeleton { background: linear-gradient(90deg, #151b2d 25%, #23293c 50%, #151b2d 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
  .linkedin-action {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(0.5rem);
    transition: opacity 300ms ease, transform 300ms ease, border-color 300ms ease, color 300ms ease, background-color 300ms ease;
  }
  .group:hover .linkedin-action {
    transform: translateX(0);
    opacity: 1;
  }
  .member-card-touch-active .linkedin-action {
    transform: translateX(0);
    opacity: 1;
  }
  .group:hover .linkedin-action.disabled {
    opacity: 0.6;
  }
  .member-card-touch-active .linkedin-action.disabled {
    opacity: 0.6;
  }
  .member-card-touch-active {
    border-color: var(--member-card-hover-border) !important;
  }
  .member-card-touch-active .member-card-hover-outline {
    border-color: var(--member-card-hover-border) !important;
  }
  .member-card-touch-active .member-card-hover-title {
    color: var(--member-card-hover-title) !important;
  }
  @keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
</style>
</head>
<body class="bg-background text-on-background font-body-md text-body-md overflow-x-hidden">
<div id="nav-placeholder"></div>

<main>
  <!-- Page Header -->
  <section class="relative py-28 md:py-36 border-b border-outline-variant overflow-hidden">
    <div class="grid-overlay absolute inset-0 opacity-30"></div>
    <div class="absolute inset-0 z-0">
      <img src="res/trainteam.avif" alt="Cornell Hyperloop team" class="w-full h-full object-cover opacity-30" loading="lazy" decoding="async"/>
      <div class="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-background/40"></div>
    </div>
    <div class="relative z-10 max-w-container-max mx-auto px-6 md:px-margin h-[275px] md:h-[269px]">
      <div class="border-l-2 border-primary-container pl-8">
        <span class="font-label-caps text-label-caps text-primary tracking-[0.2em] uppercase flex items-center gap-2 mb-4">
          <span class="w-8 h-[1px] bg-primary block"></span>Personnel
        </span>
        <h1 class="font-headline-xl text-headline-xl text-on-surface uppercase tracking-tighter mb-4" style="font-size:clamp(1.75rem,10vw,4rem)">The Roster</h1>
        <p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">
          Engineers, designers, and strategists. The core unit driving Cornell Hyperloop's mechanical excellence and velocity-focused innovation.
        </p>
      </div>
    </div>
  </section>

  <!-- Team Leads -->
  <section class="py-20 border-b border-outline-variant">
    <div class="max-w-container-max mx-auto px-margin">
      <div class="flex items-center gap-4 mb-10">
        <h2 class="font-headline-md text-headline-md text-primary uppercase tracking-tight whitespace-nowrap">Leads</h2>
        <div class="h-px bg-outline-variant flex-grow opacity-50"></div>
        <span class="font-label-caps text-label-caps text-on-surface-variant uppercase whitespace-nowrap">LDR-01</span>
      </div>
      <div id="team-leads" class="grid" style="grid-template-columns:repeat(auto-fit, 280px);justify-content:center;gap:0.5rem"></div>
    </div>
  </section>

  <!-- Subteam Leads -->
  <section class="py-20 border-b border-outline-variant">
    <div class="max-w-container-max mx-auto px-margin">
      <div class="flex items-center gap-4 mb-10">
        <h2 class="font-headline-md text-headline-md text-on-surface uppercase tracking-tight whitespace-nowrap">Subteam Leads</h2>
        <div class="h-px bg-outline-variant flex-grow opacity-50"></div>
        <span class="font-label-caps text-label-caps text-on-surface-variant uppercase whitespace-nowrap">LDR-02</span>
      </div>
      <div id="subteam-leads" class="grid" style="grid-template-columns:repeat(auto-fit, 250px);justify-content:center;gap:0.5rem"></div>
    </div>
  </section>

  <!-- Members by Subteam -->
  <section class="py-20">
    <div class="max-w-container-max mx-auto px-margin">
      <div class="flex items-center gap-4 mb-10">
        <h2 class="font-headline-md text-headline-md text-on-surface uppercase tracking-tight whitespace-nowrap">Active Roster</h2>
        <div class="h-px bg-outline-variant flex-grow opacity-50"></div>
        <span class="font-label-caps text-label-caps text-on-surface-variant uppercase whitespace-nowrap">RST-03</span>
      </div>
      <div id="members-by-subteam" class="space-y-16"></div>
    </div>
  </section>

  <!-- Faculty Advisors -->
  <section class="py-20 border-b border-outline-variant">
    <div class="max-w-container-max mx-auto px-margin">
      <div class="flex items-center gap-4 mb-10">
        <h2 class="font-headline-md text-headline-md text-on-surface uppercase tracking-tight whitespace-nowrap">Faculty Advisors</h2>
        <div class="h-px bg-outline-variant flex-grow opacity-50"></div>
        <span class="font-label-caps text-label-caps text-on-surface-variant uppercase whitespace-nowrap">FAC-00</span>
      </div>
      <div id="faculty" class="grid" style="grid-template-columns:repeat(auto-fit, 260px);justify-content:center;gap:0.5rem"></div>
    </div>
  </section>
</main>

<div id="footer-placeholder"></div>
<script src="shared.js?v=8"></script>
<script>
const PHOTO_BASE = "res/compressed_teamPhotos/";
const LINKEDIN_ICON = `
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" style="width:0.95rem;height:0.95rem;display:block">
    <path fill="currentColor" d="M6.94 6.5A1.94 1.94 0 1 1 3.06 6.5a1.94 1.94 0 0 1 3.88 0ZM3.5 9.75h3V20h-3Zm5.26 0h2.88v1.42h.04c.4-.77 1.39-1.58 2.86-1.58 3.06 0 3.62 2.02 3.62 4.66V20h-3v-5.24c0-1.25-.02-2.86-1.74-2.86-1.73 0-1.99 1.35-1.99 2.77V20h-3V9.75Z"/>
  </svg>`;
const LEAD_CARD_HEIGHT = 368;
const SUBTEAM_LEAD_CARD_HEIGHT = 284;
const FACULTY_CARD_HEIGHT = 298;
const MEMBER_CARD_HEIGHT = 248;

function cardWrapper(person, inner, extraStyle = "") {
  const style = extraStyle ? ` style="${extraStyle}"` : "";
  return `<div${style} class="group relative bg-surface-container-low border border-surface-variant flex flex-col overflow-hidden hover:border-primary/50 transition-colors duration-300">${inner}</div>`;
}

function cardStyles(accent, title) {
  return `--member-card-hover-border:${accent};--member-card-hover-title:${title};`;
}

function linkedinAction(person) {
  const hasLinkedIn = Boolean(person.linkedin);
  const tag = hasLinkedIn ? "a" : "span";
  const attrs = hasLinkedIn
    ? `href="${person.linkedin}" target="_blank" rel="noopener noreferrer" aria-label="${person.name} LinkedIn profile"`
    : `aria-disabled="true" tabindex="-1" aria-label="${person.name} has no LinkedIn profile"`;
  const stateClass = hasLinkedIn ? "" : " disabled";
  const cursorStyle = hasLinkedIn ? "" : " style=\"cursor:default;\"";
  return `<${tag} ${attrs} class="linkedin-action${stateClass} flex items-center justify-center border border-surface-variant bg-surface-container-low text-on-surface-variant transition-all duration-300 hover:border-primary hover:text-primary"${cursorStyle}>${LINKEDIN_ICON}</${tag}>`;
}

function footerPanel(person, meta, accentLineClass, metaClass, nameTag, nameClass, nameStyle = "", padding = "0.85rem 0.35rem", panelHeight = 75) {
  const styleAttr = nameStyle ? ` style="${nameStyle}"` : "";
  return `
    <div class="absolute left-0 right-0 bottom-0 z-20">
      <div class="flex items-start gap-3" style="height:${panelHeight}px;padding:${padding};background:rgba(12,19,36,0.94);border-top:1px solid rgba(120,130,160,0.18);backdrop-filter:blur(12px);box-shadow:0 -12px 24px rgba(0,0,0,0.22);box-sizing:border-box;">
        <div class="min-w-0 flex-1">
          <div class="flex items-center gap-2">
            <span class="w-3 sm:w-5 h-[2px] ${accentLineClass} block flex-shrink-0"></span>
            <span class="font-label-caps text-[10px] ${metaClass} uppercase tracking-widest">${meta}</span>
          </div>
          <${nameTag} class="${nameClass}"${styleAttr}>${person.name}</${nameTag}>
        </div>
        ${linkedinAction(person)}
      </div>
    </div>`;
}

function leadCard(person) {
  return cardWrapper(person, `
    <div class="absolute inset-0 overflow-hidden">
      <img src="${PHOTO_BASE}${person.photo}" alt="${person.name}" loading="lazy" decoding="async"
           class="member-photo w-full h-full object-cover object-top"/>
    </div>
    <div class="absolute inset-0 bg-gradient-to-t from-surface from-20% via-surface/35 to-transparent"></div>
    <div class="absolute inset-0 border-2 border-transparent group-hover:border-primary/50 transition-colors pointer-events-none member-card-hover-outline"></div>
    ${footerPanel(person, person.role, "bg-primary-container", "text-primary", "h3", "font-headline-md text-on-surface uppercase group-hover:text-primary transition-colors leading-snug member-card-hover-title", "font-size:20px", "0.6rem 0.35rem")}
  `, `height:${LEAD_CARD_HEIGHT}px;width:100%;max-width:280px;margin-inline:auto;${cardStyles("rgba(255, 180, 172, 0.5)", "#ffb4ac")}`);
}

function subteamLeadCard(person) {
  return cardWrapper(person, `
    <div class="absolute inset-0 overflow-hidden">
      <img src="${PHOTO_BASE}${person.photo}" alt="${person.name}" loading="lazy" decoding="async"
           class="member-photo w-full h-full object-cover object-top"/>
    </div>
    <div class="absolute inset-0 bg-gradient-to-t from-surface from-20% via-surface/35 to-transparent"></div>
    <div class="absolute inset-0 border-2 border-transparent group-hover:border-primary/50 transition-colors pointer-events-none member-card-hover-outline"></div>
    ${footerPanel(person, `${person.role}`, "bg-primary-container", "text-primary", "h3", "font-headline-md text-on-surface uppercase group-hover:text-primary transition-colors leading-tight member-card-hover-title", "font-size:18px", "0.6rem 0.35rem")}
  `, `height:${SUBTEAM_LEAD_CARD_HEIGHT}px;width:100%;max-width:250px;margin-inline:auto;${cardStyles("rgba(255, 180, 172, 0.5)", "#ffb4ac")}`);
}

function memberCard(person) {
  return `
  <div class="group relative bg-surface-container-low border border-surface-variant flex flex-col overflow-hidden hover:border-primary/50 transition-all duration-300" style="height:${MEMBER_CARD_HEIGHT}px;${cardStyles("rgba(255, 180, 172, 0.5)", "#ffb4ac")}">
    <div class="absolute inset-0 overflow-hidden">
      <img src="${PHOTO_BASE}${person.photo}" alt="${person.name}" loading="lazy" decoding="async"
           class="member-photo w-full h-full object-cover object-top"/>
    </div>
    <div class="absolute inset-0 bg-gradient-to-t from-surface from-10% via-surface/35 to-transparent"></div>
    ${footerPanel(person, person.subteam, "bg-primary-container", "text-primary", "h4", "font-headline-md text-on-surface uppercase group-hover:text-primary transition-colors leading-tight member-card-hover-title", "font-size:13px", "0.55rem 0.85rem", 60)}
  </div>`;
}

function facultyCard(person) {
  const facultyMeta = person.department ? `${person.role} · ${person.department}` : person.role;
  return cardWrapper(person, `
    <div class="absolute inset-0 overflow-hidden">
      <img src="${PHOTO_BASE}${person.photo}" alt="${person.name}" loading="lazy" decoding="async"
           class="member-photo w-full h-full object-cover object-center"/>
    </div>
    <div class="absolute inset-0 bg-gradient-to-t from-surface from-20% via-surface/45 to-transparent"></div>
    <div class="absolute inset-0 border-2 border-transparent group-hover:border-secondary/50 transition-colors pointer-events-none member-card-hover-outline"></div>
    ${footerPanel(person, facultyMeta, "bg-secondary", "text-secondary", "h3", "font-headline-md text-on-surface uppercase group-hover:text-secondary transition-colors leading-snug member-card-hover-title", "font-size:18px", "0.6rem 0.35rem")}
  `, `height:${FACULTY_CARD_HEIGHT}px;width:100%;max-width:260px;margin-inline:auto;${cardStyles("rgba(183, 200, 225, 0.5)", "#b7c8e1")}`);
}

fetch("res/members.json")
  .then(r => r.json())
  .then(data => {
    // Faculty
    document.getElementById("faculty").innerHTML =
      data.faculty.map(facultyCard).join("");

    // Team leads
    document.getElementById("team-leads").innerHTML =
      data.teamLeads.map(leadCard).join("");

    // Subteam leads
    document.getElementById("subteam-leads").innerHTML =
      data.subteamLeads.map(subteamLeadCard).join("");

    // Group members by subteam
    const grouped = {};
    data.members.forEach(m => {
      if (!grouped[m.subteam]) grouped[m.subteam] = [];
      grouped[m.subteam].push(m);
    });

    const container = document.getElementById("members-by-subteam");
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (!entry.isIntersecting) return;
        observer.unobserve(entry.target);
        const { subteam, members } = entry.target._data;
        entry.target.innerHTML = `
          <div class="flex items-center gap-4 mb-6">
            <span class="font-label-caps text-label-caps text-primary uppercase tracking-[0.15em]">${subteam}</span>
            <div class="h-px bg-outline-variant flex-grow opacity-40"></div>
            <span class="font-mono text-xs text-on-surface-variant opacity-40">${String(members.length).padStart(2,"0")} members</span>
          </div>
          <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5" style="gap:0.35rem">
            ${members.map(memberCard).join("")}
          </div>`;
      });
    }, { rootMargin: "200px" });

    Object.entries(grouped).forEach(([subteam, members]) => {
      const section = document.createElement("div");
      const cardHeight = MEMBER_CARD_HEIGHT;
      const rows = Math.ceil(members.length / 5);
      section.style.minHeight = (rows * cardHeight + 112) + "px";
      section.innerHTML = `<div class="flex items-center gap-4 mb-6"><span class="font-label-caps text-label-caps text-primary uppercase tracking-[0.15em]">${subteam}</span><div class="h-px bg-outline-variant flex-grow opacity-40"></div></div><div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5" style="gap:0.35rem">${members.map(() => `<div class="img-skeleton" style="height:${MEMBER_CARD_HEIGHT}px"></div>`).join("")}</div>`;
      section._data = { subteam, members };
      observer.observe(section);
      container.appendChild(section);
    });

    const touchMedia = window.matchMedia("(hover: none) and (pointer: coarse)");
    const activeClass = "member-card-touch-active";

    function clearTouchActiveCard() {
      document.querySelectorAll(`.${activeClass}`).forEach(card => card.classList.remove(activeClass));
    }

    document.addEventListener("pointerdown", event => {
      if (!touchMedia.matches || event.pointerType !== "touch") return;
      const card = event.target.closest(".group");
      if (!card || !card.closest("main")) {
        clearTouchActiveCard();
        return;
      }

      if (card.classList.contains(activeClass)) {
        card.classList.remove(activeClass);
        return;
      }

      clearTouchActiveCard();
      card.classList.add(activeClass);
    }, { passive: true });

    window.addEventListener("scroll", clearTouchActiveCard, { passive: true });
    window.addEventListener("resize", clearTouchActiveCard, { passive: true });
  });
</script>
</body>
</html>