added animation for the line in projects.html, need to change the line to make...

added animation for the line in projects.html, need to change the line to make it look better with tracing and change the current image placeholders and hide the scrollbar

css/styles-projects.css

@@ -7,6 +7,13 @@
     font-weight: normal;
     font-style: normal;
   }
+
+  @font-face {
+    font-family: "GinesoCondMedium";
+    src: url("../fonts/Gineso/GinesoCondMedium.otf") format("opentype");
+    font-weight: normal;
+    font-style: normal;
+  }
   
   /* ---------------------------------------
      2) Global Reset & Body Styles
@@ -128,15 +135,36 @@
   }
   
   .project-description {
+    font-family: "GinesoCondMedium";
     flex: 1 1 55%;
   }
   
   .project-description h2 {
+    font-family: "GinesoCondMedium";
     font-size: clamp(1.5rem, 3vw, 2rem);
     margin-bottom: 0.5rem;
   }
   
   .project-description p {
+    font-family: "GinesoCondMedium";
     font-size: clamp(1rem, 2.5vw, 1.2rem);
   }
-  
\ No newline at end of file
+  
+  /* ---------------------------------------
+     7) SVJ CONTAINERS
+  --------------------------------------- */
+
+  .svg-container{
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 6473px;
+  }
+
+  svg{
+    height: 100%;
+  }

js/projects.js

-$(document).ready(function () {
-  // Initial position of the line
-  var $line = $(".vertical-line");
-  var $window = $(window);
+// Register GSAP Plugins
+gsap.registerPlugin(ScrollTrigger);
 
-  // Function to update the line position on scroll
-  function updateLinePosition() {
-    var scrollPercentage =
-      ($window.scrollTop() / ($("body").height() - $window.height())) * 100;
-    var newHeight = (scrollPercentage / 100) * ($window.height() * 3.44);
+// Select the SVG path
+let svg = document.querySelector("svg");
+let path = svg.querySelector("path");
 
-    $line.css("height", newHeight + 20 + "px");
-  }
+// Get the total path length
+const pathLength = path.getTotalLength();
+
+console.log("Path Length:", pathLength); // Debugging line to check length
 
-  // Update the line position on page load
-  updateLinePosition();
+// Set initial strokeDashArray and strokeDashOffset
+gsap.set(path, { strokeDasharray: pathLength, strokeDashoffset: pathLength });
 
-  // Update the line position on scroll
-  $window.scroll(function () {
-    updateLinePosition();
-  });
-});
\ No newline at end of file
+// Create the scroll-based animation
+gsap.fromTo(
+  path, 
+  { strokeDashoffset: pathLength }, 
+  {
+    strokeDashoffset: 0,
+    duration: 5,
+    ease: "none",
+    scrollTrigger: {
+      trigger: ".svg-container", // Make sure this is the right selector
+      start: "top top",
+      end: "bottom bottom",
+      scrub: 1,
+    }
+  }
+);

node_modules/.package-lock.json

+{
+  "name": "Personal-Portfolio",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "node_modules/gsap": {
+      "version": "3.12.7",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.7.tgz",
+      "integrity": "sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license. Club GSAP members get more: https://gsap.com/licensing/. Why GreenSock doesn't employ an MIT license: https://gsap.com/why-license/"
+    }
+  }
+}

node_modules/gsap/CSSRulePlugin.js

