hero animations

layouts/partials/sections/hero/index.html

@@ -2,7 +2,7 @@
 <section id="hero" class="py-5">
     <div class="container px-3 px-sm-5 px-md-5 px-lg-5 pt-lg-3">
         <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-8" id="primary-font">
+            <div class="col-sm-12 col-md-12 col-lg-8 content" id="primary-font">
                 <span class="subtitle">
                     {{ .Site.Params.hero.intro }}
                 </span>

layouts/partials/sections/projects.html

@@ -2,7 +2,7 @@
 <section id="projects" class="py-5">
     <div class="container">
         <h3 class="text-center">Projects</h3>
-        <div class="row justify-content-center px-3 ">
+        <div class="row justify-content-center px-3 px-md-5">
             {{ range .Site.Params.projects.items }}
             <div class="col-lg-4 col-md-6 my-3">
                 <div class="card my-3 h-100" title="{{ .title }}">

static/css/header.css

@@ -1,3 +1,18 @@
+@keyframes fade-up {
+  0% {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+header .navbar {
+    animation: fade-up 0.5s ease-in;
+}
+
 header .navbar .navbar-nav a {
     color: var(--text-color) !important;
 }

static/css/index.css

@@ -1,3 +1,44 @@
+/* Animation */
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes fade-bottom {
+  0% {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes fade-left {
+  0% {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fade-right {
+  0% {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
 /* ToolTip */
 
 .tooltip {
@@ -19,6 +60,10 @@
     max-width: 100%;
 }
 
+#hero .content {
+    animation: fade-left 1.2s ease-out;
+}
+
 #hero .hero-bottom-svg {
     opacity: 0.5;
     position: absolute;
@@ -49,6 +94,7 @@
 }
 
 #hero .image img {
+    animation: fade-in 1.2s ease-out;
     box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
     transition: box-shadow 0.3s;
     padding: 0;
@@ -127,7 +173,6 @@
 }
 
 /* about me */
-
 #about h3 {
     color: var(--text-secondary-color) !important;
 }