Merge pull request #3 from acmorg/feature/volunteer-profiles

Created the volunteer grid section

index.html

@@ -38,7 +38,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <style>#volunteer-form{display:none}#volunteer{display:none}#volunteer-form-google iframe{display:none}</style>
+  <style>#volunteer-form{display:none}</style>
 </head>
 <body class="bg-mist text-ink font-sans antialiased">
   <header class="bg-navy text-white">
@@ -71,14 +71,13 @@
       <div class="mt-16 border-t border-slate-200 pt-12"><h3 class="text-xl font-bold text-navy">Sponsors who make it possible</h3><div class="mt-6 grid gap-4 sm:grid-cols-3"><div class="rounded-xl border border-slate-200 bg-white p-6"><p class="font-mono text-xs uppercase text-cyan-700">Venue sponsor</p><p class="mt-3 text-2xl font-extrabold text-navy">CGCS</p></div><div class="rounded-xl border border-slate-200 bg-white p-6"><p class="font-mono text-xs uppercase text-cyan-700">Food sponsor</p><p class="mt-3 text-2xl font-extrabold text-navy">Community powered</p></div><div class="rounded-xl border border-slate-200 bg-white p-6"><p class="font-mono text-xs uppercase text-cyan-700">Technology partner</p><p class="mt-3 text-2xl font-extrabold text-navy">ACM / IEEE</p></div></div><div class="mt-12"><div class="flex flex-wrap items-end justify-between gap-4"><h3 class="text-xl font-bold text-navy">Past sponsors</h3><span class="font-mono text-xs uppercase tracking-wider text-slate-500">More coming next release</span></div><div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-5"><div class="rounded-xl border border-slate-200 bg-white p-5 font-bold text-navy">Atlassian</div><div class="rounded-xl border border-slate-200 bg-white p-5 font-bold text-navy">MongoDB</div><div class="rounded-xl border border-slate-200 bg-white p-5 font-bold text-navy">Chainguard</div><div class="rounded-xl border border-slate-200 bg-white p-5 font-bold text-navy">CodeRabbit</div><div class="rounded-xl border border-slate-200 bg-white p-5 font-bold text-navy">Technoventions LLC</div></div></div></div>
     </section>
 
