All set (templated)

SPLATS/base.css

@@ -459,4 +459,5 @@ main {
 	}
 	.content__inner {
 		height: auto;
-	}
+	}
+}

SPLATS/main.js

@@ -273,6 +273,7 @@
 
 
 
+
 // Optional: click background to close
     window.addEventListener('click', function (event) {
         const modals = document.querySelectorAll('.modal');

index.html

@@ -158,35 +158,69 @@ <h2>Portfolio</h2>
 			</div>
 			<div class="content content--reveal">
 				<div class="content__inner">
+
 					<h2 class="content__title">Certifications</h2>
-					<h3 class="content__subtitle">The rapid handle injects into the bashful lift.</h3>
+					<h3 class="content__subtitle">"We are what we repeatedly do. Excellence, then, is not an act, but a habit." — Aristotle</h3>
 
 					<div class="certifications">
 						<div class="cert-card" onclick="openCertModal('cert1')">
 							<img src="https://upload.wikimedia.org/wikipedia/commons/5/50/Oracle_logo.svg" alt="Oracle Badge">
 							<h3>OCI Foundations</h3>
 						</div>
+
 						<div id="cert1" class="modal">
 							<div class="modal-content">
 								<span class="close" onclick="closeCertModal('cert1')">&times;</span>
 								<h2>Orcale Cloud Infrastructure 2025 Certified Foundations Associate</h2>
-								<img src="/imgs/oracle.jpg" alt="OCI CERT" style="width: 100%; border-radius: 8px; margin-top: 1rem;">
+								<div class="container">
+									<img src="/imgs/oracle.jpg" class="description"  alt="OCI CERT" style="width: 100%; border-radius: 8px; margin-top: 1rem;">
+									<div class="overlay">
+										<div class="text">Familiarity with core OCI services including Compute, Storage, Networking, Database, Developer, Analytics, AI, Observability and Hybrid services</div>
+									</div>
+								</div>
+
 								<p>Issued by Oracle in January 2025</p>
-								<a href="https://example.com/verify" target="_blank">Verify Credential</a>
+								<a href="https://catalog-education.oracle.com/ords/certview/sharebadge?id=5D967EDBD2AC7CE3A378509F0B0ADD4FA7DBBA6C7D22471FAE84FC08F045617E" target="_blank">Verify Credential</a>
 							</div>
 						</div>
 
 						<div class="cert-card" onclick="openCertModal('cert2')">
 							<img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Cisco_logo_blue_2016.svg" alt="Oracle Badge">
-							<h3>CISCO Networking</h3>
+							<h3>CISCO Wireless Essentials </h3>
 						</div>
 						<div id="cert2" class="modal">
 							<div class="modal-content">
 								<span class="close" onclick="closeCertModal('cert2')">&times;</span>
+								<h2>CISCO Wireless Essentials</h2>
+								<div class="container">
+									<img src="/imgs/ccna.png" class="description" alt="OCI CERT" style="width: 100%; border-radius: 8px; margin-top: 1rem;">
+									<div class="overlay">
+										<div class="text">Routing, Access Connectivity, Wireless LAN Controllers, High Availability, First-hop Redundancy, Switching Protocols, IP services, Access Security</div>
+									</div>
+								</div>
+
+								<p>Issued by CISCO in May 2023</p>
+								<a href="https://www.netacad.com/courses/ccna-switching-routing-wireless-essentials?courseLang=en-US" target="_blank">Verify Credential</a>
+							</div>
+						</div>
+
+						<div class="cert-card" onclick="openCertModal('cert3')">
+							<img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Cisco_logo_blue_2016.svg" alt="Oracle Badge">
+							<h3>CISCO Networking </h3>
+						</div>
+						<div id="cert3" class="modal">
+							<div class="modal-content">
+								<span class="close" onclick="closeCertModal('cert3')">&times;</span>
 								<h2>CISCO Networking</h2>
-								<img src="/imgs/ccna.png" alt="OCI CERT" style="width: 100%; border-radius: 8px; margin-top: 1rem;">
-								<p>Issued by CISCO in March & May 2023</p>
-								<a href="https://example.com/verify" target="_blank">Verify Credential</a>
+								<div class="container">
+									<img src="/imgs/cisco networking.png" class="description" alt="OCI CERT" style="width: 100%; border-radius: 8px; margin-top: 1rem;">
+									<div class="overlay">
+										<div class="text">IP Subnetting, IPv4 And IPv6 , Ethernet, IP connectivity, Addressing, Network Fundamentals, IP services, Switching, Security Fundamentals</div>
+									</div>
+								</div>
+
+								<p>Issued by CISCO in March 2023</p>
+								<a href="https://www.netacad.com/courses/ccna-introduction-networks?courseLang=en-US" target="_blank">Verify Credential</a>
 							</div>
 						</div>
 					</div>

styles.css

@@ -231,7 +231,7 @@ body.fade-out {
   margin-bottom: 10px;
 }
 
-{/* Modal Styling */
+/* Modals  */
 .modal {
   display: none;
   position: fixed;
@@ -246,8 +246,8 @@ body.fade-out {
   background: white;
   margin: 10% auto;
   padding: 2rem;
-  width: 80%;
-  max-width: 500px;
+  width: 100%;
+  max-width: 650px;
   border-radius: 10px;
   transform: scale(0.8);
   opacity: 0;
@@ -261,7 +261,8 @@ body.fade-out {
 }
 
 .modal-content img {
-  width: 100%;
+  max-width: 100%;
+  height: auto;
   border-radius: 8px;
   margin-top: 1rem;
 }
@@ -276,5 +277,34 @@ body.fade-out {
 .modal-content a:hover {
   text-decoration: underline;
 }
-}
 
+.overlay {
+  border-radius: 8px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: auto;
+  height: auto;
+  position: absolute;
+  max-width: 100%;
+  height: auto;
+  margin-top: 9rem;
+  margin-bottom: 9rem;
+  opacity: 0;
+  transition: .5s ease;
+  backdrop-filter: blur(2px);
+}
+.container:hover .overlay {
+  opacity: 1;
+}
+.text {
+  font-weight: 700;
+  color: rgb(0, 0, 0);
+  font-size: 25px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}