From 62e9cf0b4d7cba7a8cb0f1d9aa7dbe10bdc9d7e6 Mon Sep 17 00:00:00 2001
From: Rayhan <rayhan.hassou@etu.uca.fr>
Date: Wed, 26 Jun 2024 11:41:59 +0200
Subject: [PATCH] add modals

---
 Sources/index.html | 131 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 125 insertions(+), 6 deletions(-)

diff --git a/Sources/index.html b/Sources/index.html
index 0b376f1..e9f6320 100644
--- a/Sources/index.html
+++ b/Sources/index.html
@@ -123,7 +123,7 @@
                     <div class="position-relative overflow-hidden mb-2">
                         <img class="img-fluid rounded w-100" src="img/portfolio-1.png" alt="">
                         <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
-                            <a href="img/portfolio-1.jpg" data-lightbox="portfolio">
+                            <a href="#" data-toggle="modal" data-target="#portfolioModal1">
                                 <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
                             </a>
                         </div>
@@ -133,7 +133,7 @@
                     <div class="position-relative overflow-hidden mb-2">
                         <img class="img-fluid rounded w-100" src="img/portfolio-2.png" alt="">
                         <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
-                            <a href="img/portfolio-2.jpg" data-lightbox="portfolio">
+                            <a href="#" data-toggle="modal" data-target="#portfolioModal2">
                                 <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
                             </a>
                         </div>
@@ -143,7 +143,7 @@
                     <div class="position-relative overflow-hidden mb-2">
                         <img class="img-fluid rounded w-100" src="img/portfolio-3.jpg" alt="">
                         <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
-                            <a href="img/portfolio-3.jpg" data-lightbox="portfolio">
+                            <a href="#" data-toggle="modal" data-target="#portfolioModal3">
                                 <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
                             </a>
                         </div>
@@ -153,7 +153,7 @@
                     <div class="position-relative overflow-hidden mb-2">
                         <img class="img-fluid rounded w-100" src="img/portfolio-4.jpg" alt="">
                         <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
-                            <a href="img/portfolio-4.jpg" data-lightbox="portfolio">
+                            <a href="#" data-toggle="modal" data-target="#portfolioModal4">
                                 <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
                             </a>
                         </div>
@@ -163,7 +163,7 @@
                     <div class="position-relative overflow-hidden mb-2">
                         <img class="img-fluid rounded w-100" src="img/portfolio-5.png" alt="">
                         <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
-                            <a href="img/portfolio-5.jpg" data-lightbox="portfolio">
+                            <a href="#" data-toggle="modal" data-target="#portfolioModal5">
                                 <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
                             </a>
                         </div>
@@ -173,7 +173,7 @@
                     <div class="position-relative overflow-hidden mb-2">
                         <img class="img-fluid rounded w-100" src="img/portfolio-6.jpg" alt="">
                         <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
-                            <a href="img/portfolio-6.jpg" data-lightbox="portfolio">
+                            <a href="#" data-toggle="modal" data-target="#portfolioModal6">
                                 <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
                             </a>
                         </div>
@@ -184,6 +184,125 @@
     </div>
     <!-- Portfolio End -->
 
+    <!-- Modal HTML -->
+<div class="modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="portfolioModalLabel">Craft#</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p>A web application made in blazor in the theme of Minecraft, in which users will be able to list their item, crafter, buy...</p>
+        </div>
+        <div class="modal-footer">
+            <a href="https://codefirst.iut.uca.fr/git/rayhan.hassou/Projet_Blazor" target="_blank" class="btn btn-primary">Git repository</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+<div class="modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="portfolioModalLabel">JustMusic</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p>JustMusic is a collaborative for-profit project for Android/IOS using Dart/flutter technology carried out by 4 BUT students.
+
+            It is a social network so the user can post and comment on posts. He will be able to subscribe to other users to see their posts on his news feed.</p>
+        </div>
+        <div class="modal-footer">
+            <a href="https://codefirst.iut.uca.fr/git/justDEV/justMusic" target="_blank" class="btn btn-primary">Git repository</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="portfolioModalLabel">ToDoList</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p>Realize a PHP project consisting of making a To do List, which will contain visitors, users or administrator.</p>
+        </div>
+        <div class="modal-footer">
+            <a href="https://codefirst.iut.uca.fr/git/rayhan.hassou/Projet_ToDoList_Php" target="_blank" class="btn btn-primary">Git repository</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="portfolioModalLabel">LeftOvers</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p>A mobile application (IOS/Android) that enables users to choose ingredients in order to cook. The app will return a list of adapted recipes.</p>
+        </div>
+        <div class="modal-footer">
+            <a href="https://codefirst.iut.uca.fr/git/Sae_LeftOvers" target="_blank" class="btn btn-primary">Git repository</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="portfolioModalLabel">Kotanga</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p>Our app is called Kotanga which means counting in Lingala.
+            It aims to facilitate payments between friends, within a group of people such as collocates, families, ...</p>
+        </div>
+        <div class="modal-footer">
+            <a href="https://gitlab.com/nathanverdier/kotanga" target="_blank" class="btn btn-primary">Git repository</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-labelledby="portfolioModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="portfolioModalLabel">Dou Shou Qi</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <p>Dou Shou Qi, or "Jungle Game", is a Chinese board game where two players move pieces representing animals on a 7x9 square board. Each animal has a different strength and can capture other animals according to a specific hierarchy, except the Rat that can capture the Elephant. The goal is to move one of his pieces into the opponent’s lair, while using the rivers and special abilities of the animals to capture the opponent’s pieces and defend his own lair.</p>
+        </div>
+        <div class="modal-footer">
+            <a href="https://codefirst.iut.uca.fr/git/remi.regnault/DouShouQi_App" target="_blank" class="btn btn-primary">Git repository</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+
 
     <!-- Skill Start -->
     <div class="container-fluid py-5" id="skill">