-    <section id="volunteer" class="bg-white px-6 py-20 lg:px-8"><div class="mx-auto grid max-w-7xl gap-12 lg:grid-cols-[.8fr_1.2fr]"><div><p class="font-mono text-xs uppercase tracking-[.2em] text-cyan-600">Make it happen</p><h2 class="mt-3 text-4xl font-extrabold tracking-tight text-navy">Our volunteers</h2><p class="mt-5 leading-7 text-slate-600">A great event is built before the doors open. Help welcome people, share the word, or keep everyone fed.</p><div class="mt-8 flex -space-x-3"><span class="grid h-12 w-12 place-items-center rounded-full border-4 border-white bg-electric font-bold text-navy">AM</span><span class="grid h-12 w-12 place-items-center rounded-full border-4 border-white bg-lime font-bold text-navy">TR</span><span class="grid h-12 w-12 place-items-center rounded-full border-4 border-white bg-slate-300 font-bold text-navy">KT</span><span class="grid h-12 w-12 place-items-center rounded-full border-4 border-white bg-ink font-bold text-white">+8</span></div></div><form id="volunteer-form" class="rounded-2xl border border-slate-200 bg-mist p-6 sm:p-8"><h3 class="text-xl font-bold text-navy">Join the volunteer crew</h3><div class="mt-6 grid gap-5 sm:grid-cols-2"><label class="text-sm font-semibold">Name<input required name="name" autocomplete="name" class="mt-2 w-full rounded-lg border border-slate-300 bg-white px-4 py-3 font-normal outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-100" type="text"></label><label class="text-sm font-semibold">Email<input required name="email" autocomplete="email" class="mt-2 w-full rounded-lg border border-slate-300 bg-white px-4 py-3 font-normal outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-100" type="email"></label><label class="text-sm font-semibold">Area of interest<select required name="interest" class="mt-2 w-full rounded-lg border border-slate-300 bg-white px-4 py-3 font-normal outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-100"><option value="">Choose one</option><option>Food</option><option>Check-in</option><option>Marketing</option></select></label><label class="text-sm font-semibold">LinkedIn URL <span class="font-normal text-slate-500">(optional)</span><input name="linkedin" type="url" placeholder="https://linkedin.com/in/..." class="mt-2 w-full rounded-lg border border-slate-300 bg-white px-4 py-3 font-normal outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-100"></label></div><div class="mt-6 flex flex-wrap items-center gap-4"><button class="rounded-full bg-navy px-6 py-3 text-sm font-bold text-white hover:bg-ink" type="submit">Sign me up</button><p id="form-status" class="text-sm text-slate-600" role="status"></p></div></form></div></section>
+    <section id="volunteer" class="bg-white px-6 py-20 lg:px-8"><div class="mx-auto max-w-7xl"><p class="font-mono text-xs uppercase tracking-[.2em] text-cyan-600">Make it happen</p><h2 class="mt-3 text-4xl font-extrabold tracking-tight text-navy">Our volunteers</h2><p class="mt-5 max-w-2xl leading-7 text-slate-600">A great event is built before the doors open. Meet the crew that welcomes people, shares the word, and keeps everyone fed.</p><div id="volunteer-track" class="mt-10 grid grid-cols-2 gap-5 sm:grid-cols-4"></div><div class="mt-16 flex flex-wrap items-end justify-between gap-4 rounded-2xl border border-slate-200 bg-mist p-6 sm:p-8"><div><p class="font-mono text-xs uppercase tracking-[.2em] text-cyan-600">Volunteer signup</p><h3 class="mt-2 text-2xl font-extrabold tracking-tight text-navy">Join the volunteer crew</h3></div><a href="https://docs.google.com/forms/d/1f_ucupsckbus_6K4Qd5OI2gOVTxNdLt0rQpzXUctnxI/viewform" target="_blank" rel="noopener" class="rounded-full bg-navy px-6 py-3 text-sm font-bold text-white hover:bg-ink">Open form ↗</a></div></div></section>
 
     <section id="about" class="mx-auto max-w-7xl px-6 py-20 lg:px-8"><p class="font-mono text-xs uppercase tracking-[.2em] text-cyan-600">What to expect</p><h2 class="mt-3 text-4xl font-extrabold tracking-tight text-navy">Engineering, without the vendor deck.</h2><div class="mt-10 grid gap-5 md:grid-cols-3"><div class="border-t-4 border-electric pt-5"><h3 class="text-xl font-bold text-navy">Tech talks</h3><p class="mt-3 leading-7 text-slate-600">Three or four focused talks, with questions that go past the slides.</p></div><div class="border-t-4 border-lime pt-5"><h3 class="text-xl font-bold text-navy">Workshops</h3><p class="mt-3 leading-7 text-slate-600">Bring a laptop and leave with a working prototype and new friends.</p></div><div class="border-t-4 border-ink pt-5"><h3 class="text-xl font-bold text-navy">Showcase</h3><p class="mt-3 leading-7 text-slate-600">Members demo what they are building. Your first talk belongs here too.</p></div></div></section>
 
     <section id="venue" class="bg-navy px-6 py-20 text-white lg:px-8"><div class="mx-auto grid max-w-7xl gap-10 lg:grid-cols-2 lg:items-center"><div><p class="font-mono text-xs uppercase tracking-[.2em] text-electric">The regular room</p><h2 class="mt-3 text-4xl font-extrabold tracking-tight">The Center for Government and Civic Service</h2><p class="mt-5 leading-7 text-slate-300">1218 West Ave, Building 3000<br>Austin, TX 78701</p><p class="mt-5 font-mono text-sm text-lime">Doors 6:00 PM · Talks 6:30 PM · Wrap 8:30 PM</p><a href="https://maps.app.goo.gl/JPbUrF7urydYrnGPA" target="_blank" rel="noopener" class="mt-8 inline-flex rounded-full border border-slate-500 px-5 py-3 text-sm font-bold hover:border-electric hover:text-electric">Open in Maps ↗</a></div><div class="overflow-hidden rounded-2xl border border-slate-700 bg-white"><iframe title="Map to The Center for Government and Civic Service" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6891.174368662713!2d-97.75106452310398!3d30.277341307496314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644b59c07cefdb5%3A0xc77cc901279ff47c!2sThe%20Center%20for%20Government%20and%20Civic%20Service!5e0!3m2!1sen!2sus!4v1787333681576!5m2!1sen!2sus" width="600" height="450" style="border:0;width:100%;min-height:360px" allowfullscreen="" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe></div></div></section>
     <section class="bg-white px-6 py-20 lg:px-8"><div class="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[.7fr_1.3fr] lg:items-center"><img class="h-32 w-32 rounded-2xl object-cover object-top" src="photos/Akshay_Mittal_profile.png" alt="Akshay Mittal, Ph.D., IEEE Gen AI and ML User Group chair and Austin Meetup organizer"><div><p class="font-mono text-xs uppercase tracking-[.2em] text-cyan-600">Meet the organizer</p><h2 class="mt-3 text-4xl font-extrabold tracking-tight text-navy">Akshay Mittal, Ph.D.</h2><p class="mt-4 max-w-2xl leading-7 text-slate-600">Akshay is Chair of the IEEE Gen AI and ML User Group and the Austin Meetup organizer, bringing engineers together for practical conversations about AI, data, cloud, security, and the systems they actually ship.</p><div class="mt-6 flex flex-wrap gap-3"><a href="https://akshaymittal143.github.io/portfolio/" target="_blank" rel="noopener" class="rounded-full bg-navy px-5 py-3 text-sm font-bold text-white hover:bg-ink">View portfolio ↗</a><a href="https://www.linkedin.com/in/akshaymittal143/" target="_blank" rel="noopener" class="rounded-full border border-slate-300 px-5 py-3 text-sm font-bold text-navy hover:border-cyan-600 hover:text-cyan-700">Connect on LinkedIn ↗</a></div></div></div></section>
     <section id="luma-calendar" class="bg-mist px-6 py-20 lg:px-8"><div class="mx-auto max-w-7xl"><div class="flex flex-wrap items-end justify-between gap-6"><div><p class="font-mono text-xs uppercase tracking-[.2em] text-cyan-600">Live calendar</p><h2 class="mt-3 text-4xl font-extrabold tracking-tight text-navy">Find us on Luma</h2><p class="mt-3 max-w-xl text-slate-600">Browse upcoming ACM Austin events and save your spot directly through our Luma calendar.</p></div><a href="https://luma.com/atx-acm" target="_blank" rel="noopener" class="rounded-full bg-navy px-5 py-3 text-sm font-bold text-white hover:bg-ink">Open full calendar ↗</a></div><div class="mt-10 overflow-hidden rounded-2xl border border-slate-300 bg-white shadow-lg"><iframe src="https://luma.com/embed/calendar/cal-HidBA3hMcIwKB1L/events" title="ACM Austin events on Luma" width="600" height="450" frameborder="0" style="border:0;width:100%;min-height:450px" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></div><p class="mt-3 font-mono text-xs text-slate-500">Luma calendar ID: cal-HidBA3hMcIwKB1L</p></div></section>
