timeline

wiki/pages/home.html

@@ -177,6 +177,65 @@
   </div>
 </div>
 <canvas id="timeline"></canvas>
+
+<script>
+  function drawTimeline() {
+      const canvas = document.getElementById('timeline');
+      if (!canvas.getContext) return;
+      const ctx = canvas.getContext('2d');
+
+      // Clear the canvas before each redraw
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Get the current scroll position
+      const scrollY = window.scrollY || window.pageYOffset;
+
+      // Get the canvas position relative to the viewport
+      const canvasRect = canvas.getBoundingClientRect();
+
+      // Calculate the starting point of the canvas relative to the document
+      const canvasTop = scrollY + canvasRect.top;
+
+      // Determine the scroll progress relative to the canvas
+      const viewportHeight = window.innerHeight;
+      const scrollProgress = (scrollY + viewportHeight - canvasTop) / (canvas.height + viewportHeight);
+
+      // Clamp progress between 0 and 1
+      const progress = Math.max(0, Math.min(scrollProgress, 1));
+
+      // Drawing parameters
+      ctx.strokeStyle = '#185A4F';
+      ctx.lineWidth = 17;
+      ctx.lineCap = 'round';
+      ctx.lineJoin = 'round';
+
+      // Begin drawing
+      ctx.beginPath();
+
+      // Define your path here (customize as needed)
+      const startX = canvas.width / 2;
+      const startY = 0;
+      const endY = canvas.height;
+
+      // Calculate the current drawing point based on progress
+      const currentY = startY + (endY - startY) * progress;
+
+      // Move to the start point
+      ctx.moveTo(startX, startY);
+
+      // Draw line to the current point
+      ctx.lineTo(startX, currentY);
+
+      // Stroke the path
+      ctx.stroke();
+  }
+
+  // Initial draw
+  drawTimeline();
+
+  // Add scroll event listener
+  window.addEventListener('scroll', drawTimeline);
+</script>
 <!-- 
 <div class="homepage-content-img8 homepage-elements reveal" id="homepage-content-img8"></div>
 <div class="homepage-content-img9 homepage-elements reveal" id="homepage-content-img9"></div>