+/*!
+ * CSSRulePlugin 3.12.7
+ * https://gsap.com
+ *
+ * @license Copyright 2008-2025, GreenSock. All rights reserved.
+ * Subject to the terms at https://gsap.com/standard-license or for
+ * Club GSAP members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+var gsap,
+    _coreInitted,
+    _win,
+    _doc,
+    CSSPlugin,
+    _windowExists = function _windowExists() {
+  return typeof window !== "undefined";
+},
+    _getGSAP = function _getGSAP() {
+  return gsap || _windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap;
+},
+    _checkRegister = function _checkRegister() {
+  if (!_coreInitted) {
+    _initCore();
+
+    if (!CSSPlugin) {
+      console.warn("Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)");
+    }
+  }
+
+  return _coreInitted;
+},
+    _initCore = function _initCore(core) {
+  gsap = core || _getGSAP();
+
+  if (_windowExists()) {
+    _win = window;
+    _doc = document;
+  }
+
+  if (gsap) {
+    CSSPlugin = gsap.plugins.css;
+
+    if (CSSPlugin) {
+      _coreInitted = 1;
+    }
+  }
+};
+
+export var CSSRulePlugin = {
+  version: "3.12.7",
+  name: "cssRule",
+  init: function init(target, value, tween, index, targets) {
+    if (!_checkRegister() || typeof target.cssText === "undefined") {
+      return false;
+    }
+
+    var div = target._gsProxy = target._gsProxy || _doc.createElement("div");
+
+    this.ss = target;
+    this.style = div.style;
+    div.style.cssText = target.cssText;
+    CSSPlugin.prototype.init.call(this, div, value, tween, index, targets); //we just offload all the work to the regular CSSPlugin and then copy the cssText back over to the rule in the render() method. This allows us to have all of the updates to CSSPlugin automatically flow through to CSSRulePlugin instead of having to maintain both
+  },
+  render: function render(ratio, data) {
+    var pt = data._pt,
+        style = data.style,
+        ss = data.ss,
+        i;
+
+    while (pt) {
+      pt.r(ratio, pt.d);
+      pt = pt._next;
+    }
+
+    i = style.length;
+
+    while (--i > -1) {
+      ss[style[i]] = style[style[i]];
+    }
+  },
+  getRule: function getRule(selector) {
+    _checkRegister();
+
+    var ruleProp = _doc.all ? "rules" : "cssRules",
+        styleSheets = _doc.styleSheets,
+        i = styleSheets.length,
+        pseudo = selector.charAt(0) === ":",
+        j,
+        curSS,
+        cs,
+        a;
+    selector = (pseudo ? "" : ",") + selector.split("::").join(":").toLowerCase() + ","; //note: old versions of IE report tag name selectors as upper case, so we just change everything to lowercase.
+
+    if (pseudo) {
+      a = [];
+    }
+
+    while (i--) {
+      //Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch.
+      try {
+        curSS = styleSheets[i][ruleProp];
+
+        if (!curSS) {
+          continue;
+        }
+
+        j = curSS.length;
+      } catch (e) {
+        console.warn(e);
+        continue;
+      }
+
+      while (--j > -1) {
+        cs = curSS[j];
+
+        if (cs.selectorText && ("," + cs.selectorText.split("::").join(":").toLowerCase() + ",").indexOf(selector) !== -1) {
+          //note: IE adds an extra ":" to pseudo selectors, so .myClass:after becomes .myClass::after, so we need to strip the extra one out.
+          if (pseudo) {
+            a.push(cs.style);
+          } else {
+            return cs.style;
+          }
+        }
+      }
+    }
+
+    return a;
+  },
+  register: _initCore
+};
+_getGSAP() && gsap.registerPlugin(CSSRulePlugin);
+export { CSSRulePlugin as default };
\ No newline at end of file

node_modules/gsap/CustomEase.js

+/*!
+ * CustomEase 3.12.7
+ * https://gsap.com
+ *
+ * @license Copyright 2008-2025, GreenSock. All rights reserved.
+ * Subject to the terms at https://gsap.com/standard-license or for
+ * Club GSAP members, the agreement issued with that membership.
+ * @author: Jack Doyle, jack@greensock.com
+*/
+
+/* eslint-disable */
+import { stringToRawPath, rawPathToString, transformRawPath } from "./utils/paths.js";
+
+var gsap,
+    _coreInitted,
+    _getGSAP = function _getGSAP() {
+  return gsap || typeof window !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap;
+},
+    _initCore = function _initCore() {
+  gsap = _getGSAP();
+
+  if (gsap) {
+    gsap.registerEase("_CE", CustomEase.create);
+    _coreInitted = 1;
+  } else {
+    console.warn("Please gsap.registerPlugin(CustomEase)");
+  }
+},
+    _bigNum = 1e20,
+    _round = function _round(value) {
+  return ~~(value * 1000 + (value < 0 ? -.5 : .5)) / 1000;
+},
+    _bonusValidated = 1,
+    //<name>CustomEase</name>
+_numExp = /[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/gi,
+    //finds any numbers, including ones that start with += or -=, negative numbers, and ones in scientific notation like 1e-8.
+_needsParsingExp = /[cLlsSaAhHvVtTqQ]/g,
+    _findMinimum = function _findMinimum(values) {
+  var l = values.length,
+      min = _bigNum,
+      i;
+
+  for (i = 1; i < l; i += 6) {
+    +values[i] < min && (min = +values[i]);
+  }
+
+  return min;
+},
+    //takes all the points and translates/scales them so that the x starts at 0 and ends at 1.
+_normalize = function _normalize(values, height, originY) {
+  if (!originY && originY !== 0) {
+    originY = Math.max(+values[values.length - 1], +values[1]);
+  }
+
+  var tx = +values[0] * -1,
+      ty = -originY,
+      l = values.length,
+      sx = 1 / (+values[l - 2] + tx),
+      sy = -height || (Math.abs(+values[l - 1] - +values[1]) < 0.01 * (+values[l - 2] - +values[0]) ? _findMinimum(values) + ty : +values[l - 1] + ty),
+      i;
+
+  if (sy) {
+    //typically y ends at 1 (so that the end values are reached)
+    sy = 1 / sy;
+  } else {
+    //in case the ease returns to its beginning value, scale everything proportionally
+    sy = -sx;
+  }
+
+  for (i = 0; i < l; i += 2) {
+    values[i] = (+values[i] + tx) * sx;
+    values[i + 1] = (+values[i + 1] + ty) * sy;
+  }
+},
+    //note that this function returns point objects like {x, y} rather than working with segments which are arrays with alternating x, y values as in the similar function in paths.js
+_bezierToPoints = function _bezierToPoints(x1, y1, x2, y2, x3, y3, x4, y4, threshold, points, index) {
+  var x12 = (x1 + x2) / 2,
+      y12 = (y1 + y2) / 2,
+      x23 = (x2 + x3) / 2,
+      y23 = (y2 + y3) / 2,
+      x34 = (x3 + x4) / 2,
+      y34 = (y3 + y4) / 2,
+      x123 = (x12 + x23) / 2,
+      y123 = (y12 + y23) / 2,
+      x234 = (x23 + x34) / 2,
+      y234 = (y23 + y34) / 2,
+      x1234 = (x123 + x234) / 2,
+      y1234 = (y123 + y234) / 2,
+      dx = x4 - x1,
+      dy = y4 - y1,
+      d2 = Math.abs((x2 - x4) * dy - (y2 - y4) * dx),
+      d3 = Math.abs((x3 - x4) * dy - (y3 - y4) * dx),
+      length;
+
+  if (!points) {
+    points = [{
+      x: x1,
+      y: y1
+    }, {
+      x: x4,
+      y: y4
+    }];
+    index = 1;
+  }
+
+  points.splice(index || points.length - 1, 0, {
+    x: x1234,
+    y: y1234
+  });
+
+  if ((d2 + d3) * (d2 + d3) > threshold * (dx * dx + dy * dy)) {
+    length = points.length;
+
+    _bezierToPoints(x1, y1, x12, y12, x123, y123, x1234, y1234, threshold, points, index);
+
+    _bezierToPoints(x1234, y1234, x234, y234, x34, y34, x4, y4, threshold, points, index + 1 + (points.length - length));
+  }
+
+  return points;
+};
+
+export var CustomEase = /*#__PURE__*/function () {
+  function CustomEase(id, data, config) {
+    _coreInitted || _initCore();
+    this.id = id;
+    _bonusValidated && this.setData(data, config);
+  }
+
+  var _proto = CustomEase.prototype;
+
+  _proto.setData = function setData(data, config) {
+    config = config || {};
+    data = data || "0,0,1,1";
+    var values = data.match(_numExp),
+        closest = 1,
+        points = [],
+        lookup = [],
+        precision = config.precision || 1,
+        fast = precision <= 1,
+        l,
+        a1,
+        a2,
+        i,
+        inc,
+        j,
+        point,
+        prevPoint,
+        p;
+    this.data = data;
+
+    if (_needsParsingExp.test(data) || ~data.indexOf("M") && data.indexOf("C") < 0) {
+      values = stringToRawPath(data)[0];
+    }
+
+    l = values.length;
+
+    if (l === 4) {
+      values.unshift(0, 0);
+      values.push(1, 1);
+      l = 8;
+    } else if ((l - 2) % 6) {
+      throw "Invalid CustomEase";
+    }
+
+    if (+values[0] !== 0 || +values[l - 2] !== 1) {
+      _normalize(values, config.height, config.originY);
+    }
+
+    this.segment = values;
+
+    for (i = 2; i < l; i += 6) {
+      a1 = {
+        x: +values[i - 2],
+        y: +values[i - 1]
+      };
+      a2 = {
+        x: +values[i + 4],
+        y: +values[i + 5]
+      };
+      points.push(a1, a2);
+
+      _bezierToPoints(a1.x, a1.y, +values[i], +values[i + 1], +values[i + 2], +values[i + 3], a2.x, a2.y, 1 / (precision * 200000), points, points.length - 1);
+    }
+
+    l = points.length;
+
+    for (i = 0; i < l; i++) {
+      point = points[i];
+      prevPoint = points[i - 1] || point;
+
+      if ((point.x > prevPoint.x || prevPoint.y !== point.y && prevPoint.x === point.x || point === prevPoint) && point.x <= 1) {
+        //if a point goes BACKWARD in time or is a duplicate, just drop it. Also it shouldn't go past 1 on the x axis, as could happen in a string like "M0,0 C0,0 0.12,0.68 0.18,0.788 0.195,0.845 0.308,1 0.32,1 0.403,1.005 0.398,1 0.5,1 0.602,1 0.816,1.005 0.9,1 0.91,1 0.948,0.69 0.962,0.615 1.003,0.376 1,0 1,0".
+        prevPoint.cx = point.x - prevPoint.x; //change in x between this point and the next point (performance optimization)
+
+        prevPoint.cy = point.y - prevPoint.y;
+        prevPoint.n = point;
+        prevPoint.nx = point.x; //next point's x value (performance optimization, making lookups faster in getRatio()). Remember, the lookup will always land on a spot where it's either this point or the very next one (never beyond that)
+
+        if (fast && i > 1 && Math.abs(prevPoint.cy / prevPoint.cx - points[i - 2].cy / points[i - 2].cx) > 2) {
+          //if there's a sudden change in direction, prioritize accuracy over speed. Like a bounce ease - you don't want to risk the sampling chunks landing on each side of the bounce anchor and having it clipped off.
+          fast = 0;
+        }
+
+        if (prevPoint.cx < closest) {
+          if (!prevPoint.cx) {
+            prevPoint.cx = 0.001; //avoids math problems in getRatio() (dividing by zero)
+
+            if (i === l - 1) {
+              //in case the final segment goes vertical RIGHT at the end, make sure we end at the end.
+              prevPoint.x -= 0.001;
+              closest = Math.min(closest, 0.001);
+              fast = 0;
+            }
+          } else {
+            closest = prevPoint.cx;
+          }
+        }
+      } else {
+        points.splice(i--, 1);
+        l--;
+      }
+    }
+
+    l = 1 / closest + 1 | 0;
+    inc = 1 / l;
+    j = 0;
+    point = points[0];
+
+    if (fast) {
+      for (i = 0; i < l; i++) {
+        //for fastest lookups, we just sample along the path at equal x (time) distance. Uses more memory and is slightly less accurate for anchors that don't land on the sampling points, but for the vast majority of eases it's excellent (and fast).
+        p = i * inc;
+
+        if (point.nx < p) {
+          point = points[++j];
+        }
+
+        a1 = point.y + (p - point.x) / point.cx * point.cy;
+        lookup[i] = {
+          x: p,
+          cx: inc,
+          y: a1,
+          cy: 0,
+          nx: 9
+        };
+
+        if (i) {
+          lookup[i - 1].cy = a1 - lookup[i - 1].y;
+        }
+      }
+
+      j = points[points.length - 1];
+      lookup[l - 1].cy = j.y - a1;
+      lookup[l - 1].cx = j.x - lookup[lookup.length - 1].x; //make sure it lands EXACTLY where it should. Otherwise, it might be something like 0.9999999999 instead of 1.
+    } else {
+      //this option is more accurate, ensuring that EVERY anchor is hit perfectly. Clipping across a bounce, for example, would never happen.
+      for (i = 0; i < l; i++) {
+        //build a lookup table based on the smallest distance so that we can instantly find the appropriate point (well, it'll either be that point or the very next one). We'll look up based on the linear progress. So it's it's 0.5 and the lookup table has 100 elements, it'd be like lookup[Math.floor(0.5 * 100)]
+        if (point.nx < i * inc) {
+          point = points[++j];
+        }
+
+        lookup[i] = point;
+      }
+
+      if (j < points.length - 1) {
+        lookup[i - 1] = points[points.length - 2];
+      }
+    } //this._calcEnd = (points[points.length-1].y !== 1 || points[0].y !== 0); //ensures that we don't run into floating point errors. As long as we're starting at 0 and ending at 1, tell GSAP to skip the final calculation and use 0/1 as the factor.
+
+
+    this.ease = function (p) {
+      var point = lookup[p * l | 0] || lookup[l - 1];
+
+      if (point.nx < p) {
+        point = point.n;
+      }
+
+      return point.y + (p - point.x) / point.cx * point.cy;
+    };
+
+    this.ease.custom = this;
+    this.id && gsap && gsap.registerEase(this.id, this.ease);
+    return this;
+  };
+
+  _proto.getSVGData = function getSVGData(config) {
+    return CustomEase.getSVGData(this, config);
+  };
+
+  CustomEase.create = function create(id, data, config) {
+    return new CustomEase(id, data, config).ease;
+  };
+
+  CustomEase.register = function register(core) {
+    gsap = core;
+
+    _initCore();
+  };
+
+  CustomEase.get = function get(id) {
+    return gsap.parseEase(id);
+  };
+
+  CustomEase.getSVGData = function getSVGData(ease, config) {
+    config = config || {};
+    var width = config.width || 100,
+        height = config.height || 100,
+        x = config.x || 0,
+        y = (config.y || 0) + height,
+        e = gsap.utils.toArray(config.path)[0],
+        a,
+        slope,
+        i,
+        inc,
+        tx,
+        ty,
+        precision,
+        threshold,
+        prevX,
+        prevY;
+
+    if (config.invert) {
+      height = -height;
+      y = 0;
+    }
+
+    if (typeof ease === "string") {
+      ease = gsap.parseEase(ease);
+    }
+
+    if (ease.custom) {
+      ease = ease.custom;
+    }
+
+    if (ease instanceof CustomEase) {
+      a = rawPathToString(transformRawPath([ease.segment], width, 0, 0, -height, x, y));
+    } else {
+      a = [x, y];
+      precision = Math.max(5, (config.precision || 1) * 200);
+      inc = 1 / precision;
+      precision += 2;
+      threshold = 5 / precision;
+      prevX = _round(x + inc * width);
+      prevY = _round(y + ease(inc) * -height);
+      slope = (prevY - y) / (prevX - x);
+
+      for (i = 2; i < precision; i++) {
+        tx = _round(x + i * inc * width);
+        ty = _round(y + ease(i * inc) * -height);
+
+        if (Math.abs((ty - prevY) / (tx - prevX) - slope) > threshold || i === precision - 1) {
+          //only add points when the slope changes beyond the threshold
+          a.push(prevX, prevY);
+          slope = (ty - prevY) / (tx - prevX);
+        }
+
+        prevX = tx;
+        prevY = ty;
+      }
+
+      a = "M" + a.join(",");
+    }
+
+    e && e.setAttribute("d", a);
+    return a;
+  };
+
+  return CustomEase;
+}();
+CustomEase.version = "3.12.7";
+CustomEase.headless = true;
+_getGSAP() && gsap.registerPlugin(CustomEase);
+export { CustomEase as default };
\ No newline at end of file

node_modules/gsap/SECURITY.md

+# Security Policy
+
+Please report (suspected) security vulnerabilities to
+**[info@greensock.com](mailto:info@greensock.com)**. You will receive a response from
+us within 72 hours. If the issue is confirmed, we will release a patch as soon
+as possible depending on complexity.
\ No newline at end of file

node_modules/gsap/all.js

+import gsap from "./gsap-core.js";
+import CSSPlugin from "./CSSPlugin.js";
+var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap,
+    // to protect from tree shaking
+TweenMaxWithCSS = gsapWithCSS.core.Tween;
+export { gsapWithCSS as gsap, gsapWithCSS as default, TweenMaxWithCSS as TweenMax, CSSPlugin };
+export { TweenLite, TimelineMax, TimelineLite, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, wrap, wrapYoyo, distribute, random, snap, normalize, getUnit, clamp, splitColor, toArray, mapRange, pipe, unitize, interpolate, shuffle, selector } from "./gsap-core.js";
+export * from "./CustomEase.js";
+export * from "./Draggable.js";
+export * from "./CSSRulePlugin.js";
+export * from "./EaselPlugin.js";
+export * from "./EasePack.js";
+export * from "./Flip.js";
+export * from "./MotionPathPlugin.js";
+export * from "./Observer.js";
+export * from "./PixiPlugin.js";
+export * from "./ScrollToPlugin.js";
+export * from "./ScrollTrigger.js";
+export * from "./TextPlugin.js"; //BONUS EXPORTS
+// export * from "./DrawSVGPlugin.js";
+// export * from "./Physics2DPlugin.js";
+// export * from "./PhysicsPropsPlugin.js";
+// export * from "./ScrambleTextPlugin.js";
+// export * from "./CustomBounce.js";
+// export * from "./CustomWiggle.js";
+// export * from "./GSDevTools.js";
+// export * from "./InertiaPlugin.js";
+// export * from "./MorphSVGPlugin.js";
+// export * from "./MotionPathHelper.js";
+// export * from "./ScrollSmoother.js";
+// export * from "./SplitText.js";
\ No newline at end of file