feat: hall of fame page

src/components/Navbar.astro

@@ -59,6 +59,7 @@ const navlinkClass = `navlink ${theme}`;
 
     <div class="flex flex-col items-start gap-2 px-16">
       <a class="navlink" href="/blog">Blog</a>
+      <a class="navlink" href="/hall-of-fame">Hall of fame</a>
       <a class="navlink" href="/coc">Code of Conduct</a>
       <a class="navlink" href="/privacy">Privacy Statement</a>
       <a class="navlink" href="/terms-and-conditions">Terms and Conditions</a>

src/data/hall-of-fame.ts

@@ -0,0 +1,264 @@
+type Talk = {
+  title: string;
+  speaker: string;
+  cover: string;
+  link: string;
+};
+
+export const talks: Talk[] = [
+  {
+    title: "The journey of a package from the npm registry to your computer",
+    speaker: "Jeffrey Lembeck ",
+    link: "https://youtu.be/GSnyVS79OR0?si=XjPeChNOgZJhOkG_",
+    cover: "hall-of-fame/jeff-lembeck.jpg",
+  },
+  {
+    title: "The Future of Web Animation",
+    speaker: "Sarah Drasner",
+    link: "https://youtu.be/hjgni3dXcVE?si=KwshMDFuz6D-4q-F",
+    cover: "hall-of-fame/sarah-drasner.jpg",
+  },
+  {
+    title: "Container Queries: The next step towards a truly modular CSS",
+    speaker: "Maarten Van Hoof",
+    link: "https://youtu.be/1mSsrSn0arw?si=pCE5Fvnuh4w5qEee",
+    cover: "hall-of-fame/maarten-van-hoof.jpg",
+  },
+  {
+    title: "A Unified Styling Language",
+    speaker: "Mark Dalgleish",
+    link: "https://youtu.be/z-4cujO519Q?si=xxnIKEPs-f8hZfcZ",
+    cover: "hall-of-fame/mark-dalgleish.jpg",
+  },
+  {
+    title: "Web typography: a non-English perspective",
+    speaker: "Hui Jing Chen",
+    link: "https://youtu.be/yLQHDGRLOwQ?si=TIuVondcvJTaD8-z",
+    cover: "hall-of-fame/hui-jing-chen.jpg",
+  },
+
+  {
+    title: "What the v...DOM?",
+    speaker: "Stefan Judis",
+    link: "https://youtu.be/0cbCxfJMfx0?si=fHbwWQyCW5KXpJiS",
+    cover: "hall-of-fame/stefan-judis.jpg",
+  },
+  {
+    title: "Serverless can do that?!",
+    speaker: "Simona Cotin",
+    link: "https://youtu.be/fNKT6GMUxBY?si=yudBjUyesT_1tEc2",
+    cover: "hall-of-fame/simona-cotin.jpg",
+  },
+  {
+    title: "CodeSandbox",
+    speaker: "Ives van Hoorne",
+    link: "https://youtu.be/DQtj811KIT4?si=n14dZgT9OYwck7Gb",
+    cover: "hall-of-fame/ives-van-hoorne.jpg",
+  },
+  {
+    title: "Fontastic web performance",
+    speaker: "Monica Dinculescu",
+    link: "https://youtu.be/WsFirqL4lBI?si=JcE8603sRjD9-6Xk",
+    cover: "hall-of-fame/monica-dinculescu.jpg",
+  },
+  {
+    title: "V8 internals for JS developers",
+    speaker: "Mathias Bynens",
+    link: "https://youtu.be/5UZzT_hgsl0?si=C8ooy2EfIXgnUieP",
+    cover: "hall-of-fame/mathias-bynens.jpg",
+  },
+  {
+    title: "Recursion, Iteration, and JavaScript: A Love Story",
+    speaker: "Anjana Vakil",
+    link: "https://youtu.be/FmiQr4nfoPQ?si=QRnmfGpwLUfzk48D",
+    cover: "hall-of-fame/anjana-vakil.jpg",
+  },
+  {
+    title: "Char Wars: The Path Traversal Strikes Back ",
+    speaker: "Liran Tal",
+    link: "https://youtu.be/P1goT5BSFWM?si=UQ6ZLZ96phYUcYeV",
+    cover: "hall-of-fame/liran-tal.jpg",
+  },
+  {
+    title:
+      "Blowing Bubbles on Mental Health - Hacking a Kid's Toy in JavaScript",
+    speaker: "Daisy Smith",
+    link: "https://youtu.be/1vkziw8UpQQ?si=w-SDECdhEclH2uKS",
+    cover: "hall-of-fame/daisy-smith.jpg",
+  },
+  {
+    title: "Building AI-powered user interfaces",
+    speaker: "Jani Eväkallio",
+    link: "https://youtu.be/GQjubOMOWzo?si=4K3MQ_rFgRGTL2Ka",
+    cover: "hall-of-fame/jani-evakallio.jpg",
+  },
+  {
+    title: "It’s My (Third) Party, and I’ll Cry if I Want To",
+    speaker: "Harry Roberts",
+    link: "https://youtu.be/cOXl_q8JgjI?si=Q6uD5CBxDB5-Mx81",
+    cover: "hall-of-fame/harry-roberts.jpg",
+  },
+  {
+    title: "A red LEGO brick is always red: components on the web",
+    speaker: "Jack Franklin",
+    link: "https://youtu.be/SF64OwN58Fw?si=bJkah-kaFKm-B3L-",
+    cover: "hall-of-fame/jack-franklin.jpg",
+  },
+  {
+    title: "WebAssembly's Post-MVP Future",
+    speaker: "Lin Clark",
+    link: "https://youtu.be/ZZ3uj-2H6-w?si=eaSbZWhcwjWV9jTa",
+    cover: "hall-of-fame/lin-clark.jpg",
+  },
+  {
+    title: "You Belong Here: How to Make Open Source More Open",
+    speaker: "Jason Lengstorf",
+    link: "https://youtu.be/8ARA7AD4yPs?si=gEDwSvQwlJ181-LK",
+    cover: "hall-of-fame/jason-lengstorf.jpg",
+  },
+  {
+    title: "The exciting future of React",
+    speaker: "Kristijan Ristovski",
+    link: "https://youtu.be/QjGuhXwpbUc?si=n_5ORZr_VgMTKxOz",
+    cover: "hall-of-fame/kristijan-ristovski.jpg",
+  },
+  {
+    title: "Large scale refactoring: from start to finish",
+    speaker: "Natalia Tepluhina",
+    link: "https://youtu.be/tkPHtSUJwMI?si=eE7Sf3IKf8aaNo_N",
+    cover: "hall-of-fame/natalia-tepluhina.jpg",
+  },
+
+  {
+    title: "The Dream of Styleguide Driven Development",
+    speaker: "Sara Vieira",
+    link: "https://youtu.be/_XJFeSZV6FI?si=wW6lTL-bMICWVcJC",
+    cover: "hall-of-fame/sara-vieira.jpg",
+  },
+  {
+    title: "Serving for the win: Deployments and hosting for the rest of us",
+    speaker: "Phil Hawksworth",
+    link: "https://youtu.be/ttL4K-WLJ-c?si=RBPfDJ9ApHvmgTuq",
+    cover: "hall-of-fame/phil-hawksworth.jpg",
+  },
+  {
+    title: "Built-in Tests with Node.js",
+    speaker: "Tierney Cyren",
+    link: "https://youtu.be/exoubCoKA_w?si=rcFxP-kfxMP3F6Mp",
+    cover: "hall-of-fame/tierney-cyren.jpg",
+  },
+  {
+    title: "Towards a simpler JavaScript ecosystem",
+    speaker: "Gil Tayar",
+    link: "https://youtu.be/WE0dWHHAAfg?si=7TDJ8vvGAKvy5ofy",
+    cover: "hall-of-fame/gil-tayar.jpg",
+  },
+  {
+    title: "The two ways to manage state",
+    speaker: "David Khourshid",
+    link: "https://youtu.be/yVhmYiRNPvw?si=nCYQmcZAY-vLViKi",
+    cover: "hall-of-fame/david-khourshid.jpg",
+  },
+  {
+    title: "Moving on from runtime CSS-in-JS at scale",
+    speaker: "Sid Kshetrapal",
+    link: "https://youtu.be/OrIuKl_x0vE?si=F9llL-t5XwMrLoEu",
+    cover: "hall-of-fame/sid-kshetrapal.jpg",
+  },
+  {
+    title: "The evolution of scalable CSS",
+    speaker: "Andrei Pfeiffer",
+    link: "https://youtu.be/eekrjAdviO4?si=gJtM-hhleL8jjucW",
+    cover: "hall-of-fame/andrei-pfeiffer.jpg",
+  },
+  {
+    title: "Fighting the Front-end Fatigue",
+    speaker: "Benedek Gagyi",
+    link: "https://youtu.be/UTQkkZ1SO1Y?si=_ZAm70gqeTVJFxoG",
+    cover: "hall-of-fame/benedek-gagyi.jpg",
+  },
+  {
+    title: "Taming UI complexity with Typed State Machines",
+    speaker: "Bogdan Zaharia",
+    link: "https://youtu.be/gcuZJ2LHTFI?si=YkVsENG8OPAoRGcU",
+    cover: "hall-of-fame/bogdan-zaharia.jpg",
+  },
+  {
+    title: "Humanizing Your Documentation",
+    speaker: "Carolyn Stransky",
+    link: "https://youtu.be/yE7eOoXTZtM?si=sjmmaACkC3HJn4Bq",
+    cover: "hall-of-fame/carolyn-stransky.jpg",
+  },
+  {
+    title: "Reaching for the sky with JavaScript",
+    speaker: "Charlie Gerard",
+    link: "https://youtu.be/YyrdJvIAe20?si=94QlpMxV3oSDwhoF",
+    cover: "hall-of-fame/charlie-gerard.jpg",
+  },
+  {
+    title: "Playing your tests wright ",
+    speaker: "Debbie O'Brien",
+    link: "https://youtu.be/yMSIsavrOR4?si=LtfNTuW7Dt9E5Sl_",
+    cover: "hall-of-fame/debbie-obrien.jpg",
+  },
+  {
+    title: "ADHD in the Digital World",
+    speaker: "Emmy Cao",
+    link: "https://youtu.be/kB1EUVsciE8?si=gg4RUudotbFtqtpX",
+    cover: "hall-of-fame/emmy-cao.jpg",
+  },
+  {
+    title: "Static and Dynamic Next.js",
+    speaker: "Guillermo Rauch",
+    link: "https://youtu.be/lLNJsuXB4CI?si=n06D-Z959ygd-Iaf",
+    cover: "hall-of-fame/guillermo-rauch.jpg",
+  },
+  {
+    title: "Visualised guide to memory management in JavaScript",
+    speaker: "Kateryna Porshnieva",
+    link: "https://youtu.be/OG_AZnPokGw?si=unFLE-YV3O1Ic18y",
+    cover: "hall-of-fame/kateryna-porshnieva.jpg",
+  },
+  {
+    title: "Building Offline and Real-Time Applications - The Magic of CRDTs",
+    speaker: "Matan Kushner",
+    link: "https://youtu.be/BVUBFlMFIYM?si=hrHr-yc1DoNh0z1M",
+    cover: "hall-of-fame/matan-kushner.jpg",
+  },
+  {
+    title: "JavaScript Modules: Past, Present, and Future ",
+    speaker: "Nicolò Ribaudo",
+    link: "https://youtu.be/gvuOUVA7NYk?si=cEJt8LZPriyAX2IW",
+    cover: "hall-of-fame/nicolo-ribaudo.jpg",
+  },
+  {
+    title: "Advanced Redux: Design Patterns and Practices",
+    speaker: "Nir Kaufman",
+    link: "https://youtu.be/5gl3cCB_26M?si=JRtjBtrnJx6DVJ5j",
+    cover: "hall-of-fame/nir-kaufman.jpg",
+  },
+  {
+    title: "As Simple as an AST",
+    speaker: "Pavithra Kodmad",
+    link: "https://youtu.be/LRKlqR6KY_E?si=0bDiPqm8pVeesbi3",
+    cover: "hall-of-fame/pavithra-kodmad.jpg",
+  },
+  {
+    title: "You are an AI engineer",
+    speaker: "Tejas Kumar",
+    link: "https://youtu.be/AlsNzAoCLSA?si=0zDCIkNsR-3QXINs",
+    cover: "hall-of-fame/tejas-kumar.jpg",
+  },
+  {
+    title: "How to get started and build something with GraphQL",
+    speaker: "Xavier Cazalot",
+    link: "https://youtu.be/McPeX5gsSX8?si=F8rwI3lkvy0IoAWJ",
+    cover: "hall-of-fame/xavier-cazalot.jpg",
+  },
+  {
+    title: "The Good, The Bad, and The Web Components",
+    speaker: "Zach Leatherman",
+    link: "https://youtu.be/R4Ri4ft7bXY?si=zMAnRSKiiJytROnH",
+    cover: "hall-of-fame/zach-leatherman.jpg",
+  },
+];

