204 lines
29 KiB
HTML
204 lines
29 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.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://local.acm.org/acm-austin/">
|
||
<meta property="og:title" content="ACM Austin | Engineering the Future">
|
||
<meta property="og:description" content="Monthly talks, workshops, and community for engineers who ship in Austin.">
|
||
<meta property="og:image" content="https://local.acm.org/acm-austin/photos/logos/acm.png">
|
||
<meta property="og:image:alt" content="ACM Austin logo">
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:title" content="ACM Austin | Engineering the Future">
|
||
<meta name="twitter:description" content="Monthly talks, workshops, and community for engineers who ship in Austin.">
|
||
<meta name="twitter:image" content="https://local.acm.org/acm-austin/photos/logos/acm.png">
|
||
<title>ACM Austin | Engineering the Future</title>
|
||
<!-- Google tag (gtag.js) -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-V67H9T0WJ0"></script>
|
||
<script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag(){dataLayer.push(arguments);}
|
||
gtag('js', new Date());
|
||
gtag('config', 'G-V67H9T0WJ0');
|
||
</script>
|
||
<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}</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 meetup</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>
|
||
|
||
<figure class="relative h-56 overflow-hidden bg-ink sm:h-72"><img class="h-full w-full object-cover" src="photos/images/Austin-skyline-medium.jpg" srcset="photos/images/Austin-skyline-small.jpg 512w, photos/images/Austin-skyline-medium.jpg 1024w, photos/images/Austin-skyline-large.jpg 2048w, photos/images/Austin-skyline-extra-large.jpg 4096w" sizes="(width <= 512px) 512px, (512px < width <= 1024px) 1024px, (1024px < width <= 2048px) 2048px, (2048px < width) 4096px" alt="Austin skyline along Lady Bird Lake"><div class="absolute inset-0 bg-gradient-to-r from-navy/60 via-transparent to-ink/30"></div><figcaption class="sr-only">Austin skyline along Lady Bird Lake</figcaption></figure>
|
||
|
||
|
||
<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 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.jpeg" 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="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/images/placholder_profile.svg')}" 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`;
|
||
}
|
||
}
|
||
|
||
let activeEvents = EVENTS;
|
||
function getNextEvent(events) {
|
||
return [...events].filter(event => new Date(event.date).getTime() > Date.now()).sort((first, second) => new Date(first.date) - new Date(second.date))[0] || events[events.length - 1];
|
||
}
|
||
|
||
function updateNextEvent(event) {
|
||
if (!event) return;
|
||
document.querySelector('#next-event-name').textContent = event.title;
|
||
document.querySelector('#next-event-date').textContent = new Intl.DateTimeFormat('en-US', { weekday: 'long', month: 'long', day: 'numeric', hour: 'numeric', minute: '2-digit', timeZone: 'America/Chicago', timeZoneName: 'short' }).format(new Date(event.date));
|
||
}
|
||
|
||
function updateCountdown() {
|
||
const nextEvent = getNextEvent(activeEvents);
|
||
updateNextEvent(nextEvent);
|
||
const remaining = Math.max(0, new Date(nextEvent.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'));
|
||
}
|
||
|
||
const VOLUNTEERS = [
|
||
{ firstName: 'Shivangi', lastName: 'Singh', linkedin: 'https://www.linkedin.com/in/shivangi-singh66/', photo: 'photos/shivangi-singh.jpeg', 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(events => {
|
||
activeEvents = events;
|
||
renderEvents(events);
|
||
updateCountdown();
|
||
});
|
||
fetchSessionizeData().then(data => renderPastSpeakers(data.speakers || data.speakerList || [])).catch(error => console.warn('Sessionize speaker directory unavailable:', error));
|
||
updateCountdown();
|
||
setInterval(updateCountdown, 1000);
|
||
</script>
|
||
</body>
|
||
</html>
|