fix: fixing responsiveness and adjusting introduction

Author: Berserker134

assets/MagFin/CertificateOfAppreciation.jpeg

@@ -24,7 +24,7 @@
           <h1 class="name">Jonathan Putra</h1>
           <h2 class="role">Back-end Engineer</h2>
           <p class="tagline">
-            Backend Engineer with around 3 years of experience building and
+            Backend Engineer with 3 years of experience building and
             maintaining web applications and microservices. Specialized in
             backend systems, API design, and databases using Golang and
             GraphQL. Hands-on experience working on content management systems
@@ -34,7 +34,7 @@ <h2 class="role">Back-end Engineer</h2>
           </p>
           <ul class="social-list" aria-label="Social media">
             <li>
-              <a href="https://github.com/yourusername" aria-label="GitHub" target="_blank" rel="noreferrer">
+              <a href="https://github.com/JonathanPutra134" aria-label="GitHub" target="_blank" rel="noreferrer">
                 <svg class="icon" viewBox="0 0 16 16" aria-hidden="true">
                   <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53
                             5.47 7.59.4.07.55-.17.55-.38
@@ -64,7 +64,7 @@ <h2 class="role">Back-end Engineer</h2>
               </a>
             </li>
             <li>
-              <a href="">
+              <a href="https://www.linkedin.com/in/jonathan-putra-43b928265/">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="icon"
                   aria-hidden="true">
                   <path
@@ -74,7 +74,7 @@ <h2 class="role">Back-end Engineer</h2>
               </a>
             </li>
             <li>
-              <a href="">
+              <a href="https://www.instagram.com/jonathanputra9791/">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="currentColor" class="icon"
                   aria-hidden="true">
                   <path
@@ -147,9 +147,10 @@ <h2>CERTIFICATE</h2>
     <div class="main-content">
       <section id="about" class="about-carousel">
         <div class="carousel">
-          <div class="about-slide active" style="
-                background-image: url('./assets/about-background.png');
-              ">
+          <div class="about-slide active">
+            <div class="about-slide-media" style="
+                  background-image: url('./assets/about-background.png');
+                "></div>
             <div class="about-slide-content">
               <h1>BIOGRAPHY</h1>
               <h3>
@@ -160,7 +161,8 @@ <h3>
             </div>
           </div>
 
-          <div class="about-slide career-slide" style="background-image: url('./assets/about-2.png')">
+          <div class="about-slide career-slide">
+            <div class="about-slide-media" style="background-image: url('./assets/about-2.png')"></div>
             <div class="about-slide-content">
               <h1>CAREER DIRECTION</h1>
               <h3>
@@ -173,7 +175,8 @@ <h3>
             </div>
           </div>
 
-          <div class="about-slide" style="background-image: url('./assets/about-3.png')">
+          <div class="about-slide">
+            <div class="about-slide-media" style="background-image: url('./assets/about-3.png')"></div>
             <div class="about-slide-content">
               <h1>PROFESSIONAL EXPERIENCE</h1>
               <h3>
@@ -185,7 +188,8 @@ <h3>
             </div>
           </div>
 
-          <div class="about-slide" style="background-image: url('./assets/about-4.jpg')">
+          <div class="about-slide">
+            <div class="about-slide-media" style="background-image: url('./assets/about-4.jpg')"></div>
             <div class="about-slide-content">
               <h1>EDUCATION</h1>
               <h3>
@@ -195,7 +199,8 @@ <h3>
             </div>
           </div>
 
-          <div class="about-slide" style="background-image: url('./assets/about-5.png')">
+          <div class="about-slide">
+            <div class="about-slide-media" style="background-image: url('./assets/about-5.png')"></div>
             <div class="about-slide-content">
               <h1>PROJECTS</h1>
               <h3>
@@ -672,10 +677,10 @@ <h2>MagFin</h2>
                       <span>MagFin</span>
                     </button>
 
-                    <button class="project-thumb" type="button" data-full="./assets/MagFin/certificate.png"
+                    <button class="project-thumb" type="button" data-full="./assets/MagFin/CertificateOfAppreciation.jpeg"
                       data-alt="Evaluation and final recommendation output" aria-selected="false">
-                      <img src="./assets/MagFin/certificate.png" alt="" />
-                      <span>Certificate/span>
+                      <img src="./assets/MagFin/CertificateOfAppreciation.jpeg" alt="" />
+                      <span>Certificate</span>
                     </button>
                   </div>
                   <div class="overlay" hidden>