Final Version!

Completed the HTML, CSS and JS.
Improved readability and scalbility.
Added an icon.

index.html

@@ -10,6 +10,7 @@
     <meta name="robots" content="index, follow">
     <meta name="theme-color" content="#007bff">
     <title>Portfolio</title>
+    <link rel="icon" type="image/png" href="assets/Icon.png">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link href="styles.css" rel="stylesheet">
     <script defer src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
@@ -93,7 +94,7 @@ <h2 class="display-6"><strong>My Education!</strong></h2>
 
                 <li class="list-inline-item" data-bs-toggle="modal" data-bs-target="#school1Modal" id="school1">
                     <div class="schoolMain">
-                        <h3><strong>Senior Highschool</strong></h3>
+                        <h3 id="school1Title"><strong>Senior Highschool</strong></h3>
                         <p>San Diego Parochial School</p>
                     </div>
                     <div class="modal fade" id="school1Modal" tabindex="-1" aria-labelledby="school1ModalLabel" aria-hidden="true">
@@ -135,7 +136,7 @@ <h1 class="display-6"><strong>San Diego Parochial School</strong><br><br></h1>
 
                 <li class="list-inline-item" data-bs-toggle="modal" data-bs-target="#school2Modal" id="school2">
                     <div class="schoolMain">
-                        <h3><strong>Highschool</strong></h3>
+                        <h3 id="school2Title"><strong>Highschool</strong></h3>
                         <p>Obando National Highschool</p>
                     </div>
                     <div class="modal fade" id="school2Modal" tabindex="-1" aria-labelledby="school2ModalLabel" aria-hidden="true">
@@ -184,7 +185,7 @@ <h1 class="display-6"><strong>Obando National Highschool</strong><br><br></h1>
 
                 <li class="list-inline-item" data-bs-toggle="modal" data-bs-target="#school3Modal" id="school3">
                     <div class="schoolMain">
-                        <h3><strong>Elementary</strong></h3>
+                        <h3 id="school3Title"><strong>Elementary</strong></h3>
                         <p>Obando Central School</p>
                     </div>
                     <div class="modal fade" id="school3Modal" tabindex="-1" aria-labelledby="school3ModalLabel" aria-hidden="true">

script.js

@@ -26,21 +26,39 @@ createApp({
       let school2 = document.querySelector('#school2');
       let school3 = document.querySelector('#school3');
 
+      let school1Title = document.querySelector('#school1Title');
+      let school2Title = document.querySelector('#school2Title');
+      let school3Title = document.querySelector('#school3Title');
+
       school1.style.height = 'auto';
       school2.style.height = 'auto';
       school3.style.height = 'auto';
 
+      school1Title.style.height = 'auto';
+      school2Title.style.height = 'auto';
+      school3Title.style.height = 'auto';
+
       setTimeout(() => {
         let school1Height = school1.offsetHeight;
         let school2Height = school2.offsetHeight;
         let school3Height = school3.offsetHeight;
 
-        let maxHeight = Math.max(school1Height, school2Height, school3Height);
+        let school1TitleHeight = school1Title.offsetHeight;
+        let school2TitleHeight = school2Title.offsetHeight;
+        let school3TitleHeight = school3Title.offsetHeight;
 
-        school1.style.height = `${maxHeight}px`;
-        school2.style.height = `${maxHeight}px`;
-        school3.style.height = `${maxHeight}px`;
-      }, 100);
+        let schoolMaxHeight = Math.max(school1Height, school2Height, school3Height);
+
+        let schoolTitleMaxHeight = Math.max(school1TitleHeight, school2TitleHeight, school3TitleHeight);
+
+        school1.style.height = `${schoolMaxHeight}px`;
+        school2.style.height = `${schoolMaxHeight}px`;
+        school3.style.height = `${schoolMaxHeight}px`;
+
+        school1Title.style.height = `${schoolTitleMaxHeight}px`;
+        school2Title.style.height = `${schoolTitleMaxHeight}px`;
+        school3Title.style.height = `${schoolTitleMaxHeight}px`;
+      }, 50);
     };
 
     // This part is about scrolling adjustment

styles.css

@@ -223,12 +223,6 @@ section h3 {
     color: #f0f0f094;
 }
 
-.schoolMain {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 50%;
-}
-
 #school1ModalContent, #school2ModalContent, #school3ModalContent {
     color: #000000;
 }