diff --git a/css/global.css b/css/global.css
index 994a3e3..41a0ffb 100644
--- a/css/global.css
+++ b/css/global.css
@@ -2,7 +2,6 @@
 
 * {
   font-family: "JetBrains Mono", monospace;
-  scroll-behavior: smooth;
 }
 .dm-sans {
   font-family: "DM Sans", sans-serif;
diff --git a/css/profile.css b/css/profile.css
index f6fe7d0..7a02d49 100644
--- a/css/profile.css
+++ b/css/profile.css
@@ -33,7 +33,7 @@
   top: 20px;
   left: 18px;
   max-width: 250px;
-  transform: translateZ(19px);
+  transform: translateZ(15px);
   border-radius: 5px;
   transition: 0.5s;
   opacity: 0;
@@ -205,8 +205,10 @@
 
 /* TODO: Project */
 .project .card {
-  /* box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); */
   transform-style: preserve-3d;
+  width: 18rem;
+  height: 29rem;
+  margin-left: -15%;
 }
 
 .project .card .project-pics {
@@ -226,3 +228,10 @@
   width: 20rem;
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
 }
+
+@media screen and (max-width: 768px) {
+  /* TODO: Project */
+.project .card {
+  margin-left: none;
+}
+}
diff --git a/css/text.css b/css/text.css
index 69ddcab..623b808 100644
--- a/css/text.css
+++ b/css/text.css
@@ -10,6 +10,9 @@ mark {
 .typewrite1 {
   font-family: monospace;
   font-size: 20px;
+  line-height: 1.2;
+  margin: 0 auto;
+  margin-left: -10px;
 }
 
 .typewrite1 h5 {
diff --git a/index.html b/index.html
index ea950e5..31b22a1 100644
--- a/index.html
+++ b/index.html
@@ -7,64 +7,61 @@
   <title>Muhammad Rifzkhy All Fhayed</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
-    <script src="https://unpkg.com/scrollreveal@4"></script>
-    <script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script>
-    <link href="./css/text.css" rel="stylesheet">
-    <link href="./css/global.css" rel="stylesheet"></link>
-  <link href="./css/profile.css" rel="stylesheet"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+  <script src="https://unpkg.com/scrollreveal@4"></script>
+  <script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script>
+  <link href="./css/text.css" rel="stylesheet">
+  <link href="./css/global.css" rel="stylesheet">
+  </link>
+  <link href="./css/profile.css" rel="stylesheet">
+  </link>
   <meta name="google-site-verification" content="fJfREGHZ-FD0AbIbpmXr2rZXyuHTO99H6cLlTm8s-oA" />
 </head>
+
 <body>
   <!-- TODO: Landing page -->
-    <div id="loader" class="center"></div>
+  <div id="loader" class="center"></div>
   <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="bi bi-chevron-double-up"></i></button>
   <div class="content">
-    
+
     <section>
       <div align="center">
-             <pre class="typewrite1 marks"><p></p>
+        <pre class="typewrite1 marks"><p></p>
    ____  _ ____ ____ _  __ _   _ __  __
   | __ \| |  __|_   | |/ /| |_| |\ \/ /
  | `` /| | `_| / _/| . ( |  _  | \  /
 |_|\_\|_|_|  |____|_|\_\|_| |_| /_/
 
-<h5>[ PORTFOLIO ]</h5></pre>
-        </div> 
+</pre>
+        <h5 class="pt-3">[ PORTFOLIO ]</h5>
+      </div>
     </section>
     <!-- TODO: About Me -->
     <section class="about" style="background-color: #101010; color: #e3e3e3;">
       <div class="jumbotron p-3" align="center">
-        <div class="title appear" >
+        <div class="title py-3 appear">
           <h1 class="dm-sans  marks">About Me</h1>
         </div>
-        <div class="row pt-3 justify-content-center">
+        <div class="row justify-content-center">
           <div class="col-10 col-md-5 appear">
             <h3 class="typewrite2 appear">MUHAMMAD RIFZKHY ALL FHAYED</h3>
             <p class="typewrite3 pt-3 appear"></p>
-            </div>
+          </div>
           <div class="col-0 col-md-5 appear">
             <div class="card" data-tilt>
               <img loading="lazy" src="./src/rif-ascii.webp" class="profile-pics-ascii">
               <img loading="lazy" src="./src/rif.webp" class="profile-pics">
               <div class="card-body">
                 <button type="button" class="btn btn-secondary profile" style="width: 250px;" disabled>Profile</button>
-                <button type="button" class="btn btn-secondary mt-3 email" style="width: 250px;" disabled><i class="bi bi-envelope"></i> rif@jad.li</button>
+                <button type="button" class="btn btn-secondary mt-3 email" style="width: 250px;" disabled><i
+                    class="bi bi-envelope"></i> rif@jad.li</button>
               </div>
-              <div class="card-signature"><svg
-                width="150"
-                height="82"
-                viewBox="0 0 385 230"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  class="signature"
-                  d="M181 42C184.817 62.9087 189.365 82.9195 196.722 102.889C202.341 118.139 208.841 133.255 213 149C215.544 158.632 218.026 169.29 219.556 179.111C221.083 188.918 222.92 199.028 223.778 208.889C224.19 213.635 224.935 219.616 222.5 223.944C220.901 226.787 218.892 228.751 215.611 227.111C212.15 225.381 211.521 224.529 208.944 220.5C199.694 206.034 193.313 189.453 186.778 173.667C181.015 159.747 175.576 145.509 172.222 130.778C168.207 113.14 168 94.8109 168 76.8333C168 50.2494 175.901 17.4152 203.111 6.61111C225.328 -2.21038 249.556 0.510834 267.389 16.7778C288.83 36.3353 292.682 73.9002 269.667 94C243.958 116.452 203.584 117.936 171.667 125C167.745 125.868 164.815 126.58 161 127.556C160.09 127.788 159.187 128.044 158.278 128.278C156.74 128.673 156.654 128.763 158.333 127.778C170.115 120.862 186.059 116.861 198.778 113.778C238.626 104.118 279.193 98.204 320.111 95.7778C339.575 94.6237 349.909 94.859 368 95.5C372.941 95.6751 378.822 93.8112 382.778 96.7778C383.051 96.9826 382.117 96.9633 381.778 97C378.305 97.3754 374.986 98.2331 371.611 99.1667C315.337 114.732 259.418 129.389 202.111 141.111C135.652 154.705 68.4505 164.71 2 178"
-                  stroke="#FEB252"
-                  stroke-width="5"
-                  stroke-linecap="round"
-                /></svg>
+              <div class="card-signature"><svg width="150" height="82" viewBox="0 0 385 230" fill="none"
+                  xmlns="http://www.w3.org/2000/svg">
+                  <path class="signature"
+                    d="M181 42C184.817 62.9087 189.365 82.9195 196.722 102.889C202.341 118.139 208.841 133.255 213 149C215.544 158.632 218.026 169.29 219.556 179.111C221.083 188.918 222.92 199.028 223.778 208.889C224.19 213.635 224.935 219.616 222.5 223.944C220.901 226.787 218.892 228.751 215.611 227.111C212.15 225.381 211.521 224.529 208.944 220.5C199.694 206.034 193.313 189.453 186.778 173.667C181.015 159.747 175.576 145.509 172.222 130.778C168.207 113.14 168 94.8109 168 76.8333C168 50.2494 175.901 17.4152 203.111 6.61111C225.328 -2.21038 249.556 0.510834 267.389 16.7778C288.83 36.3353 292.682 73.9002 269.667 94C243.958 116.452 203.584 117.936 171.667 125C167.745 125.868 164.815 126.58 161 127.556C160.09 127.788 159.187 128.044 158.278 128.278C156.74 128.673 156.654 128.763 158.333 127.778C170.115 120.862 186.059 116.861 198.778 113.778C238.626 104.118 279.193 98.204 320.111 95.7778C339.575 94.6237 349.909 94.859 368 95.5C372.941 95.6751 378.822 93.8112 382.778 96.7778C383.051 96.9826 382.117 96.9633 381.778 97C378.305 97.3754 374.986 98.2331 371.611 99.1667C315.337 114.732 259.418 129.389 202.111 141.111C135.652 154.705 68.4505 164.71 2 178"
+                    stroke="#FEB252" stroke-width="5" stroke-linecap="round" />
+                </svg>
               </div>
               <div class="card-info" align="left">
                 <p>Name : Muhammad Rifzkhy All Fhayed</p>
@@ -89,10 +86,13 @@ <h1 class="dm-sans marks">Education</h1>
           <div class="col-10 col-md-5">
             <div class="typewrite4"></div>
           </div>
-          <div class="col-10 col-md-5 pt-3 appear">
+          <div class="col-10 col-md-5 pt-5 appear">
             <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
               <div class="carousel-inner">
                 <div class="carousel-item active">
+                  <img src="./src/carousel/final.webp" class="d-block w-100">
+                </div>
+                <div class="carousel-item">
                   <img src="./src/carousel/1.webp" class="d-block w-100">
                 </div>
                 <div class="carousel-item">
@@ -123,14 +123,6 @@ <h1 class="dm-sans marks">Education</h1>
                   <img src="./src/carousel/10.webp" class="d-block w-100">
                 </div>
               </div>
-              <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
-                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                <span class="visually-hidden">Previous</span>
-              </button>
-              <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
-                <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                <span class="visually-hidden">Next</span>
-              </button>
             </div>
           </div>
         </div>
@@ -139,253 +131,300 @@ <h1 class="dm-sans marks">Education</h1>
 
     <!-- TODO: Skill Design -->
     <section class="skill" style="background-color: #101010; color: #e3e3e3;">
-      
-        <div class="jumbotron p-3">
 
-          <div class="title pt-5 appear" align="center">
-            <h1 class="dm-sans marks">Designer</h1>
-          </div>
+      <div class="jumbotron p-3">
 
-<div class="container text-center pt-5">
-  <div class="row">
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">Adobe Photoshop</p>
-      <div class="myProgress">
-        <div class="myBardesign" data-percent="80%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">Adobe Premiere Pro</p>
-      <div class="myProgress">
-        <div class="myBardesign" data-percent="70%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">Adobe After Effects</p>
-      <div class="myProgress">
-        <div class="myBardesign" data-percent="65%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">Adobe Illustrator</p>
-      <div class="myProgress">
-        <div class="myBardesign" data-percent="25%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">Cinema 4D</p>
-      <div class="myProgress">
-        <div class="myBardesign" data-percent="60%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">Blender</p>
-      <div class="myProgress">
-        <div class="myBardesign" data-percent="30%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">Blockbench</p>
-      <div class="myProgress">
-        <div class="myBardesign" data-percent="90%"></div>
-      </div>
-    </div>
-  </div>
-</div>
+        <div class="title pt-5 appear" align="center">
+          <h1 class="dm-sans marks">Designer</h1>
+        </div>
 
-<div class="d-grid gap-2 col-6 mx-auto py-5 appear">
-  <button onclick="moveAlldesign()" class="btn btn-secondary" type="button">Show Progress</button>
-</div>
+        <div class="container text-center pt-5">
+          <div class="row justify-content-center">
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Adobe Photoshop</p>
+              <div class="myProgress">
+                <div class="myBardesign" data-percent="80%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Adobe Premiere Pro</p>
+              <div class="myProgress">
+                <div class="myBardesign" data-percent="70%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Adobe After Effects</p>
+              <div class="myProgress">
+                <div class="myBardesign" data-percent="65%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Adobe Illustrator</p>
+              <div class="myProgress">
+                <div class="myBardesign" data-percent="25%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Cinema 4D</p>
+              <div class="myProgress">
+                <div class="myBardesign" data-percent="60%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Blender</p>
+              <div class="myProgress">
+                <div class="myBardesign" data-percent="30%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Blockbench</p>
+              <div class="myProgress">
+                <div class="myBardesign" data-percent="90%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Paint.Net</p>
+              <div class="myProgress">
+                <div class="myBardesign" data-percent="95%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Gimp</p>
+              <div class="myProgress">
+                <div class="myBardesign" data-percent="60%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Clip Studio Paint</p>
+              <div class="myProgress">
+                <div class="myBardesign" data-percent="50%"></div>
+              </div>
+            </div>
+          </div>
+        </div>
 
+        <div class="d-grid gap-2 col-6 mx-auto py-5 appear">
+          <button onclick="moveAlldesign()" class="btn btn-secondary" type="button">Show Progress</button>
         </div>
+
+      </div>
     </section>
 
     <!-- TODO: Skill Programming -->
     <section class="skill">
-      
-        <div class="jumbotron p-3">
 
-          <div class="title pt-5 appear" align="center">
-            <h1 class="dm-sans marks">Developer</h1>
-          </div>
+      <div class="jumbotron p-3">
 
-<div class="container text-center pt-5">
-  <div class="row">
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">Javascript</p>
-      <div class="myProgress">
-        <div class="myBarprogramming" data-percent="80%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">Typescript</p>
-      <div class="myProgress">
-        <div class="myBarprogramming" data-percent="45%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">NodeJS</p>
-      <div class="myProgress">
-        <div class="myBarprogramming" data-percent="60%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">Java</p>
-      <div class="myProgress">
-        <div class="myBarprogramming" data-percent="30%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">PHP</p>
-      <div class="myProgress">
-        <div class="myBarprogramming" data-percent="70%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">MySQL</p>
-      <div class="myProgress">
-        <div class="myBarprogramming" data-percent="50%"></div>
-      </div>
-    </div>
-    <div class="col-md-3 d-flex flex-column pt-3 appear">
-      <p class="mb-auto">Python</p>
-      <div class="myProgress">
-        <div class="myBarprogramming" data-percent="70%"></div>
-      </div>
-    </div>
-  </div>
-</div>
+        <div class="title pt-5 appear" align="center">
+          <h1 class="dm-sans marks">Developer</h1>
+        </div>
 
-<div class="d-grid gap-2 col-6 mx-auto py-5 appear">
-  <button onclick="moveAllprogramming()" class="btn btn-secondary" type="button">Show Progress</button>
-</div>
+        <div class="container text-center pt-5">
+          <div class="row justify-content-center">
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Javascript</p>
+              <div class="myProgress">
+                <div class="myBarprogramming" data-percent="80%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Typescript</p>
+              <div class="myProgress">
+                <div class="myBarprogramming" data-percent="45%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">NodeJS</p>
+              <div class="myProgress">
+                <div class="myBarprogramming" data-percent="60%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Java</p>
+              <div class="myProgress">
+                <div class="myBarprogramming" data-percent="30%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">PHP</p>
+              <div class="myProgress">
+                <div class="myBarprogramming" data-percent="70%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">MySQL</p>
+              <div class="myProgress">
+                <div class="myBarprogramming" data-percent="50%"></div>
+              </div>
+            </div>
+            <div class="col-md-3 d-flex flex-column pt-3 appear">
+              <p class="mb-auto">Python</p>
+              <div class="myProgress">
+                <div class="myBarprogramming" data-percent="70%"></div>
+              </div>
+            </div>
+          </div>
+        </div>
 
+        <div class="d-grid gap-2 col-6 mx-auto py-5 appear">
+          <button onclick="moveAllprogramming()" class="btn btn-secondary" type="button">Show Progress</button>
         </div>
+
+      </div>
     </section>
 
     <!-- TODO: Experience -->
     <section class="experience" style="background-color: #101010; color: #e3e3e3;">
-      
-        <div class="jumbotron p-3">
 
-          <div class="title appear pt-5" align="center">
-            <h1 class="dm-sans marks">Experience</h1>
-          </div>
+      <div class="jumbotron p-3">
 
-          <div class="container py-5">
-	<div class="row">
-		<div class="">
-			<h4 class="appear">Jobdesc</h4>
-			<ul class="timeline">
-				<li>
-					<p class="p1"></p>
-				</li>
-				<li>
-          <p class="p2"></p>
-				</li>
-				<li>
-          <p class="p3"></p>
-				</li>
-			</ul>
-		</div>
-	</div>
-</div>
+        <div class="title appear pt-5" align="center">
+          <h1 class="dm-sans marks">Experience</h1>
         </div>
-    </section>
 
-    <!-- TODO: Gallery -->
-    <section class="gallery">
-      <div class="jumbotron p-3">
-      <div class="title appear" align="center">
-        <h1 class="dm-sans marks">Gallery</h1>
-      </div>
-<div class="row justify-content-center">
-  <div class="col-10 col-md-4 pt-3 appear">
-    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <img src="./src/carousel/1.webp" class="d-block w-100" alt="...">
-    </div>
-    <div class="carousel-item">
-      <img src="./src/carousel/2.webp" class="d-block w-100" alt="...">
-    </div>
-    <div class="carousel-item">
-      <img src="./src/carousel/3.webp" class="d-block w-100" alt="...">
-    </div>
-  </div>
-</div>
-  </div>
-  <div class="col-5 col-md-4 pt-3 appear">
-    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <img src="./src/carousel/1.webp" class="d-block w-100" alt="...">
-    </div>
-    <div class="carousel-item">
-      <img src="./src/carousel/2.webp" class="d-block w-100" alt="...">
-    </div>
-    <div class="carousel-item">
-      <img src="./src/carousel/3.webp" class="d-block w-100" alt="...">
-    </div>
-  </div>
-</div>
-  </div>
-  <div class="col-5 col-md-4 pt-3 appear">
-    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <img src="./src/carousel/1.webp" class="d-block w-100" alt="...">
-    </div>
-    <div class="carousel-item">
-      <img src="./src/carousel/2.webp" class="d-block w-100" alt="...">
-    </div>
-    <div class="carousel-item">
-      <img src="./src/carousel/3.webp" class="d-block w-100" alt="...">
-    </div>
-  </div>
-</div>
-  </div>
-</div>
+        <div class="container py-5">
+          <div class="row">
+            <div class="">
+              <h4 class="appear">Internship experience</h4>
+              <ul class="timeline">
+                <li>
+                  <p class="p1"></p>
+                </li>
+                <li>
+                  <p class="p2"></p>
+                </li>
+                <li>
+                  <p class="p3"></p>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
       </div>
     </section>
 
     <!-- TODO: Project -->
-    <section class="project" style="background-color: #101010; color: #e3e3e3;">
-      <div class="jumbotron p-3">
-      <div class="title appear" align="center">
-        <h1 class="dm-sans marks">Project</h1>
+    <section class="project">
+      <div class="jumbotron p-3" align="center">
+        <div class="title py-3 appear">
+          <h1 class="dm-sans marks">Project</h1>
+        </div>
+        <div class="row justify-content-center">
+          <div class="col-10 col-md-5 p-5 appear"><div class="card" data-tilt>
+              <img loading="lazy" src="./src/matsuri-ai.webp" class="project-pics">
+              <img src="./src/whatsapp-background.webp" class="card-img-top">
+              <div class="card-body">
+                <h5 class="card-title marks">MatsuriAI</h5>
+                <p class="typewrite5 card-text">Whatsapp ChatBot using ChatGPT and BardAI</p>
+                <a href="http://wa.me/6285651418066" class="btn" style="background-color: #FEB252;">Chat</a>
+                <a href="" class="btn" style="background-color: #FEB252;">Help</a>
+              </div>
+            </div></div>
+          <div class="col-10 col-md-5 p-5  appear"><div class="card" data-tilt>
+              <img loading="lazy" src="./src/kukangdeveloper.webp" class="project-pics">
+              <img src="./src/pixel-background.webp" class="card-img-top">
+              <div class="card-body">
+                <h5 class="card-title" style="color: #AB1406;">Red World Z</h5>
+                <p class="typewrite6 card-text">Zombie pixel game using Godot script</p>
+                <a href="" class="btn" style="background-color: #AB1406;">Play</a>
+                <a href="" class="btn" style="background-color: #AB1406;">Help</a>
+              </div>
+            </div></div>
+        </div>
       </div>
-      <div class="row pt-3">
-        <div class="col appear">
-          <div class="card" data-tilt align="center" style="width: 18rem;">
-            <img loading="lazy" src="./src/matsuri-ai.webp" class="project-pics">
-            <img src="./src/whatsapp-background.webp" class="card-img-top">
-            <div class="card-body">
-              <h5 class="card-title marks">MatsuriAI</h5>
-              <p class="typewrite5 card-text">Whatsapp ChatBot using ChatGPT and BardAI</p>
-              <a href="http://wa.me/6285651418066" class="btn" style="background-color: #FEB252;">Chat</a>
-              <a href="#" class="btn" style="background-color: #FEB252;">Help</a>
+    </section>
+
+    <!-- TODO: Gallery -->
+    <section class="gallery" style="background-color: #101010; color: #e3e3e3;">
+      <div class="jumbotron p-3">
+        <div class="title appear" align="center">
+          <h1 class="dm-sans marks">Gallery</h1>
+        </div>
+        <div class="row justify-content-center">
+          <div class="col-10 col-md-4 pt-3 appear">
+            <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
+              <div class="carousel-inner">
+                <div class="carousel-item active">
+                  <img src="./src/carousel/24.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/26.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/27.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/28.webp" class="d-block w-100" alt="...">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-5 col-md-4 pt-3 appear">
+            <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
+              <div class="carousel-inner">
+                <div class="carousel-item active">
+                  <img src="./src/carousel/11.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/12.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/13.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item ">
+                  <img src="./src/carousel/14.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/15.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/16.webp" class="d-block w-100" alt="...">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-5 col-md-4 pt-3 appear">
+            <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
+              <div class="carousel-inner">
+                <div class="carousel-item active">
+                  <img src="./src/carousel/17.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/18.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/19.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/20.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/21.webp" class="d-block w-100" alt="...">
+                </div>
+                <div class="carousel-item">
+                  <img src="./src/carousel/22.webp" class="d-block w-100" alt="...">
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    </section>    
+    </section>
 
     <!-- TODO: Certificate -->
-    <section>
+    <section class="certificate">
       <div class="jumbotron p-3 ">
         <div class="title pt-5 appear" align="center">
           <h1 class="dm-sans marks">Certificate</h1>
         </div>
         <div class="certificate">
           <div class="row py-5">
-            <div class="col p-3 appear" align="center"><img loading="lazy"src="./src/certificate/Sertifikat PKL.webp" data-tilt
-                data-tilt-glare></div>
-            <div class="col p-3 appear" align="center"><img loading="lazy"src="./src/certificate/Sertifikat LSP front.webp" data-tilt
-                data-tilt-glare></div>
-            <div class="col p-3 appear" align="center"><img loading="lazy"src="./src/certificate/Sertifikat Kompetensi front.webp" data-tilt
-                data-tilt-glare></div>
+            <div class="col p-3 appear" align="center"><img loading="lazy" src="./src/certificate/Sertifikat PKL.webp"
+                data-tilt data-tilt-glare></div>
+            <div class="col p-3 appear" align="center"><img loading="lazy"
+                src="./src/certificate/Sertifikat LSP front.webp" data-tilt data-tilt-glare></div>
+            <div class="col p-3 appear" align="center"><img loading="lazy"
+                src="./src/certificate/Sertifikat Kompetensi front.webp" data-tilt data-tilt-glare></div>
           </div>
         </div>
         <div class="title pt-5 appear" align="center">
@@ -393,7 +432,7 @@ <h1 class="dm-sans marks">PIAGAM</h1>
         </div>
         <div class="certificate">
           <div class="row py-5">
-            <div class="col p-3 appear" align="center"><img loading="lazy"src="./src/certificate/piagam.webp" data-tilt
+            <div class="col p-3 appear" align="center"><img loading="lazy" src="./src/certificate/piagam.webp" data-tilt
                 data-tilt-glare></div>
           </div>
         </div>
@@ -401,20 +440,26 @@ <h1 class="dm-sans marks">PIAGAM</h1>
     </section>
 
     <!-- TODO: Social media -->
-    <section class="project" style="background-color: #101010; color: #e3e3e3;"><div class="jumbotron p-3">
-      <div class="title pt-5" align="center">
-        <h1 class="dm-sans marks">SOCIAL MEDIA</h1>
-      </div>
-      <div class="social-media" align="center">
-        <div class="row p-3 justify-content-center">
-            <a href="https://www.instagram.com/rifzkhy/" class="btn btn-secondary m-1 col-8 col-md-3 appear"><i class="bi bi-instagram"></i> Instagram</a>
-            <a href="https://twitter.com/Rifzkhy" class="btn btn-secondary m-1 col-8 col-md-3 appear"><i class="bi bi-twitter"></i> Twitter</a>
-            <a href="https://www.facebook.com/rifzkhy/" class="btn btn-secondary m-1 col-8 col-md-3 appear"><i class="bi bi-facebook"></i> Facebook</a>
-            <a href="https://github.com/Rifzkhy" class="btn btn-secondary m-1 col-8 col-md-3 appear"><i class="bi bi-github"></i> Github</a>
+    <section class="project" style="background-color: #101010; color: #e3e3e3;">
+      <div class="jumbotron p-3">
+        <div class="title pt-5" align="center">
+          <h1 class="dm-sans marks">SOCIAL MEDIA</h1>
+        </div>
+        <div class="social-media" align="center">
+          <div class="row p-3 justify-content-center">
+            <a href="https://www.instagram.com/rifzkhy/" class="btn btn-secondary m-1 col-8 col-md-3 appear"><i
+                class="bi bi-instagram"></i> Instagram</a>
+            <a href="https://twitter.com/Rifzkhy" class="btn btn-secondary m-1 col-8 col-md-3 appear"><i
+                class="bi bi-twitter"></i> Twitter</a>
+            <a href="https://www.facebook.com/rifzkhy/" class="btn btn-secondary m-1 col-8 col-md-3 appear"><i
+                class="bi bi-facebook"></i> Facebook</a>
+            <a href="https://github.com/Rifzkhy" class="btn btn-secondary m-1 col-8 col-md-3 appear"><i
+                class="bi bi-github"></i> Github</a>
             <a href="" class="btn btn-secondary m-1 col-8 col-md-3 appear"><i class="bi bi-reddit"></i> Reddit</a>
+          </div>
         </div>
       </div>
-    </div></section>
+    </section>
 
   </div>
 
@@ -422,11 +467,11 @@ <h1 class="dm-sans marks">SOCIAL MEDIA</h1>
 
   <script>
     var slideUp = {
-    distance: '100%',
-    origin: 'bottom',
-    opacity: 0
-};
-    ScrollReveal().reveal(".appear", slideUp,{
+      distance: '100%',
+      origin: 'bottom',
+      opacity: 0
+    };
+    ScrollReveal().reveal(".appear", slideUp, {
       delay: 500,
       duration: 500,
     });
@@ -439,12 +484,12 @@ <h1 class="dm-sans marks">SOCIAL MEDIA</h1>
       waitUntilVisible: true,
     }).go();
     new TypeIt(".typewrite3", {
-      strings: ["<mark>C:/rifzkhy/about/Who-am-I?</mark>", "I am Rifzkhy, a fullstack programmer based in Indonesia. In my career journey, I have committed to keep learning and growing in the world of programming."," ","<mark>C:/rifzkhy/about/What-is-my-goal?</mark>","My goal is to devote myself in creating programs that can simplify people's daily lives. I believe that technology can be a powerful tool to help society, and I strive to contribute through the codes I write."," ","<i>- Member of Kukang Developer</i>"],
+      strings: ["<mark>C:/rifzkhy/about/Who-am-I?</mark>", "I am Rifzkhy, a fullstack programmer based in Indonesia. In my career journey, I have committed to keep learning and growing in the world of programming.", " ", "<mark>C:/rifzkhy/about/What-is-my-goal?</mark>", "My goal is to devote myself in creating programs that can simplify people's daily lives. I believe that technology can be a powerful tool to help society, and I strive to contribute through the codes I write.", " ", "<i>- Member of Kukang Developer</i>"],
       speed: 10,
       waitUntilVisible: true,
     }).go();
     new TypeIt(".typewrite4", {
-      strings: ["<mark>2010 - 2011</mark>","TK Babul Jannah Sampit"," ","<mark>2011 - 2017</mark>","MIN 1 Sampit"," ","<mark>2017 - 2020</mark>","SMP Negeri 2 Sampit"," ","<mark>2020 - 2023</mark>","SMK Negeri 1 Sampit"],
+      strings: ["<mark>2010 - 2011</mark>", "TK Babul Jannah Sampit", " ", "<mark>2011 - 2017</mark>", "MIN 1 Sampit", " ", "<mark>2017 - 2020</mark>", "SMP Negeri 2 Sampit", " ", "<mark>2020 - 2023</mark>", "SMK Negeri 1 Sampit"],
       speed: 10,
       waitUntilVisible: true,
     }).go();
@@ -452,18 +497,22 @@ <h1 class="dm-sans marks">SOCIAL MEDIA</h1>
       speed: 50,
       waitUntilVisible: true,
     }).go();
+    new TypeIt(".typewrite6", {
+      speed: 50,
+      waitUntilVisible: true,
+    }).go();
     new TypeIt(".timeline .p1", {
-      strings: ["<mark>Sekretariat Daerah Kotawaringin Timur</mark>","25 Juli 2023 - 02 Desember 2022","Sebagai peserta magang dari Sekolah SMK Negeri 1 Sampit, di tempatkan pada bagian Protokol dan Komunikasi Pimpinan"],
+      strings: ["<mark>Sekretariat Daerah Kotawaringin Timur</mark>", "25 Juli 2023 - 02 Desember 2022", "Sebagai peserta magang dari Sekolah SMK Negeri 1 Sampit, di tempatkan pada bagian Protokol dan Komunikasi Pimpinan"],
       speed: 50,
       waitUntilVisible: true,
     }).go();
     new TypeIt(".timeline .p2", {
-      strings: ["<mark>PT. Hayat TV Entertaiment</mark>","05 Juni 2023 - 05 November 2023","Sebagai peserta magang dari Dinas Tenaga Kerja, di tempatkan pada bagian Teknisi internet Faznet"],
+      strings: ["<mark>PT. Hayat TV Entertaiment</mark>", "05 Juni 2023 - 05 November 2023", "Sebagai peserta magang dari Dinas Tenaga Kerja"],
       speed: 50,
       waitUntilVisible: true,
     }).go();
     new TypeIt(".timeline .p3", {
-      strings: ["<mark>BUMN</mark>"],
+      strings: ["<mark>LPK Japan Mandiri Indonesia</mark>"],
       speed: 50,
       waitUntilVisible: true,
     }).go();
diff --git a/script/global.js b/script/global.js
index 4e8dc70..b4990ff 100644
--- a/script/global.js
+++ b/script/global.js
@@ -82,3 +82,28 @@ function moveAlldesign() {
     }
   });
 }
+function moveAllprogramming() {
+  var skillBars = document.querySelectorAll(".myBarprogramming");
+
+  skillBars.forEach(function (myBarprogramming) {
+    var width = 10;
+    var numericValue = parseFloat(myBarprogramming.getAttribute("data-percent"));
+    var i = 0;
+
+    if (i == 0) {
+      i = 1;
+      var id = setInterval(frame, 10);
+
+      function frame() {
+        if (width >= numericValue) {
+          clearInterval(id);
+          i = 0;
+        } else {
+          width++;
+          myBarprogramming.style.width = width + "%";
+          myBarprogramming.innerHTML = width + "%";
+        }
+      }
+    }
+  });
+}
diff --git a/src/carousel/11.webp b/src/carousel/11.webp
new file mode 100644
index 0000000..4d793f1
Binary files /dev/null and b/src/carousel/11.webp differ
diff --git a/src/carousel/12.webp b/src/carousel/12.webp
new file mode 100644
index 0000000..f78166a
Binary files /dev/null and b/src/carousel/12.webp differ
diff --git a/src/carousel/13.webp b/src/carousel/13.webp
new file mode 100644
index 0000000..b2ead9e
Binary files /dev/null and b/src/carousel/13.webp differ
diff --git a/src/carousel/14.webp b/src/carousel/14.webp
new file mode 100644
index 0000000..3fedb8c
Binary files /dev/null and b/src/carousel/14.webp differ
diff --git a/src/carousel/15.webp b/src/carousel/15.webp
new file mode 100644
index 0000000..195e9ea
Binary files /dev/null and b/src/carousel/15.webp differ
diff --git a/src/carousel/16.webp b/src/carousel/16.webp
new file mode 100644
index 0000000..a874560
Binary files /dev/null and b/src/carousel/16.webp differ
diff --git a/src/carousel/17.webp b/src/carousel/17.webp
new file mode 100644
index 0000000..ad36dc5
Binary files /dev/null and b/src/carousel/17.webp differ
diff --git a/src/carousel/18.webp b/src/carousel/18.webp
new file mode 100644
index 0000000..bb0eba6
Binary files /dev/null and b/src/carousel/18.webp differ
diff --git a/src/carousel/19.webp b/src/carousel/19.webp
new file mode 100644
index 0000000..bb0eba6
Binary files /dev/null and b/src/carousel/19.webp differ
diff --git a/src/carousel/20.webp b/src/carousel/20.webp
new file mode 100644
index 0000000..7266b77
Binary files /dev/null and b/src/carousel/20.webp differ
diff --git a/src/carousel/21.webp b/src/carousel/21.webp
new file mode 100644
index 0000000..99b5927
Binary files /dev/null and b/src/carousel/21.webp differ
diff --git a/src/carousel/22.webp b/src/carousel/22.webp
new file mode 100644
index 0000000..fb467a5
Binary files /dev/null and b/src/carousel/22.webp differ
diff --git a/src/carousel/23.webp b/src/carousel/23.webp
new file mode 100644
index 0000000..93ae1ec
Binary files /dev/null and b/src/carousel/23.webp differ
diff --git a/src/carousel/24.webp b/src/carousel/24.webp
new file mode 100644
index 0000000..d161c1e
Binary files /dev/null and b/src/carousel/24.webp differ
diff --git a/src/carousel/25.webp b/src/carousel/25.webp
new file mode 100644
index 0000000..fa28fe4
Binary files /dev/null and b/src/carousel/25.webp differ
diff --git a/src/carousel/26.webp b/src/carousel/26.webp
new file mode 100644
index 0000000..f13bc5c
Binary files /dev/null and b/src/carousel/26.webp differ
diff --git a/src/carousel/27.webp b/src/carousel/27.webp
new file mode 100644
index 0000000..19a20aa
Binary files /dev/null and b/src/carousel/27.webp differ
diff --git a/src/carousel/28.webp b/src/carousel/28.webp
new file mode 100644
index 0000000..61e26a3
Binary files /dev/null and b/src/carousel/28.webp differ
diff --git a/src/carousel/final.webp b/src/carousel/final.webp
new file mode 100644
index 0000000..0ff548e
Binary files /dev/null and b/src/carousel/final.webp differ
diff --git a/src/kukangdeveloper.webp b/src/kukangdeveloper.webp
new file mode 100644
index 0000000..d25485a
Binary files /dev/null and b/src/kukangdeveloper.webp differ
diff --git a/src/pixel-background.webp b/src/pixel-background.webp
new file mode 100644
index 0000000..5ca8d16
Binary files /dev/null and b/src/pixel-background.webp differ
