feat: Add new project modals for Todo's App, WiFi QR Code Generator A…

…pp, and ChatGPT Clone App

index.html

@@ -262,6 +262,27 @@ <h3>Projects</h3>
             alt="" />
         </a>
       </div>
+      <div class="column folio-item">
+        <a href="#modal-17" class="folio-item__thumb" aria-label="project img link">
+          <img src="assets/images/projects/todos-app.webp"
+            srcset="assets/images/projects/todos-app.webp, assets/images/projects/todos-app.webp"
+            alt="" />
+        </a>
+      </div>
+      <div class="column folio-item">
+        <a href="#modal-18" class="folio-item__thumb" aria-label="project img link">
+          <img src="assets/images/projects/wifi-qr-code-generator-app.webp"
+            srcset="assets/images/projects/wifi-qr-code-generator-app.webp, assets/images/projects/wifi-qr-code-generator-app.webp"
+            alt="" />
+        </a>
+      </div>
+      <div class="column folio-item">
+        <a href="#modal-19" class="folio-item__thumb" aria-label="project img link">
+          <img src="assets/images/projects/chatgpt-clone-app.webp"
+            srcset="assets/images/projects/chatgpt-clone-app.webp, assets/images/projects/chatgpt-clone-app.webp"
+            alt="" />
+        </a>
+      </div>
     </div>
     <div id="modal-01" hidden>
       <div class="modal-popup">
@@ -589,6 +610,60 @@ <h5>Expense Tracker App</h5>
           aria-label="project link">Project link</a>
       </div>
     </div>
+    <div id="modal-17" hidden>
+      <div class="modal-popup">
+        <img src="assets/images/projects/todos-app.webp" alt="" />
+        <div class="modal-popup__desc">
+          <h5>Todo's App</h5>
+          <p>
+          <p>
+            This is an Todo's App built using Angular. It allows users to create, read, update, and delete todo's. The app includes features like adding, editing, and deleting todo's. Backend is built using Node.js and MongoDB.
+          </p>
+          </p>
+          <ul class="modal-popup__cat">
+            <li>MEAN Stack</li>
+          </ul>
+        </div>
+        <a href="https://github.com/manthanank/todos-app" class="modal-popup__details"
+          aria-label="project link">Project link</a>
+      </div>
+    </div>
+    <div id="modal-18" hidden>
+      <div class="modal-popup">
+        <img src="assets/images/projects/wifi-qr-code-generator-app.webp" alt="" />
+        <div class="modal-popup__desc">
+          <h5>WiFi QR Code Generator App</h5>
+          <p>
+          <p>
+            This is an WiFi QR Code Generator App built using Angular. It allows users to generate QR codes for WiFi networks. The app includes features like generating QR codes for WiFi networks.
+          </p>
+          </p>
+          <ul class="modal-popup__cat">
+            <li>Angular</li>
+          </ul>
+        </div>
+        <a href="https://github.com/manthanank/wifi-qr-code-generator-angular-app" class="modal-popup__details"
+          aria-label="project link">Project link</a>
+      </div>
+    </div>
+    <div id="modal-19" hidden>
+      <div class="modal-popup">
+        <img src="assets/images/projects/chatgpt-clone-app.webp" alt="" />
+        <div class="modal-popup__desc">
+          <h5>ChatGPT Clone App</h5>
+          <p>
+          <p>
+            This is an ChatGPT Clone App built using Angular. It allows users to chat with AI. The app includes features like chatting with AI. Backend is built using Node.js and MongoDB.
+          </p>
+          </p>
+          <ul class="modal-popup__cat">
+            <li>MEAN Stack</li>
+          </ul>
+        </div>
+        <a href="https://github.com/manthanank/chatgpt-clone-app" class="modal-popup__details"
+          aria-label="project link">Project link</a>
+      </div>
+    </div>
   </section>
   <section id="contact" class="s-contact target-section">
     <div class="row s-contact__header">