New projects page (#32)

* Projects revamping

* Rearrange projects

content/projects/_index.en.md

@@ -14,10 +14,53 @@ If you want to add yours, you can fork the <a href="https://github.com/diambra/d
 
 #### Project List
 
-<div style="font-size:1.125rem;">
+<div>
+  <figure style="margin-top:20px;margin-bottom:20px; margin-right:2%; margin-left:3%; float:left; width:45.0%; border-radius: 10px; border: 1px solid #cccccc;  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);">
+  <div style="overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px;">
+   <a href="./llmcolosseum/"><img style="margin:0; margin-bottom: 19px;" src="../../images/projects/llmColosseum.gif"/></a>
+   <figcaption align="middle">
+      <div style="text-align: center; margin-bottom:20px">
+        <a href="./llmcolosseum/" style="font-size:1.75rem;">LLM Colosseum</a><br/><br/>
+        Evaluate Large Language Models (LLM) quality by having them fight in realtime in Street Fighter III. Who is the best? OpenAI or MistralAI? Let them fight! Open source code and ranking.
+      </div>
+   </figcaption>
+   </div>
+  </figure>
 
-- <a href="./marlleaguetraining/">Multi Agent RL - League Training</a>
-- <a href="./rlztournament/">RLZ Tournament</a>
-- <a href="./gamepainter/">Game Painter</a>
-- <a href="./llmcolosseum">LLM Colosseum</a>
+  <figure style="margin-top:20px;margin-bottom:20px; margin-right:auto; margin-left:2%; float:left; width:45.0%; border-radius: 10px; border: 1px solid #cccccc;  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);">
+  <div style="overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px;">
+   <a href="./marlleaguetraining/"><img style="margin:0; margin-bottom: 20px;" src="../../images/projects/marl.gif"/></a>
+   </div>
+   <figcaption align="middle">
+   <div style="text-align: center; margin-bottom:20px">
+    <a href="./marlleaguetraining/" style="font-size:1.75rem;">MARL - League Training</a><br/><br/>
+        This project is a proof of concept that customizes Tencent AI TLeague, a framework for Multi-Agent Reinforcement Learning based on distributed competitive self-play, and applies it to DIAMBRA Environments.
+   </div>
+   </figcaption>
+  </figure>
 </div>
+<div>
+  <figure style="margin-top:20px;margin-bottom:20px; margin-right:2%; margin-left:3%; float:left; width:45.0%; border-radius: 10px; border: 1px solid #cccccc;  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);">
+  <div style="overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px;">
+   <a href="./rlztournament/"><img style="margin:0; margin-bottom: 20px;" src="../../images/projects/rlzTournament.jpg"/></a>
+   <figcaption align="middle">
+      <div style="text-align: center; margin-bottom:20px">
+        <a href="./rlztournament/" style="font-size:1.75rem;">RLZ Tournament</a><br/><br/>
+        In 2021, we organized the very first AI Tournament leveraging DIAMBRA. It has been organized in collaboration with Reinforcement Learning Zurich (RLZ), a community of researchers, data scientists and...
+      </div>
+   </figcaption>
+   </div>
+  </figure>
+
+  <figure style="margin-top:20px;margin-bottom:20px; margin-right:auto; margin-left:2%; float:left; width:45.0%; border-radius: 10px; border: 1px solid #cccccc;  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);">
+  <div style="overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px;">
+   <a href="./gamepainter/"><img style="margin:0; margin-bottom: 20px;" src="../../images/projects/gamePainter.jpg"/></a>
+   </div>
+   <figcaption align="middle">
+   <div style="text-align: center; margin-bottom:20px">
+   <a href="./gamepainter/" style="font-size:1.75rem;">Game Painter</a><br/><br/>
+   This project is an experiment that applies in real-time the style of famous paintings to popular fighting retro games, which are provided as Reinforcement Learning environments by DIAMBRA.
+   </div>
+   </figcaption>
+  </figure>
+</div>

content/projects/llmColosseum/_index.en.md

@@ -1,12 +1,12 @@
 ---
-title: MARL - League Training
-weight: 10
+title: LLM Colosseum
+weight: 5
 math: true
 ---
 
 <!-- Image of the project -->
 <figure style="margin-bottom:0px; margin-top:0px; margin-right:auto; margin-left:auto; width: 100%;">
-  <img src="../../images/projects/llmColosseum.jpg" style="margin-top:0px;margin-bottom:30px;">
+  <img src="../../images/projects/llmColosseum_original.gif" style="margin-top:0px;margin-bottom:30px;">
 </figure>
 
 ##### Project summary <!-- Brief description of the project -->
@@ -28,6 +28,6 @@ LLMs are different from Reinforcement Learning (RL) models, that are based on ma
 
 - GitHub Repo: <a href="https://github.com/OpenGenerativeAI/llm-colosseum/tree/main" target="_blank">https://github.com/OpenGenerativeAI/llm-colosseum/tree/main</a>
 
-##### Sponsors <!-- Add sponsors (if any), with optional links to their website, linkedin page, etc)
+##### Sponsors <!-- Add sponsors (if any), with optional links to their website, linkedin page, etc) -->
 
 This project was made by teams from <a href="https://phospho.ai" target="_blank">phospho</a> and <a href="https://www.quivr.app" target="_blank">Quivr</a>.