Feature: All the game stuff are now correct

public/images/EXPO/GameDev logos/DELUSIONAL_logo.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ff343a;
+      }
+
+      .cls-2 {
+        fill: #00ff50;
+      }
+
+      .cls-3 {
+        fill: #ff3398;
+      }
+
+      .cls-4 {
+        fill: #0284ff;
+      }
+
+      .cls-5 {
+        fill: #ffc703;
+      }
+    </style>
+  </defs>
+  <g>
+    <path class="cls-5" d="M147.26,50.24h-46.56c-29.7,0-53.78,24.08-53.78,53.78v322.66c0,29.7,24.08,53.78,53.78,53.78h46.56c118.61,0,215.11-96.5,215.11-215.11S265.87,50.24,147.26,50.24ZM154.48,372.67v-214.63c55.95,3.73,100.34,50.43,100.34,107.31s-44.38,103.59-100.34,107.31Z"/>
+    <path class="cls-4" d="M1424.13,50.24c-29.7,0-53.78,24.08-53.78,53.78v218.47c0,27.8-22.62,50.42-50.42,50.42s-50.42-22.62-50.42-50.42V104.02c0-29.7-24.08-53.78-53.78-53.78s-53.78,24.08-53.78,53.78v218.47c0,87.1,70.86,157.97,157.97,157.97s157.97-70.87,157.97-157.97V104.02c0-29.7-24.08-53.78-53.78-53.78Z"/>
+    <path class="cls-3" d="M666.67,157.8c29.7,0,53.78-24.08,53.78-53.78s-24.08-53.78-53.78-53.78h-174.78c-29.7,0-53.78,24.08-53.78,53.78v322.66c0,29.7,24.08,53.78,53.78,53.78h174.78c29.7,0,53.78-24.08,53.78-53.78s-24.08-53.78-53.78-53.78h-121v-53.78h121c29.7,0,53.78-24.08,53.78-53.78s-24.08-53.78-53.78-53.78h-121v-53.78h121Z"/>
+    <path class="cls-2" d="M100.71,599.52c-29.7,0-53.78,24.08-53.78,53.78v322.66c0,29.7,24.08,53.78,53.78,53.78s53.78-24.08,53.78-53.78v-322.66c0-29.7-24.08-53.78-53.78-53.78Z"/>
+    <path class="cls-2" d="M1064.09,372.91h-154.61V104.02c0-29.7-24.08-53.78-53.78-53.78s-53.78,24.08-53.78,53.78v322.66c0,29.7,24.08,53.78,53.78,53.78h208.39c29.7,0,53.78-24.08,53.78-53.78s-24.08-53.78-53.78-53.78Z"/>
+    <path class="cls-1" d="M1819.29,922.19h-154.61v-268.88c0-29.7-24.08-53.78-53.78-53.78s-53.78,24.08-53.78,53.78v322.66c0,29.7,24.08,53.78,53.78,53.78h208.39c29.7,0,53.78-24.08,53.78-53.78s-24.08-53.78-53.78-53.78Z"/>
+    <path class="cls-5" d="M1353.21,634.4c-7.86-20.95-27.86-34.84-50.23-34.89h-.12c-22.32,0-42.33,13.79-50.26,34.67l-122.68,322.66c-10.55,27.76,3.39,58.82,31.16,69.38,27.76,10.56,58.82-3.39,69.38-31.15l72.07-189.54,70.99,189.31c8.1,21.59,28.59,34.91,50.36,34.91,6.27,0,12.65-1.11,18.87-3.44,27.81-10.43,41.9-41.43,31.47-69.23l-121-322.66Z"/>
+    <path class="cls-4" d="M993.75,599.52c-29.7,0-53.78,24.08-53.78,53.78v140.27l-109.43-169.45c-12.94-20.03-37.52-29.15-60.38-22.41-22.87,6.74-38.57,27.74-38.57,51.58v322.66c0,29.7,24.08,53.78,53.78,53.78s53.78-24.08,53.78-53.78v-140.27l109.43,169.45c10.09,15.62,27.26,24.61,45.18,24.61,5.06,0,10.17-.72,15.21-2.2,22.87-6.74,38.57-27.74,38.57-51.58v-322.66c0-29.7-24.08-53.78-53.78-53.78Z"/>
+    <path class="cls-3" d="M1870.74,208.11c0-87.05-70.82-157.86-157.86-157.86-41.3,0-77.48,10.14-104.63,29.31-34.33,24.25-53.23,62.01-53.23,106.31,0,24.5,7.18,57.43,38.23,85.23-22.12,6.67-38.23,27.2-38.23,51.49,0,87.05,70.82,157.86,157.86,157.86,41.77,0,76.58-9.1,103.46-27.05,35.08-23.42,54.4-60.95,54.4-105.66,0-25.05-7.86-59.2-42.83-86.99,24.45-5.06,42.83-26.71,42.83-52.66ZM1712.88,372.91c-27.74,0-50.31-22.57-50.31-50.31,0-5.01-.69-9.86-1.97-14.46,12.7,4.54,25.66,8.47,38.43,12.34,18.06,5.48,35.12,10.65,48.33,16.68,11.18,5.1,15.06,9.2,15.06,12.77,0,16.85-25.7,22.97-49.55,22.97ZM1730.25,217.55c-22.59-6.85-45.67-14.41-59.79-22.57-5.1-2.95-7.89-7.91-7.89-13.44,0-7.07,3.82-11.37,7.74-14.14,8.64-6.1,24.15-9.6,42.57-9.6,27.74,0,50.31,22.57,50.31,50.31,0,7.62,1.58,14.87,4.44,21.43-12.35-4.39-24.96-8.22-37.38-11.98Z"/>
+    <path class="cls-1" d="M442.11,599.52c-118.61,0-215.11,96.5-215.11,215.11s96.5,215.11,215.11,215.11,215.11-96.5,215.11-215.11-96.5-215.11-215.11-215.11ZM442.11,922.18c-59.31,0-107.55-48.25-107.55-107.55s48.25-107.55,107.55-107.55,107.55,48.25,107.55,107.55-48.25,107.55-107.55,107.55Z"/>
+  </g>
+  <g>
+    <path d="M147.27,493.9h-46.56c-37.07,0-67.22-30.15-67.22-67.22V104.02c0-37.07,30.15-67.22,67.22-67.22h46.56c126.02,0,228.55,102.53,228.55,228.55s-102.53,228.55-228.55,228.55ZM100.71,63.69c-22.24,0-40.33,18.09-40.33,40.33v322.66c0,22.24,18.09,40.33,40.33,40.33h46.56c111.2,0,201.66-90.47,201.66-201.66S258.46,63.69,147.27,63.69h-46.56ZM141.04,387.04v-243.37l14.34.96c63.3,4.21,112.89,57.24,112.89,120.73s-49.59,116.52-112.89,120.73l-14.34.96ZM167.93,173.53v183.65c42.17-9.48,73.45-47.36,73.45-91.83s-31.27-82.34-73.45-91.82Z"/>
+    <path d="M1319.94,493.9c-94.52,0-171.41-76.9-171.41-171.42V104.02c0-37.07,30.15-67.22,67.22-67.22s67.22,30.15,67.22,67.22v218.47c0,20.39,16.58,36.97,36.97,36.97s36.97-16.59,36.97-36.97V104.02c0-37.07,30.15-67.22,67.22-67.22s67.22,30.15,67.22,67.22v218.47c0,94.52-76.9,171.42-171.42,171.42ZM1215.75,63.69c-22.24,0-40.33,18.09-40.33,40.33v218.47c0,79.69,64.83,144.53,144.52,144.53s144.53-64.83,144.53-144.53V104.02c0-22.24-18.09-40.33-40.33-40.33s-40.33,18.09-40.33,40.33v218.47c0,35.21-28.65,63.86-63.86,63.86s-63.86-28.65-63.86-63.86V104.02c0-22.24-18.09-40.33-40.33-40.33Z"/>
+    <path d="M666.67,493.9h-174.78c-37.07,0-67.22-30.15-67.22-67.22V104.02c0-37.07,30.15-67.22,67.22-67.22h174.78c37.07,0,67.22,30.15,67.22,67.22s-30.15,67.22-67.22,67.22h-107.55v26.89h107.55c37.07,0,67.22,30.15,67.22,67.22s-30.15,67.22-67.22,67.22h-107.55v26.89h107.55c37.07,0,67.22,30.15,67.22,67.22s-30.15,67.22-67.22,67.22ZM491.9,63.69c-22.24,0-40.33,18.09-40.33,40.33v322.66c0,22.24,18.09,40.33,40.33,40.33h174.78c22.24,0,40.33-18.09,40.33-40.33s-18.09-40.33-40.33-40.33h-121c-7.42,0-13.44-6.02-13.44-13.44v-53.78c0-7.42,6.02-13.44,13.44-13.44h121c22.24,0,40.33-18.09,40.33-40.33s-18.09-40.33-40.33-40.33h-121c-7.42,0-13.44-6.02-13.44-13.44v-53.78c0-7.42,6.02-13.44,13.44-13.44h121c22.24,0,40.33-18.09,40.33-40.33s-18.09-40.33-40.33-40.33h-174.78Z"/>
+    <path d="M100.71,1043.17c-37.07,0-67.22-30.15-67.22-67.22v-322.66c0-37.06,30.15-67.22,67.22-67.22s67.22,30.15,67.22,67.22v322.66c0,37.06-30.15,67.22-67.22,67.22ZM100.71,612.96c-22.24,0-40.33,18.09-40.33,40.33v322.66c0,22.24,18.09,40.33,40.33,40.33s40.33-18.09,40.33-40.33v-322.66c0-22.24-18.09-40.33-40.33-40.33Z"/>
+    <path d="M1064.09,493.9h-208.38c-37.07,0-67.22-30.15-67.22-67.22V104.02c0-37.07,30.16-67.22,67.22-67.22s67.22,30.15,67.22,67.22v255.44h141.16c37.07,0,67.22,30.15,67.22,67.22s-30.15,67.22-67.22,67.22ZM855.71,63.69c-22.24,0-40.33,18.09-40.33,40.33v322.66c0,22.24,18.09,40.33,40.33,40.33h208.38c22.24,0,40.33-18.09,40.33-40.33s-18.09-40.33-40.33-40.33h-168.05V104.02c0-22.24-18.09-40.33-40.33-40.33Z"/>
+    <path d="M1819.29,1043.18h-208.38c-37.07,0-67.22-30.15-67.22-67.22v-322.66c0-37.06,30.15-67.22,67.22-67.22s67.22,30.15,67.22,67.22v255.44h141.17c37.07,0,67.22,30.15,67.22,67.22s-30.15,67.22-67.22,67.22ZM1610.91,612.97c-22.24,0-40.33,18.09-40.33,40.33v322.66c0,22.24,18.09,40.33,40.33,40.33h208.38c22.24,0,40.33-18.09,40.33-40.33s-18.09-40.33-40.33-40.33h-154.61c-7.43,0-13.44-6.02-13.44-13.44v-268.89c0-22.24-18.09-40.33-40.33-40.33Z"/>
+    <path d="M1180.2,1043.21c-8.07,0-16.15-1.47-23.91-4.42-16.78-6.38-30.08-18.92-37.43-35.3-7.36-16.38-7.9-34.64-1.51-51.43l122.68-322.66c9.85-25.92,35.1-43.33,62.83-43.33,27.95.07,53.18,17.59,62.94,43.62h0l121,322.66c6.31,16.81,5.69,35.07-1.75,51.42-7.43,16.35-20.78,28.82-37.59,35.13-7.6,2.85-15.54,4.29-23.59,4.29-27.87,0-53.16-17.53-62.95-43.63l-58.49-155.98-59.41,156.26c-6.38,16.78-18.92,30.08-35.3,37.43-8.8,3.95-18.15,5.93-27.51,5.93ZM1302.94,612.95c-16.73,0-31.88,10.45-37.79,26l-122.68,322.66c-3.83,10.07-3.51,21.03.91,30.86,4.42,9.83,12.39,17.35,22.46,21.18,10.06,3.83,21.02,3.51,30.85-.91,9.83-4.41,17.35-12.39,21.18-22.46l72.06-189.54c1.98-5.22,6.98-8.67,12.57-8.67h.03c5.59.01,10.6,3.49,12.56,8.72l70.99,189.32c5.87,15.66,21.06,26.18,37.77,26.18,4.82,0,9.58-.87,14.15-2.58,20.82-7.81,31.41-31.1,23.6-51.93l-120.99-322.66c-5.86-15.62-21-26.13-37.68-26.17Z"/>
+    <path d="M993.76,1043.18c-22.92,0-44.03-11.5-56.47-30.75l-84.7-131.14v94.67c0,37.06-30.15,67.22-67.22,67.22s-67.22-30.15-67.22-67.22v-322.66c0-29.59,19.83-56.11,48.21-64.48,28.38-8.36,59.42,3.16,75.48,28.01l84.69,131.14v-94.67c0-37.06,30.15-67.22,67.22-67.22s67.22,30.15,67.22,67.22v322.66c0,29.59-19.83,56.11-48.21,64.48-6.18,1.82-12.58,2.74-19.01,2.74ZM839.14,822.24c4.48,0,8.77,2.25,11.29,6.15l109.44,169.45c7.46,11.56,20.13,18.46,33.88,18.46,3.86,0,7.69-.56,11.4-1.65,17.03-5.02,28.93-20.93,28.93-38.68v-322.66c0-22.24-18.09-40.33-40.33-40.33s-40.33,18.09-40.33,40.33v140.27c0,5.96-3.93,11.21-9.64,12.9-5.72,1.67-11.86-.6-15.1-5.6l-109.43-169.45c-9.63-14.92-28.26-21.85-45.29-16.81-17.03,5.02-28.92,20.93-28.92,38.68v322.66c0,22.24,18.09,40.33,40.33,40.33s40.33-18.09,40.33-40.33v-140.27c0-5.96,3.93-11.21,9.64-12.9,1.26-.37,2.54-.55,3.8-.55Z"/>
+    <path d="M1712.88,493.9c-94.46,0-171.31-76.85-171.31-171.31,0-22.37,11.37-43.03,29.19-55.38-23.75-28.24-29.19-59.06-29.19-81.34,0-48.8,20.92-90.45,58.92-117.3,29.43-20.79,68.29-31.78,112.39-31.78,94.46,0,171.31,76.85,171.31,171.31,0,23.66-12.53,45.08-31.78,57.1,25.83,28.18,31.78,59.59,31.78,82.55,0,49.34-21.45,90.84-60.38,116.84-29.13,19.45-66.45,29.31-110.92,29.31ZM1712.88,63.69c-38.51,0-72.01,9.28-96.87,26.85-30.66,21.66-47.55,55.52-47.55,95.33,0,29.86,11.35,55.16,33.75,75.22,3.62,3.24,5.21,8.19,4.16,12.93s-4.59,8.55-9.24,9.95c-16.88,5.09-28.66,20.97-28.66,38.62,0,79.63,64.79,144.42,144.42,144.42,39.06,0,71.36-8.34,95.99-24.79,31.23-20.85,48.43-54.4,48.43-94.48,0-30.84-12.7-56.56-37.75-76.46-4.08-3.25-5.93-8.56-4.72-13.64,1.21-5.08,5.25-9,10.36-10.06,18.6-3.85,32.11-20.46,32.11-39.49,0-79.63-64.79-144.42-144.42-144.42ZM1712.88,386.35c-35.15,0-63.75-28.6-63.75-63.75,0-3.69-.49-7.34-1.47-10.86-1.35-4.84.11-10.03,3.79-13.45,3.68-3.42,8.96-4.51,13.69-2.82,12.35,4.42,25.23,8.32,37.67,12.1,18.63,5.65,36.1,10.95,50.15,17.36,6.86,3.13,22.92,10.46,22.92,25,0,22.8-23.55,36.42-62.99,36.42ZM1676.35,327.57c2.43,17.99,17.89,31.89,36.53,31.89s30.38-3.96,34.49-7.21c-1.29-.76-3.09-1.72-5.58-2.86-12.41-5.66-29.04-10.71-46.65-16.05-6.21-1.88-12.49-3.79-18.78-5.78ZM1767.62,242.98c-1.51,0-3.03-.25-4.5-.78-12.03-4.28-24.58-8.09-36.71-11.77l3.84-12.88-3.9,12.87c-23.43-7.11-47.24-14.91-62.62-23.8-9.14-5.28-14.6-14.66-14.6-25.08,0-7.13,2.33-17.28,13.42-25.12,11.02-7.78,28.89-12.07,50.33-12.07,35.15,0,63.75,28.6,63.75,63.75,0,5.59,1.12,11,3.33,16.07,2.14,4.91,1.16,10.63-2.5,14.54-2.59,2.77-6.17,4.27-9.83,4.27ZM1712.88,171.24c-18.22,0-29.93,3.69-34.82,7.14-2.05,1.45-2.05,2.24-2.05,3.16,0,.57.09,1.17,1.17,1.8,13.05,7.55,36.12,15.03,56.96,21.35l-3.9,12.87,3.96-12.85c5.12,1.55,10.32,3.13,15.55,4.76,0-.45-.01-.91-.01-1.36,0-20.33-16.53-36.86-36.86-36.86Z"/>
+    <path d="M442.11,1043.17c-126.02,0-228.55-102.53-228.55-228.55s102.53-228.55,228.55-228.55,228.55,102.53,228.55,228.55-102.53,228.55-228.55,228.55ZM442.11,612.96c-111.2,0-201.66,90.47-201.66,201.66s90.47,201.66,201.66,201.66,201.66-90.47,201.66-201.66-90.47-201.66-201.66-201.66ZM442.11,935.62c-66.72,0-121-54.28-121-121s54.28-121,121-121,121,54.28,121,121-54.28,121-121,121ZM442.11,720.51c-51.89,0-94.11,42.22-94.11,94.11s42.22,94.11,94.11,94.11,94.11-42.22,94.11-94.11-42.22-94.11-94.11-94.11Z"/>
+  </g>
+</svg>