-    <section id="volunteer-form-google" class="bg-white px-6 pb-20 lg:px-8"><div class="mx-auto max-w-3xl"><div class="rounded-2xl border border-slate-200 bg-mist p-4 shadow-sm sm:p-6"><div class="mb-5 flex flex-wrap items-end justify-between gap-4"><div><p class="font-mono text-xs uppercase tracking-[.2em] text-cyan-600">Volunteer signup</p><h2 class="mt-2 text-2xl font-extrabold tracking-tight text-navy">Join the volunteer crew</h2></div><a href="https://docs.google.com/forms/d/1f_ucupsckbus_6K4Qd5OI2gOVTxNdLt0rQpzXUctnxI/viewform" target="_blank" rel="noopener" class="text-sm font-bold text-cyan-700 hover:text-navy">Open form ↗</a></div><iframe title="ACM Austin volunteer signup form" src="https://docs.google.com/forms/d/1f_ucupsckbus_6K4Qd5OI2gOVTxNdLt0rQpzXUctnxI/viewform?embedded=true" width="640" height="850" frameborder="0" marginheight="0" marginwidth="0" style="width:100%;min-height:850px;border:0">Loading volunteer form...</iframe></div></div></section>
     <section id="sponsor" class="bg-white px-6 pb-20 lg:px-8"><div class="mx-auto max-w-7xl rounded-2xl border border-slate-200 bg-mist p-8 sm:p-10"><div class="flex flex-wrap items-center justify-between gap-8"><div><p class="font-mono text-xs uppercase tracking-[.2em] text-cyan-600">Support the community</p><h2 class="mt-3 text-3xl font-extrabold tracking-tight text-navy">Help keep the room open.</h2><p class="mt-4 max-w-2xl leading-7 text-slate-600">ACM Austin is run by volunteers. Sponsorship helps us provide food, support the venue, and keep our technical events free and welcoming to everyone.</p></div><a href="https://docs.google.com/forms/d/e/1FAIpQLSc8HPaboM9NUODwUT-upXe4gyXFqnrG_s37TalQi6HpJ4n2_A/viewform?usp=dialog" target="_blank" rel="noopener" class="rounded-full bg-navy px-6 py-3 text-sm font-bold text-white hover:bg-ink">Sponsor ACM Austin ↗</a></div></div></section>
   </main>
 