src/pages/hall-of-fame.astro

@@ -0,0 +1,55 @@
+---
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Section from "@/components/Section.astro";
+import { talks } from "@/data/hall-of-fame";
+import { Image } from "astro:assets";
+import { getImage } from "../utils/getImage";
+
+const orderedTalks = talks.sort((t1, t2) => (t1.speaker > t2.speaker ? 1 : -1));
+---
+
+<BaseLayout title="JSHeroes - Hall of Fame">
+  <img
+    class="block h-[500px] w-full object-cover"
+    src={"/img/banners/default-with-bear.svg"}
+    aria-hidden
+  />
+
+  <main id="main">
+    <Section variant="light" content="list">
+      <div class="flex flex-col">
+        <h1>JSHeroes Hall of Fame</h1>
+
+        <p>
+          Here are some of the amazing humans, that took the stage at JSHeroes
+          across the years, and their awesome talks.
+        </p>
+
+        <div class="grid grid-cols-1 gap-1 pt-8 md:grid-cols-2 lg:grid-cols-3">
+          {
+            orderedTalks.map((talk) => (
+              <a
+                href={talk.link}
+                target="_blank"
+                rel="noreferrer noopener"
+                class="relative overflow-hidden focus-visible:outline-dashed focus-visible:outline-[4px] focus-visible:outline-offset-0"
+              >
+                <Image
+                  src={getImage(talk.cover)}
+                  alt={talk.speaker}
+                  width="400"
+                  height="250"
+                  class="w-full transition-transform duration-fade ease-out hover:scale-[1.1]"
+                />
+                <div class="to-transparent flex-end pointer-events-none absolute bottom-0 flex w-full flex-col bg-gradient-to-t from-primary p-4 pt-8 font-display text-neutral-light">
+                  <span class="text-lg font-bold">{talk.speaker}</span>
+                  <span class="text-balance">{talk.title}</span>
+                </div>
+              </a>
+            ))
+          }
+        </div>
+      </div>
+    </Section>
+  </main>
+</BaseLayout>