(refactor): switched to auto age and yoe calculation and improved load time by replacing render blocking scripts

htdocs/assets/_commonjs.php

@@ -1,5 +1,9 @@
+<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>
 <script type="text/javascript" src="assets/js/preloader-config.js"></script>
 <script type="text/javascript" src="assets/js/navmenu-config.js"></script>
 <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/tippy-config.js"></script>
+<script type="text/javascript" src="assets/js/aos-config.js"></script>

htdocs/assets/_integrate.php

@@ -10,9 +10,7 @@
 <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
 <script src="https://cdn.lordicon.com/lordicon-1.2.0.js"></script>
 <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>
+<script src="assets/js/utility-functions.js"></script>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo $_ENV['ANALYTICS_ID'] ?>"></script>
 <script>

htdocs/assets/js/utility-functions.js

@@ -0,0 +1,10 @@
+//---JS utility functions
+
+// function to calculate the year difference between the given date and the current date
+function calculateYearDiff(date) {
+    let givenDate = new Date(date);
+    let currentDate = new Date();
+    let timeDiff = currentDate.getTime() - givenDate.getTime();
+    let years = Math.floor(timeDiff / (1000 * 3600 * 24 * 365.25));
+    return years;
+}

htdocs/contact.php

@@ -115,6 +115,5 @@ write_dataset($conn);
     <?php require 'assets/_commonjs.php';?>
     <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>

htdocs/home.php

@@ -63,7 +63,7 @@ write_dataset($conn);
         <div class="aboutsection w-full flex flex-col justify-center items-center">
             <div class="hoverAnimatedContainer relative w-full p-10 mx-3 mt-[10rem] mb-5 bg-bg_secondary rounded-lg" data-aos="zoom-in-up" data-aos-duration="700" data-aos-once="true">
                 <h2 class="text-xl font-bold mb-3"><span class="text-accent_primary">About</span> Me</h2>
-                <p class="text-sm text-accent_four">Hey there! I'm Subhamoy, an 18-year-old tech enthusiast, Self-taught Full Stacked Web, Android Developer and UI/UX Designer. Crafting modern Websites and Android apps for more than 5 years. Delivering industry grade user experiences that are not only visually stunning but also intuitive.  Coding is my passion, and I pour my heart and soul into every line of code I write and every pixel I place. The digital realm is my canvas, and I'm determined to leave a lasting impact. So, get ready to witness the extraordinary, redefined future of technology with me</p>
+                <p class="text-sm text-accent_four">Hey there! I'm Subhamoy, an <script type="text/javascript">document.write(calculateYearDiff('2005-04-03'));</script>-year-old tech enthusiast, Self-taught Full Stacked Web, Android Developer and UI/UX Designer. Crafting modern Websites and Android apps for more than <script type="text/javascript">document.write(calculateYearDiff('2018-01-01'));</script>+ years. Delivering industry grade user experiences that are not only visually stunning but also intuitive.  Coding is my passion, and I pour my heart and soul into every line of code I write and every pixel I place. The digital realm is my canvas, and I'm determined to leave a lasting impact. So, get ready to witness the extraordinary, redefined future of technology with me</p>
             </div>
             <h2 class="text-2xl lg:text-3xl font-bold mt-[10rem] lg:mt-[7rem] mb-[2rem]">My <span class="text-accent_primary">Skills</span> and <span class="text-accent_primary">Expertise</span></h2>
             <div class="relative hidden w-[70%] lg:flex justify-center items-center mt-5">
@@ -221,6 +221,5 @@ write_dataset($conn);
     <?php require 'assets/_footer.php';?>
     <?php require 'assets/_commonjs.php';?>
     <script type="text/javascript" src="assets/js/core-animation.js"></script>
-    <script type="text/javascript" src="assets/js/aos-config.js"></script>
 </body>
 </html>

htdocs/projects.php

@@ -187,6 +187,5 @@ $years = create_project_years_array($conn);
     </div>
     <?php require 'assets/_footer.php';?>
     <?php require 'assets/_commonjs.php';?>
-    <script type="text/javascript" src="assets/js/aos-config.js"></script>
 </body>
 </html>