src/app/[locale]/messiala/page.tsx

@@ -7,6 +7,7 @@ import { useEffect, useRef, useState, useMemo } from "react";
 import { EyeClosed, Eye } from "lucide-react";
 import SectionDivider from "@/components/SectionDivider";
 import { useTranslations } from "next-intl";
+import gamedevData from "@/data/gamedev.json";
 
 // Define interface for the ref with toggle function
 interface MountRefCurrent extends HTMLDivElement {
@@ -1098,206 +1099,79 @@ export default function Expo() {
         </h2>
         
         <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
-          {/* Row 1 - 4 items */}
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Lostbyte.png"
-                alt="Broken Alliance"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Broken Alliance</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Eleball.png"
-                alt="Eleball"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Eleball</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Placeholder Gameworks/craftcraft_simulator_logo.png"
-                alt="CraftCraft Simulator"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">CraftCraft Simulator</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/HRA - CYBER DOC ROGUE/cyber_dog_rogue_logo.png"
-                alt="Cyber Dog Rescue"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Cyber Dog Rescue</h3>
-          </div>
-
-          {/* Row 2 - 4 items */}
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Placeholder Gameworks/death_and_taxes_logo.png"
-                alt="Death and Taxes"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Death and Taxes</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Path of Pixels/deep_pixel_melancholy_logo.png"
-                alt="Deep Pixel Melancholy"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Deep Pixel Melancholy</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Cyber_Doc_Rogue.png"
-                alt="Delusional"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Delusional</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Eleball.png"
-                alt="Eleball"
-                className="w-full h-full object-contain p-4"
-              />
+          {gamedevData.games.map((game) => (
+            <div key={game.id} className="flex flex-col">
+              <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
+                <img
+                  src={game.logo}
+                  alt={game.name}
+                  className="w-full h-full object-contain p-4"
+                />
+              </div>
+              <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold mb-1">
+                {game.name}
+              </h3>
+              <p className="text-[#666] dark:text-[#AAA] text-center text-sm">
+                {game.developer}
+              </p>
             </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Eleball</h3>
-          </div>
+          ))}
+        </div>
+      </div>
 
-          {/* Row 3 - 4 items */}
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Hardwired.png"
-                alt="Hardwired"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Hardwired</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Hexwave.png"
-                alt="HexWave"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">HexWave</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Immortal.png"
-                alt="IMMORTAL: And the death that follows"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">IMMORTAL: And the death that follows</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Kalawindow.png"
-                alt="Kalawindow"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Kalawindow</h3>
-          </div>
+      <SectionDivider />
 
-          {/* Row 4 - 4 items */}
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Korter1996.png"
-                alt="Kortel 1996"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Kortel 1996</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Midnight_Souveneirs.png"
-                alt="Midnight Souveneirs"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Midnight Souveneirs</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Nullis.png"
-                alt="Nullis"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Nullis</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Planet_hoarders.png"
-                alt="Planet Hoarders"
-                className="w-full h-full object-contain p-4"
-              />
+      {/* ÜLIKOOLID Section */}
+      <div className="flex flex-col m-6 md:m-16 mb-16">
+        <h2
+          className={`text-4xl md:text-5xl lg:text-6xl ${vipnagorgialla.className} font-bold italic text-[#2A2C3F] dark:text-[#EEE5E5] mb-8 uppercase`}
+        >
+          Ülikoolid
+        </h2>
+        
+        {/* First 12 games in 3x4 grid */}
+        <div className="grid grid-cols-3 md:grid-cols-4 gap-6 mb-6">
+          {gamedevData.universities?.slice(0, 12).map((university) => (
+            <div key={university.id} className="flex flex-col">
+              <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
+                <img
+                  src={university.logo}
+                  alt={university.name}
+                  className="w-full h-full object-contain p-4"
+                />
+              </div>
+              <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold mb-1">
+                {university.name}
+              </h3>
+              <p className="text-[#666] dark:text-[#AAA] text-center text-sm">
+                {university.university}
+              </p>
             </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Planet Hoarders</h3>
-          </div>
+          ))}
+        </div>
 
-          {/* Row 5 - 3 items (last row) */}
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Realm Hearts/realm_hearts.png"
-                alt="Realm Hearts"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Realm Hearts</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/Seasons_of_Solitude.png"
-                alt="Season of Solitude"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">Season of Solitude</h3>
-          </div>
-          <div className="flex flex-col">
-            <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
-              <img
-                src="/images/EXPO/GameDev logos/War_torn.png"
-                alt="War-thorn"
-                className="w-full h-full object-contain p-4"
-              />
-            </div>
-            <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold">War-thorn</h3>
+        {/* Remaining games in new grid */}
+        {gamedevData.universities && gamedevData.universities.length > 12 && (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
+            {gamedevData.universities.slice(12).map((university) => (
+              <div key={university.id} className="flex flex-col">
+                <div className="bg-[#1a1a2e] rounded-lg overflow-hidden aspect-square mb-2">
+                  <img
+                    src={university.logo}
+                    alt={university.name}
+                    className="w-full h-full object-contain p-4"
+                  />
+                </div>
+                <h3 className="text-[#2A2C3F] dark:text-[#EEE5E5] text-center font-semibold mb-1">
+                  {university.name}
+                </h3>
+                <p className="text-[#666] dark:text-[#AAA] text-center text-sm">
+                  {university.university}
+                </p>
+              </div>
+            ))}
           </div>
-        </div>
+        )}
       </div>
 
       <SectionDivider />

src/data/gamedev.json

@@ -0,0 +1,230 @@
+{
+  "games": [
+    {
+      "id": "broken-alliance",
+      "name": "Broken Alliance",
+      "logo": "/images/EXPO/GameDev logos/broken_alliance.png",
+      "developer": "Placeholder Gameworks",
+      "description": ""
+    },
+    {
+      "id": "buckshot-tournament",
+      "name": "Buckshot Tournament",
+      "logo": "/images/miniturniirid/buckshot_tournament.png",
+      "developer": "Mike Klubnika",
+      "description": ""
+    },
+    {
+      "id": "eleball",
+      "name": "Eleball",
+      "logo": "/images/EXPO/GameDev logos/Eleball.png",
+      "developer": "Pulsar Twin",
+      "description": ""
+    },
+    {
+      "id": "craftcraft-simulator",
+      "name": "CraftCraft Simulator",
+      "logo": "/images/EXPO/GameDev logos/craftcat_sim.png",
+      "developer": "Placeholder Gameworks",
+      "description": ""
+    },
+    {
+      "id": "cyber-dog-rescue",
+      "name": "Cyber Dog Rescue",
+      "logo": "/images/EXPO/GameDev logos/Cyber_Doc_Rogue.png",
+      "developer": "HRA Interactive",
+      "description": ""
+    },
+    {
+      "id": "death-and-taxes",
+      "name": "Death and Taxes",
+      "logo": "/images/EXPO/GameDev logos/death_and_taxes.png",
+      "developer": "Placeholder Gameworks",
+      "description": ""
+    },
+    {
+      "id": "deep-pixel-melancholy",
+      "name": "Deep Pixel Melancholy",
+      "logo": "/images/EXPO/GameDev logos/deep_pixel_melancholy.svg",
+      "developer": "ok/no",
+      "description": ""
+    },
+    {
+      "id": "delusional",
+      "name": "Delusional",
+      "logo": "/images/EXPO/GameDev logos/DELUSIONAL_logo.svg",
+      "developer": "Cyber Doc Rogue",
+      "description": ""
+    },
+    {
+      "id": "hardwired",
+      "name": "Hardwired",
+      "logo": "/images/EXPO/GameDev logos/Hardwired.png",
+      "developer": "Hardwired Studios",
+      "description": ""
+    },
+    {
+      "id": "hexwave",
+      "name": "HexWave",
+      "logo": "/images/EXPO/GameDev logos/Hexwave.png",
+      "developer": "HexWave Studios",
+      "description": ""
+    },
+    {
+      "id": "immortal",
+      "name": "IMMORTAL: And the death that follows",
+      "logo": "/images/EXPO/GameDev logos/Immortal.png",
+      "developer": "IMMORTAL Studios",
+      "description": ""
+    },
+    {
+      "id": "kalawindow",
+      "name": "Kalawindow",
+      "logo": "/images/EXPO/GameDev logos/Kalawindow.png",
+      "developer": "Kalawindow Studios",
+      "description": ""
+    },
+    {
+      "id": "kortel-1996",
+      "name": "Kortel 1996",
+      "logo": "/images/EXPO/GameDev logos/Korter1996.png",
+      "developer": "Kortel Studios",
+      "description": ""
+    },
+    {
+      "id": "midnight-souveneirs",
+      "name": "Midnight Souveneirs",
+      "logo": "/images/EXPO/GameDev logos/Midnight_Souveneirs.png",
+      "developer": "Midnight Studios",
+      "description": ""
+    },
+    {
+      "id": "nullis",
+      "name": "Nullis",
+      "logo": "/images/EXPO/GameDev logos/Nullis.png",
+      "developer": "Nullis Studios",
+      "description": ""
+    },
+    {
+      "id": "planet-hoarders",
+      "name": "Planet Hoarders",
+      "logo": "/images/EXPO/GameDev logos/Planet_hoarders.png",
+      "developer": "Planet Hoarders Studios",
+      "description": ""
+    },
+    {
+      "id": "realm-hearts",
+      "name": "Realm Hearts",
+      "logo": "/images/EXPO/GameDev logos/realm_hearts.png",
+      "developer": "Dreamaster",
+      "description": ""
+    },
+    {
+      "id": "season-of-solitude",
+      "name": "Season of Solitude",
+      "logo": "/images/EXPO/GameDev logos/Seasons_of_Solitude.png",
+      "developer": "Solitude Studios",
+      "description": ""
+    },
+    {
+      "id": "war-thorn",
+      "name": "War-thorn",
+      "logo": "/images/EXPO/GameDev logos/War_torn.png",
+      "developer": "War-thorn Studios",
+      "description": ""
+    }
+  ],
+  "universities": [
+    {
+      "id": "deltavr",
+      "name": "DeltaVR",
+      "logo": "/images/EXPO/ylikoolid/deltavr.png",
+      "university": "Tallinna Tehnikaülikool",
+      "description": ""
+    },
+    {
+      "id": "a-bottles-journey",
+      "name": "A Bottle's Journey",
+      "logo": "/images/EXPO/ylikoolid/a_bottles_journey.png",
+      "university": "Tallinna Tehnikaülikool",
+      "description": ""
+    },
+    {
+      "id": "magic-mineral",
+      "name": "Magic Mineral",
+      "logo": "/images/EXPO/ylikoolid/magic_mineral.png",
+      "university": "Tallinna Tehnikaülikool",
+      "description": ""
+    },
+    {
+      "id": "tiksu-toksu",
+      "name": "Tiksu-Toksu",
+      "logo": "/images/EXPO/ylikoolid/tiksu-toksu.jpg",
+      "university": "Tallinna Tehnikaülikool",
+      "description": ""
+    },
+    {
+      "id": "the-return",
+      "name": "The Return",
+      "logo": "/images/EXPO/ylikoolid/the_return.png",
+      "university": "Tartu Ülikool",
+      "description": ""
+    },
+    {
+      "id": "blastronaut", 
+      "name": "Blastronaut",
+      "logo": "/images/EXPO/ylikoolid/blastronaut.png",
+      "university": "Tartu Ülikool",
+      "description": ""
+    },
+    {
+      "id": "oh-crap",
+      "name": "Oh Crap!", 
+      "logo": "/images/EXPO/ylikoolid/oh_crap.png",
+      "university": "Tartu Ülikool",
+      "description": ""
+    },
+    {
+      "id": "psyrreal",
+      "name": "Psyrreal",
+      "logo": "/images/EXPO/ylikoolid/psyrreal.png", 
+      "university": "Tartu Ülikool",
+      "description": ""
+    },
+    {
+      "id": "void-of-hermes",
+      "name": "Void of Hermes",
+      "logo": "/images/EXPO/ylikoolid/void_of_hermes.png",
+      "university": "Tallinna Ülikool",
+      "description": ""
+    },
+    {
+      "id": "type-n-magic",
+      "name": "Type 'n Magic", 
+      "logo": "/images/EXPO/ylikoolid/type_n_magic.png",
+      "university": "Tallinna Ülikool",
+      "description": ""
+    },
+    {
+      "id": "packet-tracers",
+      "name": "Packet Tracers",
+      "logo": "/images/EXPO/ylikoolid/packet_tracers.png",
+      "university": "Tallinna Ülikool", 
+      "description": ""
+    },
+    {
+      "id": "dwarf-escape",
+      "name": "Dwarf Escape",
+      "logo": "/images/EXPO/ylikoolid/dwarf_escape.png",
+      "university": "Tallinna Ülikool",
+      "description": ""
+    },
+    {
+      "id": "wildings",
+      "name": "Wildings",
+      "logo": "/images/EXPO/ylikoolid/wildings.png",
+      "university": "Eesti Ettevõtluskõrgkool",
+      "description": ""
+    }
+  ]
+}