diff --git a/htdocs/assets/_integrate.php b/htdocs/assets/_integrate.php
index e8b575d..36e4fec 100644
--- a/htdocs/assets/_integrate.php
+++ b/htdocs/assets/_integrate.php
@@ -4,6 +4,7 @@
 <link rel="stylesheet" href="assets/style.css">
 <link rel="stylesheet" href="assets/extra-style.css">
 <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/shift-away.css">
+<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
@@ -11,6 +12,7 @@
 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 <script src="https://unpkg.com/@popperjs/core@2"></script>
 <script src="https://unpkg.com/tippy.js@6"></script>
+<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo $_ENV['ANALYTICS_ID'] ?>"></script>
 <script>
diff --git a/htdocs/assets/js/aos-config.js b/htdocs/assets/js/aos-config.js
new file mode 100644
index 0000000..c6f5e9e
--- /dev/null
+++ b/htdocs/assets/js/aos-config.js
@@ -0,0 +1,3 @@
+AOS.init({
+    duration: 1000,
+});
\ No newline at end of file
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index f600146..61f175e 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -1074,6 +1074,10 @@ video {
   width: 250px;
 }
 
+.w-\[25px\] {
+  width: 25px;
+}
+
 .w-\[27px\] {
   width: 27px;
 }
@@ -1139,18 +1143,6 @@ video {
   width: 100vw;
 }
 
-.w-\[20px\] {
-  width: 20px;
-}
-
-.w-\[330px\] {
-  width: 330px;
-}
-
-.w-\[25px\] {
-  width: 25px;
-}
-
 .max-w-\[45vw\] {
   max-width: 45vw;
 }
@@ -1159,51 +1151,11 @@ video {
   transform-origin: left;
 }
 
-.translate-x-1\/2 {
-  --tw-translate-x: 50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-y-1\/2 {
-  --tw-translate-y: 50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-x-1\/2 {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-y-1\/2 {
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-x-1 {
-  --tw-translate-x: 0.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-y-\[2px\] {
-  --tw-translate-y: -2px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-y-\[2px\] {
-  --tw-translate-y: 2px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-translate-y-\[1px\] {
   --tw-translate-y: -1px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.rotate-\[15deg\] {
-  --tw-rotate: 15deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-rotate-45 {
   --tw-rotate: -45deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1214,6 +1166,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-\[15deg\] {
+  --tw-rotate: 15deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-\[0\.70\] {
   --tw-scale-x: 0.70;
   --tw-scale-y: 0.70;
@@ -1403,14 +1360,6 @@ video {
   border-top-width: 5px;
 }
 
-.border-t-\[2px\] {
-  border-top-width: 2px;
-}
-
-.border-t-\[10px\] {
-  border-top-width: 10px;
-}
-
 .border-\[rgb\(22\2c _163\2c _74\)\] {
   --tw-border-opacity: 1;
   border-color: rgb(22 163 74 / var(--tw-border-opacity));
diff --git a/htdocs/contact.php b/htdocs/contact.php
index 7701fac..02eccca 100644
--- a/htdocs/contact.php
+++ b/htdocs/contact.php
@@ -117,5 +117,6 @@ write_dataset($conn);
     <script type="text/javascript" src="assets/js/tippy-config.js"></script>
     <script type="text/javascript" src="assets/js/core-animation.js"></script>
     <script type="text/javascript" src="assets/js/contactform-config.js"></script>
+    <script type="text/javascript" src="assets/js/aos-config.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/htdocs/home.php b/htdocs/home.php
index 6eada49..b3c8db2 100644
--- a/htdocs/home.php
+++ b/htdocs/home.php
@@ -224,5 +224,6 @@ write_dataset($conn);
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
     <script type="text/javascript" src="assets/js/tippy-config.js"></script>
     <script type="text/javascript" src="assets/js/core-animation.js"></script>
+    <script type="text/javascript" src="assets/js/aos-config.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/htdocs/projects.php b/htdocs/projects.php
index 6ad1dc5..11187b1 100644
--- a/htdocs/projects.php
+++ b/htdocs/projects.php
@@ -190,5 +190,6 @@ $years = create_project_years_array($conn);
     <script type="text/javascript" src="assets/js/floatingbar-config.js"></script>
     <script type="text/javascript" src="assets/js/keybinding-config.js"></script>
     <script type="text/javascript" src="assets/js/tippy-config.js"></script>
+    <script type="text/javascript" src="assets/js/aos-config.js"></script>
 </body>
 </html>
\ No newline at end of file