Files
acm-austin-website/index.html
T

153 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="ACM Austin: monthly talks, workshops, and community for engineers who ship.">
<title>ACM Austin | Engineering the Future</title>
<link rel="icon" type="image/png" href="photos/logos/acm.png">
<link rel="apple-touch-icon" href="photos/logos/acm.png">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: { extend: {
colors: { navy: '#071525', ink: '#10253d', electric: '#2dd4ff', lime: '#c8f169', mist: '#edf4f7' },
fontFamily: { sans: ['Plus Jakarta Sans', 'ui-sans-serif', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'] },
boxShadow: { glow: '0 0 45px rgba(45,212,255,.18)' }
}}
};
</script>
<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>
</head>
<body class="bg-mist text-ink font-sans antialiased">
<header class="bg-navy text-white">
<nav class="mx-auto flex max-w-7xl items-center justify-between px-6 py-5 lg:px-8" aria-label="Main navigation">
<a href="#top" class="flex items-center gap-3 font-bold tracking-tight"><img class="h-10 w-10 rounded-lg bg-white object-contain p-1" src="photos/logos/acm.png" alt="ACM Austin logo"><span>ACM <span class="text-electric">Austin</span></span></a>
<div class="hidden items-center gap-8 text-sm text-slate-300 md:flex"><a href="#events" class="hover:text-white">Events</a><a href="sessionize.html" class="hover:text-white">Speakers</a><a href="#community" class="hover:text-white">Community</a><a href="https://docs.google.com/forms/d/1f_ucupsckbus_6K4Qd5OI2gOVTxNdLt0rQpzXUctnxI/viewform" target="_blank" rel="noopener" class="hover:text-white">Volunteer ↗</a><a href="https://docs.google.com/forms/d/e/1FAIpQLSc8HPaboM9NUODwUT-upXe4gyXFqnrG_s37TalQi6HpJ4n2_A/viewform?usp=dialog" target="_blank" rel="noopener" class="hover:text-white">Sponsor ↗</a><a href="#venue" class="hover:text-white">Venue</a></div>
<a href="https://www.meetup.com/acm-austin/" target="_blank" rel="noopener" class="rounded-full bg-lime px-5 py-2.5 text-sm font-bold text-navy transition hover:bg-white">Join the chapter</a>
</nav>
</header>
<main id="top">
<section class="relative overflow-hidden bg-navy pb-20 pt-16 text-white lg:pb-28 lg:pt-24">
<div class="absolute inset-0 opacity-30" aria-hidden="true" style="background-image:linear-gradient(rgba(45,212,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(45,212,255,.12) 1px,transparent 1px);background-size:48px 48px"></div>
<div class="relative mx-auto grid max-w-7xl gap-12 px-6 lg:grid-cols-[1.2fr_.8fr] lg:items-end lg:px-8">
<div><p class="mb-6 font-mono text-xs uppercase tracking-[.25em] text-electric">Austin, Texas / ACM + IEEE</p><h1 class="max-w-4xl text-5xl font-extrabold leading-[1.03] tracking-tight sm:text-7xl">Build what’s <span class="text-electric">next.</span><br>Share what works.</h1><p class="mt-7 max-w-2xl text-lg leading-8 text-slate-300">A monthly gathering for engineers working across AI, data, cloud, and security. No vendor theatre. Just useful ideas, honest trade-offs, and people who ship.</p><div class="mt-9 flex flex-wrap gap-3"><a href="#events" class="rounded-full bg-electric px-6 py-3 text-sm font-bold text-navy transition hover:bg-white">See upcoming events</a><a href="https://sessionize.com/austin-acm-meetup/" target="_blank" rel="noopener" class="rounded-full border border-slate-500 px-6 py-3 text-sm font-bold transition hover:border-electric hover:text-electric">Submit a talk ↗</a></div></div>
<div class="rounded-2xl border border-slate-700 bg-white/[.06] p-6 shadow-glow backdrop-blur"><p class="font-mono text-xs uppercase tracking-[.2em] text-lime">Next session</p><p id="next-event-name" class="mt-4 text-2xl font-bold">August Tech Talks &amp; Community Showcase</p><p id="next-event-date" class="mt-2 text-sm text-slate-300">Wednesday, August 26 · 6:00 PM</p><div class="mt-7 grid grid-cols-4 gap-2 text-center"><div class="rounded-lg bg-navy/70 p-3"><strong id="days" class="block text-2xl text-electric">00</strong><span class="font-mono text-[10px] uppercase text-slate-400">Days</span></div><div class="rounded-lg bg-navy/70 p-3"><strong id="hours" class="block text-2xl text-electric">00</strong><span class="font-mono text-[10px] uppercase text-slate-400">Hours</span></div><div class="rounded-lg bg-navy/70 p-3"><strong id="minutes" class="block text-2xl text-electric">00</strong><span class="font-mono text-[10px] uppercase text-slate-400">Min</span></div><div class="rounded-lg bg-navy/70 p-3"><strong id="seconds" class="block text-2xl text-electric">00</strong><span class="font-mono text-[10px] uppercase text-slate-400">Sec</span></div></div></div>
</div>
</section>
<section class="border-b border-slate-200 bg-white"><div class="mx-auto grid max-w-7xl gap-6 px-6 py-8 sm:grid-cols-3 lg:px-8"><div><strong class="block text-3xl font-extrabold text-navy">1,689+</strong><span class="text-sm text-slate-500">Austin members</span></div><div><strong class="block text-3xl font-extrabold text-navy">12</strong><span class="text-sm text-slate-500">events each year</span></div><div><strong class="block text-3xl font-extrabold text-navy">4.8/5</strong><span class="text-sm text-slate-500">community rating</span></div></div></section>
<section id="events" class="mx-auto max-w-7xl px-6 py-20 lg:px-8"><div class="flex flex-wrap items-end justify-between gap-6"><div><p class="font-mono text-xs uppercase tracking-[.2em] text-cyan-600">The calendar</p><h2 class="mt-3 text-4xl font-extrabold tracking-tight text-navy">Upcoming events</h2><p class="mt-3 max-w-xl text-slate-600">Technical talks, practical workshops, and a community showcase. Free to attend, food included.</p></div><a href="https://www.meetup.com/acm-austin/events/" target="_blank" rel="noopener" class="rounded-full border border-ink px-5 py-2.5 text-sm font-bold hover:border-cyan-600 hover:text-cyan-700">All events ↗</a></div><div id="event-grid" class="mt-10 grid gap-5 md:grid-cols-2 lg:grid-cols-3" aria-live="polite"></div></section>
<section class="bg-navy px-6 py-16 text-white lg:px-8"><div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-8"><div><p class="font-mono text-xs uppercase tracking-[.2em] text-lime">Call for speakers</p><h2 class="mt-3 max-w-2xl text-3xl font-extrabold tracking-tight sm:text-4xl">Have a system worth dissecting?</h2><p class="mt-3 max-w-xl text-slate-300">Share the architecture, the decisions, and the lessons learned with Austin’s engineering community.</p></div><a href="https://sessionize.com/austin-acm-meetup/" target="_blank" rel="noopener" class="rounded-full bg-lime px-6 py-3 text-sm font-bold text-navy hover:bg-white">Propose a session ↗</a></div></section>
<section id="community" class="mx-auto max-w-7xl px-6 py-20 lg:px-8"><div class="grid gap-16 lg:grid-cols-[.8fr_1.2fr]"><div><p class="font-mono text-xs uppercase tracking-[.2em] text-cyan-600">People behind the work</p><h2 class="mt-3 text-4xl font-extrabold tracking-tight text-navy">The community is the product.</h2><p class="mt-5 leading-7 text-slate-600">ACM Austin is run by practitioners who believe the best technical conversations happen in the room, with the context and candour that slides leave out.</p></div><div><div class="flex flex-wrap items-end justify-between gap-4"><h3 class="text-xl font-bold text-navy">Past speakers</h3><a class="font-mono text-xs font-semibold uppercase tracking-wider text-cyan-700 hover:text-navy" href="https://sessionize.com/austin-acm-meetup/" target="_blank" rel="noopener">All accepted speakers ↗</a></div><div id="past-speakers-grid" class="mt-5 grid grid-cols-2 gap-4 sm:grid-cols-4"><div><img class="aspect-square w-full rounded-xl object-cover" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80" alt="Akshay Mittal"><p class="mt-3 font-bold">Akshay Mittal</p><p class="text-xs text-slate-500">AI &amp; civic tech</p></div><div><img class="aspect-square w-full rounded-xl object-cover" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=400&q=80" alt="Kavitha Thiyagarajan"><p class="mt-3 font-bold">Kavitha Thiyagarajan</p><p class="text-xs text-slate-500">Data platforms</p></div><div><img class="aspect-square w-full rounded-xl object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80" alt="Tarun Reddy Nukala"><p class="mt-3 font-bold">Tarun Reddy Nukala</p><p class="text-xs text-slate-500">Cloud engineering</p></div><div><img class="aspect-square w-full rounded-xl object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=400&q=80" alt="Community speaker"><p class="mt-3 font-bold">You, perhaps?</p><p class="text-xs text-slate-500">Your next talk</p></div></div><button id="show-more-speakers" class="mt-6 rounded-full border border-ink px-5 py-3 text-sm font-bold text-navy hover:border-cyan-600 hover:text-cyan-700" type="button" hidden>See more speakers</button></div></div>
<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="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, ACM Austin chair and 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</h2><p class="mt-4 max-w-2xl leading-7 text-slate-600">Akshay is the chair and organizer behind ACM Austin's monthly meetup, 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>
<footer class="bg-navy px-6 pb-10 text-slate-400 lg:px-8"><div class="mx-auto flex max-w-7xl flex-wrap justify-between gap-5 border-t border-slate-700 pt-8 text-sm"><div class="flex items-start gap-3"><img class="h-8 w-8 rounded-md bg-white object-contain p-1" src="photos/logos/acm.png" alt="ACM Austin logo"><div><span>© 2026 ACM Austin · A joint ACM / IEEE chapter</span><span class="mt-2 block text-xs text-slate-500">Starter project by <a class="hover:text-white" href="https://www.linkedin.com/in/prachi1211/" target="_blank" rel="noopener">Prachi Jethava</a> · Contributors: <a class="hover:text-white" href="https://www.linkedin.com/in/akshaymittal143/" target="_blank" rel="noopener">Akshay Mittal</a>, <a class="hover:text-white" href="https://www.linkedin.com/in/prachi1211/" target="_blank" rel="noopener">Prachi Jethava</a></span></div></div><div class="flex gap-5"><a class="hover:text-white" href="sessionize.html">Speakers</a><a class="hover:text-white" href="https://github.com/acmorg/acm-austin" target="_blank" rel="noopener">GitHub</a><a class="hover:text-white" href="https://www.meetup.com/acm-austin/">Meetup</a><a class="hover:text-white" href="https://www.linkedin.com/company/acm-austin/">LinkedIn</a><a class="hover:text-white" href="https://sessionize.com/austin-acm-meetup/">Speak</a></div></div></footer>
<script>
/* Replace these local adapters with server-side calls when API credentials are available. */
const EVENTS = [
{ date: '2026-08-26T18:00:00-05:00', type: 'Tech talks', title: 'August Tech Talks & Community Showcase', description: 'AI platforms, cloud-native systems, security, and what edge computing really costs to operate.', tags: ['Security', 'Edge'], going: 73 },
{ date: '2026-09-17T18:00:00-05:00', type: 'Workshop', title: 'The A to Z of Building AI Agents with MongoDB', description: 'Build an AI-powered documentation assistant from scratch. Bring a laptop; dinner included.', tags: ['AI Agents', 'MongoDB'], going: 14 },
{ date: '2026-10-28T18:00:00-05:00', type: 'Tech talks', title: 'October Tech Talks & Community Showcase', description: 'Agent infrastructure, data pipelines, self-optimizing infrastructure, and AI in production.', tags: ['Data', 'Infrastructure'], going: 14 }
];
// Meetup API placeholder. Keep the token on a server, never in this file.
async function fetchMeetupEvents() {
// return fetch('/api/meetup-events').then(response => response.json());
return EVENTS;
}
// Luma API placeholder for a future event source migration.
async function fetchLumaEvents() {
// return fetch('/api/luma-events').then(response => response.json());
return [];
}
const SESSIONIZE_ENDPOINT = 'https://sessionize.com/api/v2/f8cooe5l/view/All';
// Sessionize supplies the published speaker directory for the community section.
async function fetchSessionizeData() {
const response = await fetch(SESSIONIZE_ENDPOINT);
if (!response.ok) throw new Error(`Sessionize returned ${response.status}`);
return response.json();
}
const eventGrid = document.querySelector('#event-grid');
const formatDate = date => new Intl.DateTimeFormat('en-US', { weekday: 'short', month: 'short', day: 'numeric' }).format(new Date(date));
function renderEvents(events) {
eventGrid.innerHTML = events.map((event, index) => `<article class="group rounded-2xl border ${index === 0 ? 'border-electric shadow-glow' : 'border-slate-200'} bg-white p-6 transition hover:-translate-y-1 hover:shadow-lg"><div class="flex items-center justify-between gap-3"><span class="font-mono text-xs uppercase tracking-wider ${event.type === 'Workshop' ? 'text-emerald-700' : 'text-cyan-700'}">${event.type}</span><span class="text-xs text-slate-500">${event.going} going</span></div><h3 class="mt-5 text-xl font-bold leading-snug text-navy">${event.title}</h3><p class="mt-3 text-sm leading-6 text-slate-600">${event.description}</p><div class="mt-5 flex flex-wrap gap-2">${event.tags.map(tag => `<span class="rounded-full bg-mist px-3 py-1 font-mono text-[11px] text-slate-600">${tag}</span>`).join('')}</div><div class="mt-7 flex items-center justify-between border-t border-slate-100 pt-5"><span class="font-mono text-xs text-slate-500">${formatDate(event.date)} · 6:00 PM</span><a class="font-bold text-cyan-700 hover:text-navy" href="https://www.meetup.com/acm-austin/events/" target="_blank" rel="noopener">RSVP ↗</a></div></article>`).join('');
}
const pastSpeakersGrid = document.querySelector('#past-speakers-grid');
let showMoreSpeakers = document.querySelector('#show-more-speakers');
const escapeSpeakerText = value => String(value || '').replace(/[&<>"']/g, character => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }[character]));
const speakerName = speaker => [speaker.firstName, speaker.lastName].filter(Boolean).join(' ') || speaker.name || 'ACM Austin speaker';
function shuffleSpeakers(speakers) {
const shuffled = [...speakers];
for (let index = shuffled.length - 1; index > 0; index -= 1) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[shuffled[index], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[index]];
}
return shuffled;
}
function renderPastSpeakers(speakers) {
if (!speakers.length) return;
const randomizedSpeakers = shuffleSpeakers(speakers);
pastSpeakersGrid.innerHTML = randomizedSpeakers.map((speaker, index) => `<div class="${index >= 8 ? 'hidden accepted-speaker' : ''}"><img class="aspect-square w-full rounded-xl bg-mist object-cover" src="${escapeSpeakerText(speaker.profilePicture || 'photos/Akshay_Mittal_profile.png')}" alt="${escapeSpeakerText(speakerName(speaker))}"><p class="mt-3 font-bold">${escapeSpeakerText(speakerName(speaker))}</p><p class="text-xs leading-5 text-slate-500">${escapeSpeakerText(speaker.tagLine || speaker.bio || 'ACM Austin speaker')}</p></div>`).join('');
if (speakers.length > 8) {
if (!showMoreSpeakers) {
showMoreSpeakers = document.createElement('button');
showMoreSpeakers.id = 'show-more-speakers';
showMoreSpeakers.type = 'button';
showMoreSpeakers.className = 'mt-6 rounded-full border border-ink px-5 py-3 text-sm font-bold text-navy hover:border-cyan-600 hover:text-cyan-700';
showMoreSpeakers.addEventListener('click', () => {
document.querySelectorAll('.accepted-speaker').forEach(card => card.classList.remove('hidden'));
showMoreSpeakers.hidden = true;
});
pastSpeakersGrid.after(showMoreSpeakers);
}
showMoreSpeakers.hidden = false;
showMoreSpeakers.textContent = `See all ${speakers.length} speakers`;
}
}
// Countdown uses the same event object that renders the first card.
function updateCountdown() {
const remaining = Math.max(0, new Date(EVENTS[0].date).getTime() - Date.now());
const totalSeconds = Math.floor(remaining / 1000);
[['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();
});
fetchMeetupEvents().then(renderEvents);
fetchSessionizeData().then(data => renderPastSpeakers(data.speakers || data.speakerList || [])).catch(error => console.warn('Sessionize speaker directory unavailable:', error));
updateCountdown();
setInterval(updateCountdown, 1000);
</script>
</body>
</html>