Update position duration dinamically (#67)

Co-authored-by: Matheus Jardim Bernardes <matheus.jardim@conceptu.ind.br>

Author: matheusjardimb

.github/lighthouse/budget.json

@@ -4,11 +4,11 @@
     "resourceSizes": [
       {
         "resourceType": "document",
-        "budget": 18
+        "budget": 25
       },
       {
         "resourceType": "total",
-        "budget": 200
+        "budget": 300
       }
     ]
   }

.github/workflows/lighthouse.yml

@@ -6,12 +6,14 @@ jobs:
   lighthouse:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Audit URLs using Lighthouse
-        uses: treosh/lighthouse-ci-action@v9
+        uses: treosh/lighthouse-ci-action@v11
         with:
           urls: "https://matheusjardimb.com/"
           budgetPath: ".github/lighthouse/budget.json"
           uploadArtifacts: true
           temporaryPublicStorage: true
           configPath: ".github/lighthouse/lighthouserc-static-dist-dir.yml"
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.GITHUB_TOKEN }}

assets/css/style.css

@@ -850,6 +850,11 @@ main {
   line-height: 1.6;
 }
 
+#professor-period,
+#cto-period {
+  display: inline;
+}
+
 .timeline-item:not(:last-child)::before {
   content: "";
   position: absolute;

assets/images/my-avatar.png

@@ -30,6 +30,45 @@ 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);
+
+  let result = "";
+  if (years > 0) {
+    result += `${years} yr${years > 1 ? "s" : ""}`;
+  }
+  if (months > 0) {
+    if (result) result += " ";
+    result += `${months} mo${months > 1 ? "s" : ""}`;
+  }
+
+  return result || "0 mos";
+}
+
+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");

assets/js/script.js

@@ -34,7 +34,7 @@
     <meta property="og:url" content="https://matheusjardimb.com/" />
     <meta
       property="og:image"
-      content="https://matheusjardimb.com/assets/images/my-avatar.png"
+      content="https://matheusjardimb.com/assets/images/my-avatar.webp"
     />
 
     <!-- favicon -->
@@ -667,7 +667,10 @@ <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 +680,10 @@ <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>-->