From 1f1baec02466196e749c85c1712f1ff64f3ee129 Mon Sep 17 00:00:00 2001
From: Oleksandr Ratushnyi <oleksandr.ratushnyi@namecheap.com>
Date: Fri, 3 Jan 2025 11:47:48 +0200
Subject: [PATCH] Update project tag year

---
 src/app/page.tsx                          |  8 +--
 src/components/Project/Project.module.css | 81 ++++++++++++++++-------
 2 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e772493..3a27d3b 100644
--- 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
index a61e69f..687dbb4 100644
--- 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;