rewrite code

Author: Rifzkhy

src/certificate/piagam.webp renamed to assets/img/certificate/Piagam mural.webp

@@ -0,0 +1,10 @@
+for(let i = 1; i < 100; i++) {
+    new TypeIt(`.typewrite${i}`, {
+    speed: 10,
+    waitUntilVisible: true,
+}).go();
+}
+ScrollReveal().reveal(".appear", slideUp, {
+      delay: 500,
+      duration: 500,
+    });

assets/img/certificate/Sertifikat Arduino Vehicle Safety.webp

@@ -5,7 +5,7 @@ var VanillaTilt = (function () {
  * Created by Sergiu Șandor (micku7zu) on 1/27/2017.
  * Original idea: https://github.com/gijsroge/tilt.js
  * MIT License.
- * Version 1.8.0
+ * Version 1.8.1
  */
 
 class VanillaTilt {
@@ -139,7 +139,10 @@ class VanillaTilt {
       cancelAnimationFrame(this.updateCall);
     }
 
-    this.reset();
+    this.element.style.willChange = "";
+    this.element.style.transition = "";
+    this.element.style.transform = "";
+    this.resetGlare();
 
     this.removeEventListeners();
     this.element.vanillaTilt = null;

assets/img/certificate/Sertifikat Dicoding Javascript.webp

@@ -0,0 +1,318 @@
+:root {
+  --red: #C50F1F;
+  --green: #16C60C;
+  --blue: #007ACC;
+  --blue-sky: #69D6FD;
+  --white: #efefef;
+  --primary: #3E3E42;
+  --secondary: #2D2D30;
+  --primary-dark: #252526;
+  --secondary-dark: #1E1E1E;
+  --orange-primary: #FFB250;
+  --orange-secondary: #FEA94E;
+  --orange-pastel: #FFC384;
+}
+
+body {
+    background-color: var(--secondary);
+    color: var(--white);
+}
+
+*::-webkit-scrollbar {
+  overflow: hidden;
+  display: none;
+  text-decoration: none;
+}
+
+section a {
+    color: gray;
+}
+footer a {
+    color: white;
+}
+
+.marked {
+    color: var(--orange-pastel);
+}
+
+.markeds {
+    background-color: var(--orange-pastel);
+}
+
+section {
+  min-height: 100vh;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+}
+
+section.about {
+    background-color: var(--primary);
+}
+section.about h5{
+  text-align: left;
+}
+section.about .info p.paragraf{
+  text-indent: 20px;
+  text-align: justify;
+}
+section.about .info p{
+  text-align: justify;
+}
+section.about .cards .card{
+  width: 18rem;
+  height: 24rem;
+  display: flex;
+  transform-style: preserve-3d;
+}
+section.about .cards .first{
+  position: absolute;
+  opacity: 1;
+  transition: 0.5s;
+  border-radius: 9%;
+  transform: translateZ(20px)
+}
+section.about .card:hover .first{
+  width: 50%;
+  opacity: 0;
+}
+section.about .card .second{
+  position: absolute;
+  opacity: 0;
+  transition: 0.5s;
+  transform: translateZ(20px)
+}
+section.about .card:hover .second{
+  width: 50%;
+  border-radius: 15%;
+  opacity: 1;
+}
+section.about .card .experience{
+  position: absolute;
+  top: 25;
+  right: 155;
+  opacity: 0;
+  color: var(--orange-primary);
+  transition: 1s;
+}
+section.about .card:hover .experience{
+  right: 30;
+  opacity: 1;
+  transform: translateZ(15px)
+}
+section.about .card-button{
+  transition: 0.5s;
+  transform: translateZ(20px) translateY(265px);
+}
+section.about .card:hover .card-button{
+  transform: translateZ(30px) translateY(265px);
+}
+section.about .card .signature {
+  stroke-dasharray: 2400;
+  stroke-dashoffset: 2400;
+  position: absolute;
+  left: 40px;
+  top: 70px;
+  transform: translateZ(30px);
+}
+section.about .card:hover .signature {
+  animation: sign 4s infinite;
+  animation-fill-mode: forwards;
+}
+@keyframes sign {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+section.about .card .card-info{
+  text-align: left;
+  font-size: 14px;
+  position: absolute;
+  top: 200px;
+  opacity: 0;
+  transition: 0.5s;
+  transform: translateZ(10px);
+}
+section.about .card:hover .card-info{
+  top: 130px;
+  opacity: 1;
+}
+section.about .card .card-social{
+  left: 0;
+  right: 0;
+  font-size: 18px;
+  letter-spacing: 5px;
+  position: absolute;
+  top: 290px;
+  opacity: 0;
+  transition: 0.5s;
+  transform: translateZ(15px);
+}
+section.about .card:hover .card-social{
+  top: 220px;
+  opacity: 1;
+}
+
+section.certificate .carousel{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+section.certificate .carousel .carousel-item{
+    height: 100px;
+  }
+section.certificate .carousel img{
+  transition: .5s;
+  filter: grayscale(100);
+}
+section.certificate .carousel img:hover{
+  filter: grayscale(0);
+}
+
+section.project {
+    background-color: var(--primary);
+}
+section.project .card{
+  width: 18rem;
+  height: 24rem;
+  display: flex;
+  transform-style: preserve-3d;
+}
+section.project .card img{
+  transition: .5s;
+  filter: grayscale(100);
+}
+section.project .card:hover img{
+  filter: grayscale(0);
+}
+section.project .card img.profile{
+  position: absolute;
+  width: 100px;
+  border-radius: 10%;
+  top: 50;
+  left: 90;
+  transition: .5s;
+  transform: translateZ(15px);
+}
+section.project .card .action{
+  filter: grayscale(100);
+}
+section.project .card:hover .action{
+  filter: grayscale(0);
+}
+section.project .server .card:hover img.profile{
+  box-shadow: 0 4px 8px 0 white, 0 6px 20px 0 white;
+  filter: grayscale(0);
+  transform: translateZ(30px);
+}
+section.project .server .card .action{
+  position: absolute;
+  top: 200;
+  left: 76px;
+  transform: translateZ(10px);
+}
+section.project .server .property{
+  position: absolute;
+  top: 0;
+  color: white;
+  font-size: 66px;
+  transition: .5s;
+  opacity: 0;
+  text-shadow: 2px 2px 8px var(--primary);
+  transform: translateZ(0px) translateY(50px);
+}
+section.project .server .card:hover .property{
+  opacity: 1;
+  transform: translateZ(20px);
+}
+  section.project .server .card .property i.bi:nth-child(1){
+    position: absolute;
+    transform: translate(10px,-30px);
+  }
+  section.project .server .card .property i:nth-child(2){
+    position: absolute;
+    transform: translate(210px,20px);
+  }
+  section.project .server .card .property i:nth-child(3){
+    position: absolute;
+    transform: translate(-30px,100px);
+  }
+  section.project .server .card .property i:nth-child(4){
+    position: absolute;
+    transform: translate(240px,160px);
+  }
+  section.project .server .card .property i:nth-child(5){
+    position: absolute;
+    transform: translate(50px,250px);
+  }
+section.project .matsuri .card:hover img.profile{
+  box-shadow: 0 4px 8px 0 var(--orange-primary), 0 6px 20px 0 var(--orange-primary);
+  filter: grayscale(0);
+  transform: translateZ(30px);
+}
+section.project .matsuri .card .action{
+  position: absolute;
+  top: 200;
+  left: 68px;
+  transform: translateZ(10px);
+}
+section.project .matsuri .card .chat{
+  position: absolute;
+  transform: translateZ(15px);
+}
+section.project .matsuri .card .chat button:nth-child(1){
+  position: relative;
+  top: 15px;
+  opacity: 0;
+  transition: .5s;
+  transform: translate(170px);
+}
+section.project .matsuri .card:hover .chat button:nth-child(1){
+  opacity: 1;
+  transform: translate(150px);
+}
+section.project .matsuri .card .chat button:nth-child(2){
+  position: relative;
+  top: 65px;
+  opacity: 0;
+  transition: .5s;
+  transform: translate(-135px);
+}
+section.project .matsuri .card:hover .chat button:nth-child(2){
+  opacity: 1;
+  transform: translate(-115px);
+}
+
+section.project .hayat .card:hover img.profile{
+  box-shadow: 0 4px 8px 0 red, 0 6px 20px 0 white;
+  filter: grayscale(0);
+  transform: translateZ(30px);
+}
+section.project .hayat .card .action{
+  position: absolute;
+  top: 200;
+  left: 66px;
+  transform: translateZ(10px);
+}
+
+@media screen and (min-width: 300px) {
+  section.certificate .carousel .carousel-item{
+    height: 200px;
+  }
+}
+@media screen and (min-width: 600px) {
+  section.certificate .carousel .carousel-item{
+    height: 300px;
+  }
+}
+@media screen and (min-width: 900px) {
+  section.certificate .carousel .carousel-item{
+    height: 400px;
+  }
+}
+
+.typewrite1{
+  line-height: 1.2;
+  margin: 0 auto;
+}