fix

Rifzkhy · Aug 20, 2023 · 014b056 · 014b056
1 parent ec63b0d
commit 014b056
Show file tree

Hide file tree

Showing 13 changed files with 53 additions and 20 deletions.
diff --git a/css/profile.css b/css/profile.css
@@ -17,48 +17,66 @@ background-color: #fff;
 
 }
 
-.card{
+.about .card{
   width: 18rem;
   height: 26rem;
 	/* box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); */
 	transform-style: preserve-3d;
-  border-radius: 20px;
 }
 
-.card .profile-pics {
+.about .card .profile-pics {
   position: absolute;
   top: 20px;
 	left: 18px;
 	max-width: 250px;
   transform: translateZ(20px);
-	border-radius: 15px;
+	border-radius: 5px;
   transition: .5s;
 }
 
-.card:hover .profile-pics{
+.about .card:hover .profile-pics{
 	position: absolute;
 	top: 20px;
 	left: 20px;
 	/* transform: translate3d(-100%, -50%, 10px); */
 	max-width: 100px;
-	border-radius: 15px;
 }
 
-.card .card-body{
+.about .card .card-body{
   position: absolute;
 	top: 270px;
   transform: translateZ(20px);
   transition: .5s;
   opacity: 1;
 }
-.card:hover .card-body{
+.about .card:hover .card-body{
   position: absolute;
 	top: 300px;
   transform: translateZ(20px);
   transition: .5s;
   opacity: 0;
 }
 
+/* TODO: Project Card */
+.project .card{
+	/* box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8); */
+	transform-style: preserve-3d;
+}
+
+.project .card .project-pics{
+  position: absolute;
+  top: 60px;
+	left: 65px;
+	max-width: 150px;
+  transform: translateZ(20px);
+	border-radius: 5px;
+  transition: .5s;
+}
+
+.project .card .card-body{
+  transform: translateZ(20px);
+}
+
 .certificate img {
   width: 20rem;
   box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="icon" href="logo.webp">
+  <link rel="icon" href="./src/logo.webp">
   <title>Muhammad Rifzkhy All Fhayed</title>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
@@ -30,7 +30,7 @@ <h3>PORTOFOLIO</h3>
     </section>
 
     <!-- TODO: About Me -->
-    <section class="" style="background-color: #101010; color: #e3e3e3;">
+    <section class="about" style="background-color: #101010; color: #e3e3e3;">
       <div class="jumbotron p-3">
         <div class="title" align="center">
           <h1>ABOUT ME</h1>
@@ -43,9 +43,9 @@ <h1>MUHAMMAD RIFZKHY ALL FHAYED</h1>
               clean solutions that deliver impactful experiences to users.</p>
           </div>
           <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">
+            <div class="card" data-tilt style="width: 18rem;">
+              <!-- <img loading="lazy"src="src/rifzkhy.jpg" class="card-img-top" alt="..."> -->
+              <img loading="lazy" src="./src/rifzkhy.webp" class="profile-pics">
               <div class="card-body">
                 <button type="button" class="btn btn-secondary">Hire me</button>
               </div>
@@ -64,11 +64,26 @@ <h1>SKILL</h1>
     </section>
 
     <!-- TODO: Project -->
-    <section class="" style="background-color: #101010; color: #e3e3e3;">
-      <div class="title">
+    <section class="project" style="background-color: #101010; color: #e3e3e3;">
+      <div class="jumbotron p-3">
+      <div class="title" align="center">
         <h1>PROJECT</h1>
-
       </div>
+      <div class="row pt-3">
+        <div class="col">
+          <div class="card" data-tilt style="width: 18rem;" align="center">
+            <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">MatsuriAI</h5>
+              <p class="card-text">An artficial intelligence Whatsapp BOT using OpenAI ChatGPT.</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>
+    </div>
     </section>    
 
     <!-- TODO: Certificate -->
@@ -79,11 +94,11 @@ <h1>CERTIFICATE</h1>
         </div>
         <div class="certificate">
           <div class="row p-1">
-            <div class="col p-3" align="center"><img src="src/certificate/Sertifikat PKL.webp" data-tilt
+            <div class="col p-3" align="center"><img loading="lazy"src="src/certificate/Sertifikat PKL.webp" data-tilt
                 data-tilt-glare></div>
-            <div class="col p-3" align="center"><img src="src/certificate/Sertifikat LSP front.webp" data-tilt
+            <div class="col p-3" align="center"><img loading="lazy"src="src/certificate/Sertifikat LSP front.webp" data-tilt
                 data-tilt-glare></div>
-            <div class="col p-3" align="center"><img src="src/certificate/Sertifikat Kompetensi front.webp" data-tilt
+            <div class="col p-3" align="center"><img loading="lazy"src="src/certificate/Sertifikat Kompetensi front.webp" data-tilt
                 data-tilt-glare></div>
           </div>
         </div>
@@ -92,7 +107,7 @@ <h1>AWARD CERTIFICATE</h1>
         </div>
         <div class="certificate">
           <div class="row p-1">
-            <div class="col p-3" align="center"><img src="src/certificate/piagam.webp" data-tilt
+            <div class="col p-3" align="center"><img loading="lazy"src="src/certificate/piagam.webp" data-tilt
                 data-tilt-glare></div>
           </div>
         </div>

diff --git a/logo.png b/logo.png
diff --git a/src/certificate/Sertifikat Kompetensi back.png b/src/certificate/Sertifikat Kompetensi back.png
diff --git a/src/certificate/Sertifikat Kompetensi front.png b/src/certificate/Sertifikat Kompetensi front.png
diff --git a/src/certificate/Sertifikat LSP back.png b/src/certificate/Sertifikat LSP back.png
diff --git a/src/certificate/Sertifikat LSP front.png b/src/certificate/Sertifikat LSP front.png
diff --git a/src/certificate/Sertifikat PKL.png b/src/certificate/Sertifikat PKL.png
diff --git a/src/certificate/piagam.png b/src/certificate/piagam.png
diff --git a/src/logo.webp b/src/logo.webp
diff --git a/src/matsuri-ai.webp b/src/matsuri-ai.webp
diff --git a/src/rifzkhy.jpg b/src/rifzkhy.jpg
diff --git a/src/whatsapp-background.webp b/src/whatsapp-background.webp