📦 Updated

Author: CSFelix

index.html

@@ -436,6 +436,19 @@ <h2 class="skillsTitle">Kaggle</h2>
 					    <img src="./assets/icons/kaggle.svg" class="character" alt="Kaggle Notebooks 2" width="200px" height="200px" />
 					</div>
 
+					<!--
+						*******************
+						** Live Projects **
+						*******************
+					-->
+					<div id="liveProjectsBtn" class="skillsCard">
+						<div class="wrapper">
+					      <img src="./assets/icons/projects/cards/website.avif" class="cover-image" alt="Live Projects 1" width="200px" height="200px" />
+					    </div>
+					    <h2 class="skillsTitle">Live Projects</h2>
+					    <img src="./assets/icons/world-wide-web.avif" class="character" alt="Live Projects 2" width="200px" height="200px" />
+					</div>
+
 					<!--
 						*******************
 						** ML Algorithms **
@@ -756,8 +769,40 @@ <h3>Coming soon...</h3>
 		    				<span class="badge classifierBadge">Classification</span>
 		    			</div>
 		    		</a>
+		    	</div>
+		    </div>
+		  </div>
+
+		</div>
 
-		    		<!-- Sixth Project -->
+		<!-- Live Projects -->
+		<div id="liveProjectsModal" class="modal">
+		  
+		  <div class="modalContent">
+
+		  	<!-- close button -->
+		    <span id="liveProjectsClose" class="close">&times;</span>
+
+		    <!-- title -->
+		    <div class="modalTitle">
+		    	<img src="./assets/icons/world-wide-web.avif" alt="Live Projects Logo" width="200px" height="200px" />
+		    	&nbsp
+		    	<span>Live Projects</span>
+		    </div>
+
+		    <br />
+
+		    <!-- items -->
+		    <div class="modalItems">
+		    	<video width="250px" height="auto" loop muted autoplay>
+					<source src="./assets/stickers/robot/projects.mp4" type="video/mp4" />
+				</video>
+		    	&nbsp
+
+		    	<!-- cards -->
+		    	<div class="cardsGroup">
+
+		    		<!-- First Project -->
 		    		<a href="https://github.com/CSFelix/simple-chat-bot" target="_blank">
 		    			<div class="card" data-tilt>
 		    				<img src="./assets/icons/projects/chatbot.avif" alt="Chat Bot" width="200px" height="200px">
@@ -768,6 +813,28 @@ <h3>Coming soon...</h3>
 		    				<span class="badge deepLearningBadge">Natural Language Processing</span>
 		    			</div>
 		    		</a>
+
+		    		<!-- Second Project -->
+		    		<a href="https://csfelix.github.io/audio-to-text" target="_blank">
+		    			<div class="card" data-tilt>
+		    				<img src="./assets/icons/projects/audio-message.avif" alt="Chat Bot" width="200px" height="200px">
+
+		    				<span>Audio Text Extractor</span>
+
+		    				<span class="badge deepLearningBadge">Natural Language Processing</span>
+		    			</div>
+		    		</a>
+
+		    		<!-- Third Project -->
+		    		<a href="https://csfelix.github.io/extract-text-from-images" target="_blank">
+		    			<div class="card" data-tilt>
+		    				<img src="./assets/icons/projects/analytics.avif" alt="Chat Bot" width="200px" height="200px">
+
+		    				<span>Image Text Extractor</span>
+
+		    				<span class="badge deepLearningBadge">Natural Language Processing</span>
+		    			</div>
+		    		</a>
 		    	</div>
 		    </div>
 		  </div>