From 99c90469654cf0462521c18cd1268d60b75c116d Mon Sep 17 00:00:00 2001
From: ColinD31 <colin.delrieu@univ-tlse2.fr>
Date: Tue, 3 Jun 2025 15:28:19 +0200
Subject: [PATCH 1/2] add smooth fade effect on scroll in skills progress bars

---
 src/containers/skillProgress/Progress.scss    |  3 +
 src/containers/skillProgress/skillProgress.js | 55 ++++++++++++++-----
 2 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/containers/skillProgress/Progress.scss b/src/containers/skillProgress/Progress.scss
index a448e9af31..802bc305b5 100644
--- a/src/containers/skillProgress/Progress.scss
+++ b/src/containers/skillProgress/Progress.scss
@@ -18,6 +18,9 @@
   background-color: $progressBarSpanBG;
   position: relative;
   overflow: hidden;
+  transition: width 1.2s cubic-bezier(0.4,0,0.2,1), opacity 0.8s ease;
+  width: 0;
+  opacity: 0;
 }
 .skill {
   line-height: 3.5vw;
diff --git a/src/containers/skillProgress/skillProgress.js b/src/containers/skillProgress/skillProgress.js
index 6fdb87dc7d..6280740b06 100644
--- a/src/containers/skillProgress/skillProgress.js
+++ b/src/containers/skillProgress/skillProgress.js
@@ -1,10 +1,47 @@
-import React from "react";
+import React, { useRef, useEffect, useState } from "react";
 import "./Progress.scss";
 import {illustration, techStack} from "../../portfolio";
 import {Fade} from "react-reveal";
 import Build from "../../assets/lottie/build";
 import DisplayLottie from "../../components/displayLottie/DisplayLottie";
 
+function useInView(options) {
+  const ref = useRef();
+  const [inView, setInView] = useState(false);
+
+  useEffect(() => {
+    const observer = new window.IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setInView(true);
+          observer.disconnect();
+        }
+      },
+      options
+    );
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [options]);
+
+  return [ref, inView]
+}
+
+function SkillBar({ exp }) {
+  const [ref, inView] = useInView({ threshold: 0.3 });
+  const progressStyle = {
+    width: inView ? exp.progressPercentage : 0,
+    opacity: inView ? 1 : 0
+  };
+  return (
+    <div className="skill">
+      <p>{exp.Stack}</p>
+      <div className="meter" ref={ref}>
+        <span style={progressStyle}></span>
+      </div>
+    </div>
+  );
+}
+
 export default function StackProgress() {
   if (techStack.viewSkillBars) {
     return (
@@ -12,19 +49,9 @@ export default function StackProgress() {
         <div className="skills-container">
           <div className="skills-bar">
             <h1 className="skills-heading">Proficiency</h1>
-            {techStack.experience.map((exp, i) => {
-              const progressStyle = {
-                width: exp.progressPercentage
-              };
-              return (
-                <div key={i} className="skill">
-                  <p>{exp.Stack}</p>
-                  <div className="meter">
-                    <span style={progressStyle}></span>
-                  </div>
-                </div>
-              );
-            })}
+            {techStack.experience.map((exp, i) => (
+              <SkillBar exp={exp} key={i} />
+            ))}
           </div>
 
           <div className="skills-image">

From 119942d8ddd45325bc981c317486491224dc73fa Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Tue, 10 Jun 2025 12:20:38 +0000
Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/containers/skillProgress/Progress.scss    |  2 +-
 src/containers/skillProgress/skillProgress.js | 23 ++++++++-----------
 2 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/containers/skillProgress/Progress.scss b/src/containers/skillProgress/Progress.scss
index 802bc305b5..e002bfcb07 100644
--- a/src/containers/skillProgress/Progress.scss
+++ b/src/containers/skillProgress/Progress.scss
@@ -18,7 +18,7 @@
   background-color: $progressBarSpanBG;
   position: relative;
   overflow: hidden;
-  transition: width 1.2s cubic-bezier(0.4,0,0.2,1), opacity 0.8s ease;
+  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
   width: 0;
   opacity: 0;
 }
diff --git a/src/containers/skillProgress/skillProgress.js b/src/containers/skillProgress/skillProgress.js
index 6280740b06..8f5b6dc8b2 100644
--- a/src/containers/skillProgress/skillProgress.js
+++ b/src/containers/skillProgress/skillProgress.js
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, {useRef, useEffect, useState} from "react";
 import "./Progress.scss";
 import {illustration, techStack} from "../../portfolio";
 import {Fade} from "react-reveal";
@@ -10,24 +10,21 @@ function useInView(options) {
   const [inView, setInView] = useState(false);
 
   useEffect(() => {
-    const observer = new window.IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setInView(true);
-          observer.disconnect();
-        }
-      },
-      options
-    );
+    const observer = new window.IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setInView(true);
+        observer.disconnect();
+      }
+    }, options);
     if (ref.current) observer.observe(ref.current);
     return () => observer.disconnect();
   }, [options]);
 
-  return [ref, inView]
+  return [ref, inView];
 }
 
-function SkillBar({ exp }) {
-  const [ref, inView] = useInView({ threshold: 0.3 });
+function SkillBar({exp}) {
+  const [ref, inView] = useInView({threshold: 0.3});
   const progressStyle = {
     width: inView ? exp.progressPercentage : 0,
     opacity: inView ? 1 : 0