153 lines
28 KiB
HTML
153 lines
28 KiB
HTML
<!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 & 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 & 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 => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[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>
|