Modified home component by using Booatstarp Grid system

index.html

@@ -35,15 +35,18 @@
       </nav>
 
          <!--------------------- Home Component -------------------------->
-        <div class="container-fluid d-flex bg-dark text-light p-2" id="home" style="margin-top: 80px; margin-left: 10px; margin-right: 10px; border-radius: 10px;">
-          <img class="img-thumbnail" src="./assets/pic.jpeg" alt="Card image" style="width: 300px; height: 350px; object-fit: cover; ">
-          <div class="card-body m-3 p-3">
+
+         <div class="row bg-dark text-light p-3" style="position: relative;margin-top: 80px;margin-left: 10px; margin-right: 10px; border-radius: 10px;" id = 'home'>
+          <div class="col-sm-6">
+            <img class="img-thumbnail" src="./assets/pic.jpeg" alt="Card image" style="width: 300px; height: 350px; object-fit: cover; ">
+          </div>
+          <div class="col-sm-6">
             <h1 class="card-title">Nandan Yadav</h1>
             <p class="card-text">Hi! My name is Nandan, and I am a Computer Science student. I know you came here to view my profile, and I appreciate that! I am also excited to share more about myself with you. Go ahead and follow the links above to learn more about me.</p>
             <a href="mailto:[email protected]" class="btn btn-secondary" target="_blank">Email</a>
             <a href="https://github.com/Nandan-Yadav" class="btn btn-secondary" target="_blank">GitHub</a>
           </div>
-        </div>
+         </div>
 
         <!--------------------- Projects Component -------------------------->
         <div class="container-fluid bg-dark text-light p-3 " id="projects" style="margin-top: 30px; margin-left: 10px; margin-right: 10px; border-radius: 10px;">