feat: add new workshops and event

Author: Razorbird360

src/components/FlowingWorkshops.astro

@@ -1,23 +1,36 @@
 ---
+import { getImage } from 'astro:assets'
 import { getEvents } from '../lib/api'
 import * as workshopImages from '../images/workshops'
 
 const events = getEvents()
 const workshops = events.type.find(type => type.title === "Workshops")?.events || []
 
-const workshopData = workshops
-  .map((workshop) => {
+const workshopData = (await Promise.all(
+  workshops.map(async (workshop) => {
     if (!workshop.workshop_folder) return null
-    const folderImages = Object.entries(workshopImages)
+    const folderImageModules = Object.entries(workshopImages)
       .filter(([key]) => key.startsWith(workshop.workshop_folder!.replace(' ', '')))
-      .map(([, imageModule]) => (imageModule as any).src)
-    if (folderImages.length === 0) return null
+      .map(([, imageModule]) => imageModule)
+    if (folderImageModules.length === 0) return null
+    const optimizedImages = await Promise.all(
+      folderImageModules.map((mod) =>
+        getImage({ src: mod as any, width: 480, format: 'webp' })
+      )
+    )
     return {
       title: workshop.title,
-      images: folderImages,
+      images: optimizedImages.map((img) => img.src),
     }
   })
-  .filter((item): item is NonNullable<typeof item> => item !== null)
+)).filter((item): item is NonNullable<typeof item> => item !== null)
+
+const MAX_WORKSHOPS = 8
+for (let i = workshopData.length - 1; i > 0; i--) {
+  const j = Math.floor(Math.random() * (i + 1));
+  [workshopData[i], workshopData[j]] = [workshopData[j], workshopData[i]]
+}
+workshopData.length = Math.min(workshopData.length, MAX_WORKSHOPS)
 
 const mobileItemCount = Math.min(workshopData.length, Math.floor(workshopData.length * 0.6))
 ---

src/components/ImagePopup.astro

@@ -27,8 +27,8 @@ const images = Object.entries(allImages)
   .map(([, imageModule]) => (imageModule as any).src);
 ---
 
-<div id={id} class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden items-center justify-center">
-  <div class="popup-content bg-white dark:bg-[#000212] rounded-lg p-6 max-w-3xl w-full mx-4 relative text-gray-900 dark:text-white">
+<div id={id} class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden items-center justify-center py-6">
+  <div class="popup-content bg-white dark:bg-[#0B0E11] rounded-lg p-6 max-w-3xl w-full mx-4 relative text-gray-900 dark:text-white max-h-full overflow-y-auto">
     <div class="flex justify-between items-center mb-4">
       <h3 class="font-bold text-lg">{title}</h3>
       <button id="close-popup" class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 p-1 rounded transition-colors">

src/content/_events.yaml

@@ -36,7 +36,7 @@ type:
         duration_minutes: 90
         format: online
         workshop_folder: Git
-        
+
 
       - title: UI/UX with Figma
         description_raw: >-
@@ -92,6 +92,69 @@ type:
         workshop_folder: FlutterFlow
 
 
+      - title: C++
+        description_raw: >-
+          Every great program starts with a solid foundation in a powerful language 💻.
+          In this workshop, we dived into the fundamentals of C++, covering basic syntax, variables, loops, and functions before moving on to Object-Oriented Programming with classes and inheritance. We put our skills to the test by building a text-based fighter game from scratch ⚔️!
+        time: 24 October 2025 17:30:00
+        duration_minutes: 120
+        format: physical
+        location: 27-05-10
+        workshop_folder: Cpp
+
+
+      - title: Django
+        description_raw: >-
+          We explored the world of web development with Django 🌐, learning how the web works under the hood with HTTP, MVC architecture, and database migrations. Along the way, we built our own web app from scratch, working with models, views, and URL routing 🛠️.
+        time: 31 October 2025 17:30:00
+        duration_minutes: 120
+        format: physical
+        location: 27-05-10
+        workshop_folder: Django
+
+
+      - title: React
+        description_raw: >-
+          Modern web development starts with mastering the right tools 🚀.
+          In this session, we got hands-on with React.js and Tailwind CSS, learning how components, state, and styling come together to build modern web interfaces. We started with a clicker app to grasp the basics, then built our very own portfolio website from scratch 💻✨!
+        time: 7 November 2025 17:30:00
+        duration_minutes: 120
+        format: physical
+        location: 27-05-10
+        workshop_folder: React
+
+
+      - title: Agentic AI
+        description_raw: >-
+          In this workshop, we explored the world of Agentic AI, learning how autonomous agents can automate everyday tasks. From understanding AI workflows to building our own task reminder agent using tools like n8n and Telegram, we got hands-on with practical AI that students can apply to their daily lives 🚀.
+        time: 14 November 2025 18:00:00
+        duration_minutes: 90
+        format: physical
+        location: LT58B
+        workshop_folder: Agentic AI
+
+
+      - title: Computer Vision
+        description_raw: >-
+          We explored the world of Computer Vision and Machine Learning 🤖, learning how machines see and understand images. From training models with Teachable Machine to building our own OpenCV project in Python 🐍, we got hands-on with image processing, model evaluation, and real-world applications like face detection 👁️.
+        time: 28 November 2025 17:30:00
+        duration_minutes: 120
+        format: physical
+        location: 27-05-10
+        workshop_folder: Computer Vision
+
+
+      - title: Kubernetes
+        description_raw: >-
+          Taking your apps from local to production starts with containers ☸️.
+          We learnt how to containerise and deploy applications with Docker and K8s, from writing Dockerfiles and building images to deploying pods, services, and managing clusters with kubectl and minikube. We also explored Helm for package management and Sealed Secrets for managing sensitive data securely 🔐.
+        time: 30 January 2026 17:30:00
+        duration_minutes: 120
+        format: physical
+        location: 27-05-10
+        workshop_folder: Kubernetes
+
+
   # - title: Bootcamps
   #   events:
   #     - title: DSA Bootcamp
@@ -102,35 +165,45 @@ type:
 
   - title: Events
     events:
-      - title: HackIT 2025
-        description_raw: >-
-          🚀 HackIT brought student ideas to life!
-          Together with EIG and AISIG, Overflow hosted a school-wide hackathon where teams of up to 4 took on challenges in AI, sustainability, and digital wellbeing 🌏💡.
-          Over the months, participants joined workshops, milestone checks, and consultations before pitching their creations at the big finale on 15 September. With snacks 🍪, games 🎲, and mystery tech prizes 🎁 up for grabs, it was an inspiring way to see how everyone's ideas came to life!
-        time: 15 September 2025 09:30:00
-        duration_minutes: 510
-        format: physical
-        location: 27-05-11/12
-        event_folder: HackIT
-        link: https://www.linkedin.com/posts/np-overflow_%F0%9D%98%90%F0%9D%98%9B%F0%9D%98%B4-%F0%9D%98%A2-%F0%9D%98%B8%F0%9D%98%B3%F0%9D%98%A2%F0%9D%98%B1-%F0%9D%98%B0%F0%9D%98%AF-%F0%9D%98%8F%F0%9D%98%A2%F0%9D%98%A4%F0%9D%98%AC%F0%9D%98%90%F0%9D%98%9B-activity-7375414768486023169-ICYj?utm_source=share&utm_medium=member_desktop&rcm=ACoAAE2_NKQBdjyhSD0-Lu9mLwJVOlmZOGgS-1g
-
       - title: SIG Fiesta
         description_raw: >-
-          At SIG Fiesta, we showcased some of the exciting projects our members built, from a remote-controlled robotics car 🚗💨, to an interactive 3D website 🌐, and even a computer vision space invader game 👾 controlled by hand gestures. Visitors got to experience first-hand the creativity and technical skills that Overflowers bring to life through hackathons, workshops, and showcases. 
+          At SIG Fiesta, we showcased some of the exciting projects our members built, from a remote-controlled robotics car 🚗💨, to an interactive 3D website 🌐, and even a computer vision space invader game 👾 controlled by hand gestures. Visitors got to experience first-hand the creativity and technical skills that Overflowers bring to life through hackathons, workshops, and showcases.
         time: 16 April 2025 13:00:00
         duration_minutes: 240
         format: physical
         location: 27-05-11/12
         event_folder: SIG Fiesta
-        link: https://www.linkedin.com/posts/np-overflow_npoverflow-ictsigfiesta2025-ictorientation-activity-7325895217692209152-sITz?utm_source=share&utm_medium=member_desktop&rcm=ACoAAE2_NKQBdjyhSD0-Lu9mLwJVOlmZOGgS-1g
+        link: https://www.linkedin.com/posts/np-overflow_npoverflow-ictsigfiesta2025-ictorientation-activity-7325895217692209152-sITz
 
       - title: Freshmen Welcome Party
         description_raw: >-
-          We kicked off the new academic year with our Welcome Party 🎉, where new and returning Overflowers came together for an evening of games, debates, and snacks 🍪. 
+          We kicked off the new academic year with our Welcome Party 🎉, where new and returning Overflowers came together for an evening of games, debates, and snacks 🍪.
         time: 2 May 2025 17:30:00
         duration_minutes: 120
         format: physical
         location: 27-05-11/12
         event_folder: Welcome Party
-        link: https://www.linkedin.com/posts/np-overflow_npoverflow-techcommunity-ictstudentlife-activity-7363791687019577344-nRBP?utm_source=share&utm_medium=member_desktop&rcm=ACoAAE2_NKQBdjyhSD0-Lu9mLwJVOlmZOGgS-1g
+        link: https://www.linkedin.com/posts/np-overflow_npoverflow-techcommunity-ictstudentlife-activity-7363791687019577344-nRBP
+
+      - title: HackIT 2025
+        description_raw: >-
+          🚀 HackIT brought student ideas to life!
+          Together with EIG and AISIG, Overflow hosted a school-wide hackathon where teams of up to 4 took on challenges in AI, sustainability, and digital wellbeing 🌏💡.
+          Over the months, participants joined workshops, milestone checks, and consultations before pitching their creations at the big finale on 15 September. With snacks 🍪, games 🎲, and mystery tech prizes 🎁 up for grabs, it was an inspiring way to see how everyone's ideas came to life!
+        time: 15 September 2025 09:30:00
+        duration_minutes: 510
+        format: physical
+        location: 27-05-11/12
+        event_folder: HackIT
+        link: https://www.linkedin.com/posts/np-overflow_%F0%9D%98%90%F0%9D%98%9B%F0%9D%98%B4-%F0%9D%98%A2-%F0%9D%98%B8%F0%9D%98%B3%F0%9D%98%A2%F0%9D%98%B1-%F0%9D%98%B0%F0%9D%98%AF-%F0%9D%98%8F%F0%9D%98%A2%F0%9D%98%A4%F0%9D%98%AC%F0%9D%98%90%F0%9D%98%9B-activity-7375414768486023169-ICYj
+
+      - title: BYTEHackz 2025
+        description_raw: >-
+          BYTEHackz is an annual hackathon where IT students tackle real-world Full Stack Development challenges in front of lecturers, industry partners, and peers 💻🏆. With booth demos, presentations, games, and prizes up for grabs, it's where months of hard work get the spotlight they deserve!
+        time: 20 November 2025 08:45:00
+        duration_minutes: 255
+        format: physical
+        location: NPYA (Blk 16) Level 3
+        event_folder: Bytehacks
+        link: https://www.linkedin.com/posts/np-overflow_thebytehackz2025-innovation-techevents-activity-7407360803743551488-iwdE