Add content animation

includes/about.pug

@@ -1,7 +1,7 @@
 section.section.about
-    h3.section__h3 About Me
+    h3(data-aos='fade-right').section__h3 About Me
     div.about__info
-        div.info__text.text--dark-primary
+        div(data-aos='fade-right').info__text.text--dark-primary
             p
                 | Hello! I'm Anton, a software engineer based in Kyiv, Ukraine.
             p
@@ -13,7 +13,7 @@ section.section.about
             ul.info__list.text--small.text--monospace
                 each skill in ['TS/JS', 'React/Redux', 'React Native', 'Node.js', 'Vue.js/Vuex', 'HTML/CSS']
                     li.list__item #{skill}
-        div.info__image
+        div(data-aos='fade-left').info__image
             a(href=social[1].url).image__link.image--border
                 // TODO update image
                 img(src='img/main.jpeg', title='Me', alt='Avatar')

includes/contact.pug

@@ -1,4 +1,4 @@
-section.section.contact.text--center
+section(data-aos='zoom-out').section.contact.text--center
     h3.contact__h3.section__h3.text--normal.text--secondary What is next?
     h4.contact__h4 Get In Touch
     p.contact__p.text--dark-primary Although I'm not currently looking for any new opportunities, my inbox is always open. Whether you have any question or just want to say hi, I'll try my best to get back to you!

includes/experience.pug

@@ -1,10 +1,10 @@
 section.section.experience
-    h3.section__h3 Work Experience
+    h3(data-aos='fade-right').section__h3 Work Experience
     div.experience__container
-        div.experince__menu
+        div(data-aos='fade-up-right').experince__menu
             each item, index in experience
                 button(type='button' class=`experience__btn ${index === 0 ? 'active' : ''}` data-index=index) #{item.company}
-        div.experience__jobs
+        div(data-aos='fade-up-left').experience__jobs
             each item, index in experience
                 div(class=`jobs__block ${index === 0 ? 'active' : ''}` data-index=index)
                     h4 #{item.title}  

includes/head.pug

@@ -42,6 +42,7 @@ head
     meta(name='twitter:image:src', content=cover)
     link(href='https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap', rel='stylesheet')
     link(rel='stylesheet', href='css/main.css')
+    link(rel='stylesheet', href='https://unpkg.com/aos@next/dist/aos.css')
     <!-- Global site tag (gtag.js) - Google Analytics -->
     script(async, src='https://www.googletagmanager.com/gtag/js?id=UA-173374418-1')
     script.

includes/intro.pug

@@ -3,6 +3,6 @@ section.section.intro.name
     div.intro__animation
         each _ in Array(311)
             span
-    p.intro__text.text--dark-primary
+    p(data-aos='fade-up').intro__text.text--dark-primary
         |I'm a software engineer based in Kyiv, Ukraine specializing in building exceptional websites, applications, and everything related to it
     a(href=social[0].url, rel='nofollow noopener noreferrer').intro__link.link-button Get In Touch

includes/other_projects.pug

@@ -2,7 +2,7 @@ section.section.other_projects
     h3.text--center Other Noteworthy Projects
     div.other_projects__container
         each project in otherProjects
-            div.other_projects__block
+            div(data-aos='zoom-in').other_projects__block
                 header.other_project__header
                     div.other_project__top
                         img(src='img/social/folder.svg', alt='Folder', title='Folder').header__image
@@ -18,4 +18,4 @@ section.section.other_projects
                 footer.other_project__footer
                     ul.project__technologies.text--monospace.text--dark-primary
                         each library in project.libraries
-                            li #{library}
+                            li #{library}

includes/projects.pug

@@ -1,7 +1,7 @@
 section.section.projects
-    h3.section__h3 Featured Projects
+    h3(data-aos='fade-right').section__h3 Featured Projects
     each project, index in projects
-        div(class=index % 2 === 0 ? '' : 'reversed').projects__block
+        div(class=index % 2 === 0 ? '' : 'reversed' data-aos=index % 2 === 0 ? 'fade-right' : 'fade-left').projects__block
             a(href=project.url, target='_blank', rel='nofollow noopener noreferrer').project__image.image__link
                 img(src='img/projects/' + project.name.toLowerCase() + '.png', alt=project.name, title=project.name)
             div.project__description

layouts/default.pug

@@ -3,4 +3,5 @@ html(lang='en')
     include ../includes/head.pug
     body
         block content
-        script(src='js/main.js')
+        script(src='https://unpkg.com/aos@next/dist/aos.js')
+        script(src='js/main.js')

scripts/main.js

@@ -1,4 +1,6 @@
 document.addEventListener('DOMContentLoaded', () => {
+	AOS?.init?.();
+
 	if (window.location.hash) {
 		document.querySelector('.' + window.location.hash.replace('#', '')).scrollIntoView({behavior: 'smooth'});
 	}