diff --git a/src/pages/videos.js b/src/pages/videos.js index 3e21ce6..7f08584 100644 --- a/src/pages/videos.js +++ b/src/pages/videos.js @@ -7,22 +7,27 @@ const videos = [ { id: 'lvzMLf6wXlY', title: 'Kubernetes Native Distributed Inferencing', - description: 'Introduction to llm-d at DevConf.US 2025 — learn the fundamentals of distributed LLM inference on Kubernetes.', + description: 'Introduction to llm-d at DevConf.US 2025 — learn the fundamentals of distributed LLM inference on Kubernetes from Rob Shaw (Red Hat).', }, { id: 'mfXIe_S53vA', title: 'Serving PyTorch LLMs at Scale', - description: 'Disaggregated inference with Kubernetes and llm-d — presented by M. Ayoub & C. Liu at PyTorch Conference.', + description: 'Disaggregated inference with Kubernetes and llm-d — presented by Maroon Ayoub (IBM) & Cong Liu (Google) at PyTorch Conference.', }, { id: '_xAXb70d4-0', title: 'Distributed Inference with Well-Lit Paths', - description: 'Explore llm-d\'s "well-lit paths" approach to simplified, production-ready distributed inference.', + description: 'Watch Rob Shaw (Red Hat) explore llm-d\'s "well-lit paths" and its approach to simplified, production-ready distributed inference.', }, { id: 'g8_snJA_ESU', title: 'Multi-Accelerator LLM Inference', - description: 'Deep dive into multi-accelerator LLM inference on Kubernetes — presented by Erwan Gallen at KubeCon.', + description: 'Deep dive into multi-accelerator LLM inference on Kubernetes — presented by Erwan Gallen (Red Hat) at KubeCon.', + }, + { + id: '-C76naL3PRc', + title: 'Routing Stateful AI Workloads in Kubernetes', + description: 'Maroon Ayoub (IBM) & Michey Mehta (Red Hat) explore cache-aware routing strategies for LLM workloads using llm-d and the K8s Gateway API Inference Extension.', }, ]; diff --git a/src/pages/videos.module.css b/src/pages/videos.module.css index 5f2fe7d..057f70a 100644 --- a/src/pages/videos.module.css +++ b/src/pages/videos.module.css @@ -82,14 +82,32 @@ /* Video Grid */ .videoGrid { - display: grid; - grid-template-columns: repeat(2, 1fr); + display: flex; + flex-wrap: wrap; + justify-content: center; gap: 2.5rem; } +/* Video Card */ +.videoCard { + flex: 0 1 calc(50% - 1.25rem); + max-width: calc(50% - 1.25rem); + background: #fff; + border-radius: 16px; + overflow: hidden; + box-shadow: + 0 4px 6px rgba(127, 49, 127, 0.06), + 0 12px 24px rgba(127, 49, 127, 0.08); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + @media screen and (max-width: 900px) { + .videoCard { + flex: 0 1 100%; + max-width: 100%; + } + .videoGrid { - grid-template-columns: 1fr; gap: 2rem; } @@ -102,17 +120,6 @@ } } -/* Video Card */ -.videoCard { - background: #fff; - border-radius: 16px; - overflow: hidden; - box-shadow: - 0 4px 6px rgba(127, 49, 127, 0.06), - 0 12px 24px rgba(127, 49, 127, 0.08); - transition: transform 0.3s ease, box-shadow 0.3s ease; -} - .videoCard:hover { transform: translateY(-6px); box-shadow: