update position duration dinamically

Author: Matheus Jardim Bernardes

assets/js/script.js

@@ -30,6 +30,42 @@ function updateAge() {
 
 setInterval(updateAge, 1000);
 
+// Update work periods
+function calculatePeriod(startDate) {
+  const now = new Date();
+  const start = new Date(startDate);
+  const diffTime = Math.abs(now - start);
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  
+  const years = Math.floor(diffDays / 365);
+  const months = Math.floor((diffDays % 365) / 30);
+  
+  if (years > 0 && months > 0) {
+    return `${years} yr${years > 1 ? 's' : ''} ${months} mo${months > 1 ? 's' : ''}`;
+  } else if (years > 0) {
+    return `${years} yr${years > 1 ? 's' : ''}`;
+  } else {
+    return `${months} mo${months > 1 ? 's' : ''}`;
+  }
+}
+
+function updateWorkPeriods() {
+  const professorElement = document.getElementById("professor-period");
+  const ctoElement = document.getElementById("cto-period");
+  
+  if (professorElement) {
+    professorElement.innerHTML = calculatePeriod(new Date(2024, 1, 1)); // Feb 2024
+  }
+  
+  if (ctoElement) {
+    ctoElement.innerHTML = calculatePeriod(new Date(2016, 11, 1)); // Dec 2016
+  }
+}
+
+// Update periods initially and then every hour
+updateWorkPeriods();
+setInterval(updateWorkPeriods, 3600000); // Update every hour
+
 // element toggle function
 const elementToggleFunc = function (elem) {
   elem.classList.toggle("active");

index.html

@@ -667,7 +667,7 @@ <h3 class="h3">Experience</h3>
             <ol class="timeline-list">
               <li class="timeline-item">
                 <h4 class="h4 timeline-item-title">Professor at Atitus</h4>
-                <span>Feb 2024 - Present · 3 mos</span>
+                <span>Feb 2024 - Present · <span id="professor-period">3 mos</span></span>
                 <!--                        <p class="timeline-text">-->
                 <!--                            TODO-->
                 <!--                        </p>-->
@@ -677,7 +677,7 @@ <h4 class="h4 timeline-item-title">Professor at Atitus</h4>
                 <h4 class="h4 timeline-item-title">
                   CTO at Conceptu Protótipos & Sistemas
                 </h4>
-                <span>Dec 2016 - Present · 7 yrs 5 mos</span>
+                <span>Dec 2016 - Present · <span id="cto-period">7 yrs 5 mos</span></span>
                 <!--                        <p class="timeline-text">-->
                 <!--                            TODO-->
                 <!--                        </p>-->