fix

css/profile.css

@@ -22,8 +22,8 @@ align-items: center;
 
 .typing-demo {
   margin-top: 10px;
-  width: 22ch;
-  animation: typing 4s steps(22), blink .5s step-end infinite alternate;
+  width: 10.3ch;
+  animation: typing 4s steps(10), blink .5s step-end infinite alternate;
   white-space: nowrap;
   overflow: hidden;
   border-right: 3px solid;
@@ -51,7 +51,6 @@ background-color: #fff;
 }
 
 .col .card{
-  left: 10%;
   width: 18rem;
   height: 26rem;
 	/* box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); */
@@ -67,4 +66,14 @@ background-color: #fff;
 	max-width: 100px;
 	transition: 0.5s;
 	border-radius: 15px;
+}
+
+.skill-certificate img {
+  width: 20rem;
+  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+.award-certificate img {
+  width: 20rem;
+  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
 }

index.html

@@ -23,17 +23,17 @@
   <div class="wrapper">
     <h1>I'm Rifzkhy</h1>
       <h2 class="typing-demo">
-  Welcome to my website!</h2>
+  PORTOFOLIO</h2>
   </div>
   </section>
-  <section class="bg-warning">
-<div class="jumbotron p-5 bg-warning">
+  <section class="" style="background-color: #101010; color: #e3e3e3;">
+<div class="jumbotron p-5">
   <div class="row">
-    <div class="col-8">
+    <div class="col">
       <h1>MUHAMMAD RIFZKHY ALL FHAYED</h1>      
       <p>Hello everyone! I'm Rifzkhy, a Fullstack Developer who is deeply passionate about 3D modeling, game development, chatbot creation, and digital art. My goal is to create simple and clean solutions that deliver impactful experiences to users.</p>
     </div>
-    <div class="col">
+    <div class="col" align="center">
 <div class="card"  data-tilt data-tilt-glare data-tilt-max-glare="0.8">
   <!-- <img src="src/rifzkhy.jpg" class="card-img-top" alt="..."> -->
   <img src="src/rifzkhy.jpg" class="profile-pics">
@@ -47,9 +47,29 @@ <h5 class="card-title">Card title</h5>
   </div>
 </div>
   </section>
-  <section class="">
-
-  </section>
+  <section>
+  <div class="jumbotron p-5">
+    <div class="title" align="center">
+      <h1>CERTIFICATE</h1>
+    </div>
+  <div class="skill-certificate">
+    <div class="row p-1">
+      <div class="col p-5" align="center"><img class="image" src="src/certificate/Sertifikat PKL.png" data-tilt data-tilt-glare></div>
+      <div class="col p-5" align="center"><img src="src/certificate/Sertifikat LSP front.png" data-tilt data-tilt-glare></div>
+      <div class="col p-5" align="center"><img src="src/certificate/Sertifikat Kompetensi front.png" data-tilt data-tilt-glare></div>
+    </div>
+</div>
+<div class="title" align="center">
+  <h1>AWARD CERTIFICATE</h1>
+</div>
+<div class="award-certificate">
+<div class="row p-1">
+  <div class="col p-5" align="center"><img class="image" src="src/certificate/piagam.png" data-tilt data-tilt-glare></div>
+</div>
+</div>
+  </div>
+</section>
+</div>
   <!-- model 3d -->
   <!-- <div class="card" style="width: 18rem;">
     <model-viewer src="src/model.gltf" class="model3d card-img-top" auto-rotate camera-controls ar ios-src="src/model.gltf"></model-viewer>