@@ -159,11 +158,26 @@
       [['days', Math.floor(totalSeconds / 86400)], ['hours', Math.floor(totalSeconds / 3600) % 24], ['minutes', Math.floor(totalSeconds / 60) % 60], ['seconds', totalSeconds % 60]].forEach(([id, value]) => document.querySelector(`#${id}`).textContent = String(value).padStart(2, '0'));
     }
 
-    document.querySelector('#volunteer-form').addEventListener('submit', event => {
-      event.preventDefault();
-      document.querySelector('#form-status').textContent = 'Thanks. We will be in touch before the next session.';
-      event.target.reset();
-    });
+    const VOLUNTEERS = [
+      { firstName: 'Shivangi', lastName: 'Singh', linkedin: 'https://www.linkedin.com/in/shivangi-singh66/', photo: 'photos/shivangi-singh.jpg', initials: 'SS', color: 'bg-electric' },
+      { firstName: 'Prachi', lastName: 'Jethava', linkedin: 'https://linkedin.com/in/prachijethava/', photo: 'photos/prachi-jethava.jpeg', initials: 'PJ', color: 'bg-rose-300', focus: '50% 15%' }
+    ];
+
+    const volunteerTrack = document.querySelector('#volunteer-track');
+    function volunteerCard(volunteer, index) {
+      const name = `${volunteer.firstName} ${volunteer.lastName}`;
+      const fallbackId = `volunteer-fallback-${index}`;
+      const avatar = volunteer.photo
+        ? `<div class="relative aspect-square w-full"><img class="absolute inset-0 h-full w-full rounded-xl object-cover" style="object-position:${volunteer.focus || '50% 50%'}" src="${volunteer.photo}" alt="${name}" onerror="this.style.display='none';document.getElementById('${fallbackId}').style.display='flex'"><div id="${fallbackId}" class="absolute inset-0 hidden h-full w-full items-center justify-center rounded-xl ${volunteer.color} text-xl font-bold text-navy">${volunteer.initials}</div></div>`
+        : `<div class="grid aspect-square w-full place-items-center rounded-xl ${volunteer.color} text-xl font-bold text-navy">${volunteer.initials}</div>`;
+      return `<div class="rounded-2xl border border-slate-200 bg-white p-4">${avatar}<p class="mt-3 font-bold text-navy">${name}</p><a class="mt-2 inline-flex items-center gap-1 text-sm font-bold text-cyan-700 hover:text-navy" href="${volunteer.linkedin}" target="_blank" rel="noopener">LinkedIn ↗</a></div>`;
+    }
+    function renderVolunteers(volunteers) {
+      if (!volunteers.length) return;
+      volunteerTrack.innerHTML = volunteers.map((volunteer, index) => volunteerCard(volunteer, index)).join('');
+    }
+    renderVolunteers(VOLUNTEERS);
+
     fetchMeetupEvents().then(renderEvents);
     fetchSessionizeData().then(data => renderPastSpeakers(data.speakers || data.speakerList || [])).catch(error => console.warn('Sessionize speaker directory unavailable:', error));
     updateCountdown();