implement animations on scroll

layouts/partials/about.html

@@ -1,11 +1,11 @@
 <div id="about" class="about">
     {{ with .Site.GetPage "about" }}
-    <div class="about-part">
+    <div class="about-part fade-left">
         {{ with .Params.image }}
             <img src='{{ . | relURL }}' alt="{{ $.Params.title }}" title="{{ $.Params.title }}">
         {{ end }}
     </div>
-    <div class="about-part">
+    <div class="about-part fade-right">
         <h1>{{ .Title }}</h1>
         <div>{{ .Content }}</div>
     </div>

layouts/partials/contact.html

@@ -1,8 +1,8 @@
 <div id="contact" class="contact">
-    <div class="contact-title-wrapper">
+    <div class="contact-title-wrapper fade-up">
         <h1 class="contact-title">{{ T "contact-me" }}</h1>
     </div>
-    <div>
+    <div class="fade-up">
         {{ range .Site.Data.socialmedia }}
         <a href="{{ .link }}" alt="{{ .name }}" title="{{ .name }}"><i class="{{ .icon }}"></i></a>
         {{ end }}

layouts/partials/projects.html

@@ -1,6 +1,6 @@
 <div id="projects" class="projects">
-    <h1>{{ T "projects" }}</h1>
-    <div class="tag-filter">
+    <h1 class="fade-up">{{ T "projects" }}</h1>
+    <div class="tag-filter fade-up">
         {{ range .Site.Data.tags }}
         <div class="tag">
             <input class="tag-checkbox" id="tag-{{ .slug }}" value="{{ .slug }}" type="checkbox" {{ if .checked }} checked {{ end }}>
@@ -11,7 +11,7 @@
 
     <div class="project-list">
     </div>
-    <div>
+    <div class="fade-up">
         <button class="project-load-btn" alt='{{ T "load-more" }}' title='{{ T "load-more" }}' name='{{ T "load-more" }}'>{{ T "load-more" }}</button>
     </div>
 </div>