Update project tag year

a1exalexander · Jan 3, 2025 · 1f1baec · 1f1baec
1 parent ac0c1fa
commit 1f1baec
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 28 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -93,14 +93,14 @@ const getNumberOfYearsAndMonthsFromMay2022 = () => {
     const may2022 = new Date('2022-05-01');
     const now = new Date();
     const diff = now.getTime() - may2022.getTime();
-    
+
     const diffInMonths = Math.floor(diff / (1000 * 60 * 60 * 24 * 30));
     const years = Math.floor(diffInMonths / 12);
     const months = diffInMonths % 12;
-    
+
     const yearsText = years === 1 ? '1 YEAR' : `${years} YEARS`;
     const monthsText = months === 1 ? '1 MONTH' : `${months} MONTHS`;
-    
+
     if (years === 0) {
         return monthsText;
     } else if (months === 0) {
@@ -1034,7 +1034,7 @@ export default function Home() {
                                 className={styles.project}
                                 github="https://github.com/a1exalexander/polly"
                                 title="Polly"
-                                time="2024"
+                                time="2025"
                                 status="production"
                                 href="https://polly-voting-app.vercel.app/"
                                 description="Real-Time Task Estimation and Voting Platform"

diff --git a/src/components/Project/Project.module.css b/src/components/Project/Project.module.css
@@ -176,86 +176,118 @@
 /* New Animation */
 
 @keyframes spark1 {
-    from {
+    0% {
         transform: scale(0.5) translate(0, 0);
+        opacity: 0;
+    }
+    90% {
+        transform: scale(1) translate(-40px, -55px);
         opacity: 1;
     }
-    to {
+    100% {
         transform: scale(1) translate(-40px, -55px);
-        opacity: 0.5;
+        opacity: 0;
     }
 }
 
 @keyframes spark2 {
-    from {
+    0% {
         transform: scale(0.5) translate(0, 0);
+        opacity: 0;
+    }
+    90% {
+        transform: scale(1) translate(60px, -30px);
         opacity: 1;
     }
-    to {
+    100% {
         transform: scale(1) translate(60px, -30px);
-        opacity: 0.5;
+        opacity: 0;
     }
 }
 @keyframes spark3 {
-    from {
+    0% {
         transform: scale(0.5) translate(0, 0);
+        opacity: 0;
+    }
+    90% {
+        transform: scale(1) translate(-70px, 30px);
         opacity: 1;
     }
-    to {
+    100% {
         transform: scale(1) translate(-70px, 30px);
-        opacity: 0.5;
+        opacity: 0;
     }
 }
 @keyframes spark4 {
-    from {
+    0% {
         transform: scale(0.5) translate(0, 0);
+        opacity: 0;
+    }
+    90% {
+        transform: scale(1) translate(100px, 20px);
         opacity: 1;
     }
-    to {
+    100% {
         transform: scale(1) translate(100px, 20px);
-        opacity: 0.5;
+        opacity: 0;
     }
 }
 @keyframes spark5 {
-    from {
+    0% {
         transform: scale(0.5) translate(0, 0);
+        opacity: 0;
+    }
+    90% {
+        transform: scale(1) translate(0px, -50px);
         opacity: 1;
     }
-    to {
+    100% {
         transform: scale(1) translate(0px, -50px);
-        opacity: 0.5;
+        opacity: 0;
     }
 }
 @keyframes spark6 {
-    from {
+    0% {
         transform: scale(0.5) translate(0, 0);
+        opacity: 0;
+    }
+    90% {
+        transform: scale(1) translate(90px, 0px);
         opacity: 1;
     }
-    to {
+    100% {
         transform: scale(1) translate(90px, 0px);
-        opacity: 0.5;
+        opacity: 0;
     }
 }
 
 @keyframes spark7 {
-    from {
+    0% {
         transform: scale(0.5) translate(0, 0);
+        opacity: 0;
+    }
+    90% {
+        transform: scale(1) translate(-10px, 60px);
         opacity: 1;
     }
-    to {
+    100% {
         transform: scale(1) translate(-10px, 60px);
-        opacity: 0.5;
+        opacity: 0;
     }
 }
 
 @keyframes spark8 {
-    from {
+    0% {
         transform: scale(0.5) translate(0, 0);
+        opacity: 0;
+    }
+    90% {
+        transform: scale(1) translate(-90px, 0px);
         opacity: 1;
     }
-    to {
+    100% {
         transform: scale(1) translate(-90px, 0px);
-        opacity: 0.5;
+        opacity: 0;
     }
 }
 
@@ -266,6 +298,7 @@
 
 .newTag {
     text-transform: uppercase;
+    transform-origin: center;
     font-weight: 500;
     color: var(--B500);
     display: none;