added scroll animation in timeline

Author: FlorianRuby

monthly_stats.json

@@ -2,18 +2,18 @@
   "topTrack": {
     "name": "One More Dance",
     "artist": "d4vd",
-    "plays": 154,
+    "plays": 137,
     "image": "https://lastfm.freetls.fastly.net/i/u/174s/1b1d95c32cf8508b25eb44072be69ad7.jpg"
   },
   "topArtist": {
     "name": "d4vd",
-    "plays": 325,
+    "plays": 308,
     "image": "https://lastfm.freetls.fastly.net/i/u/174s/04abd50f999854510c83b9a8c88f92a5.png"
   },
   "topAlbum": {
     "name": "One More Dance",
     "artist": "d4vd",
-    "plays": 154,
+    "plays": 137,
     "image": "https://lastfm.freetls.fastly.net/i/u/174s/1b1d95c32cf8508b25eb44072be69ad7.jpg"
   }
 }

script.js

@@ -78,6 +78,40 @@ document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('.content-section').forEach((section) => {
         observer.observe(section);
     });
+
+    // Timeline color transition
+    const timelineItems = document.querySelectorAll('.timeline-item');
+    const aboutSection = document.querySelector('#about-section');
+    
+    window.addEventListener('scroll', () => {
+        if (!aboutSection) return;
+        
+        const viewportHeight = window.innerHeight;
+        const scrollPosition = window.scrollY;
+        
+        timelineItems.forEach((item) => {
+            const itemRect = item.getBoundingClientRect();
+            const itemTop = itemRect.top;
+            const startTrigger = viewportHeight * 1; // Start transition earlier
+            const endTrigger = viewportHeight * 0.75;   // End transition later
+            
+            if (itemTop <= startTrigger && itemTop >= endTrigger) {
+                // Calculate progress (0 to 1) based on item's position between start and end points
+                const progress = (startTrigger - itemTop) / (startTrigger - endTrigger);
+                
+                // Interpolate from transparent to purple (#8E8DBE)
+                const opacity = progress;
+                item.style.setProperty('--timeline-color', `rgba(142, 141, 190, ${opacity})`);
+                item.style.setProperty('--timeline-opacity', opacity);
+            } else if (itemTop < endTrigger) {
+                item.style.setProperty('--timeline-color', '#8E8DBE'); // Fully purple
+                item.style.setProperty('--timeline-opacity', '1');
+            } else {
+                item.style.setProperty('--timeline-color', 'rgba(142, 141, 190, 0)'); // Fully transparent
+                item.style.setProperty('--timeline-opacity', '0');
+            }
+        });
+    });
 });
 
 // Artist image mapping with working image URL for d4vd

styles.css

@@ -575,8 +575,8 @@ body::-webkit-scrollbar {
 
 .tech-stack {
     display: grid;
-    grid-template-columns: repeat(2, 60px);
-    grid-template-rows: repeat(4, 60px);
+    grid-template-columns: repeat(2, 50px);
+    grid-template-rows: repeat(4, 50px);
     gap: 1.5rem;
     position: absolute;
     bottom: 1.5rem;
@@ -585,13 +585,13 @@ body::-webkit-scrollbar {
 
 .tech-stack a {
     display: block;
-    width: 60px;
-    height: 60px;
+    width: 50px;
+    height: 50px;
 }
 
 .tech-stack img {
-    width: 60px;
-    height: 60px;
+    width: 50px;
+    height: 50px;
     filter: grayscale(100%);
     transition: filter 0.3s ease, transform 0.2s ease;
 }
@@ -714,22 +714,24 @@ body::-webkit-scrollbar {
     content: '';
     position: absolute;
     left: 0;
-    top: 6px;  /* Adjust this to align with the title text */
+    top: 6px;
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    background: #8E8DBE;
+    background: var(--timeline-color, rgba(142, 141, 190, 0));
+    transition: background-color 0.3s ease;
 }
 
 .timeline-item::after {
     content: '';
     position: absolute;
     left: 5px;
-    top: 18px;  /* Adjust this (12px + 6px) to match the new dot position */
+    top: 20px;
     width: 2px;
     height: calc(100% + 1.5rem);
-    background: #8E8DBE;
-    opacity: 0.3;
+    background: var(--timeline-color, rgba(142, 141, 190, 0));
+    opacity: var(--timeline-opacity, 0);
+    transition: background-color 0.3s ease, opacity 0.3s ease;
 }
 
 .timeline-item:last-child::after {

weekly_chart.json

@@ -26,7 +26,7 @@
     },
     {
       "day": "Sun",
-      "count": 30
+      "count": 33
     }
   ]
 }