From f928c023b80b2517055207b181ad8b578520c440 Mon Sep 17 00:00:00 2001
From: Andrew Smithwick <andy.smithwick@gmail.com>
Date: Fri, 10 Jan 2025 20:39:21 -0800
Subject: [PATCH 1/2] Reduced flicker on board member page name text

Also added animation to QP and Event images
---
 src/components/board/Officer.astro     | 4 ++--
 src/components/core/InView.astro       | 2 ++
 src/components/events/EventTitle.astro | 3 ++-
 src/components/projects/QP.astro       | 7 ++++---
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/board/Officer.astro b/src/components/board/Officer.astro
index eed91fc..f245ac7 100644
--- a/src/components/board/Officer.astro
+++ b/src/components/board/Officer.astro
@@ -21,10 +21,10 @@ const {name, position, picture, email} = Astro.props;
             <FaGear/>
         </div>
         <div class = "w-full flex justify-between px-[7%]">
-            <p data-inview class = " in-view:animate-fade-right text-[2vw] font-light leading-[4.5vh]">
+            <p data-inview class = "opacity-0 in-view:animate-fade-right text-[2vw] font-light leading-[4.5vh]">
                 {name}
             </p>
-            <div data-inview class = "in-view:animate-fade-up text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center">
+            <div data-inview class = "opacity-0 in-view:animate-fade-up text-[0.8vw] w-[8vw] border-[0.11vw] border-white/90 rounded-full p-[0.5%] h-fit text-center">
                 {position}
             </div>
         </div>
diff --git a/src/components/core/InView.astro b/src/components/core/InView.astro
index 6d9e17e..535e23e 100644
--- a/src/components/core/InView.astro
+++ b/src/components/core/InView.astro
@@ -3,9 +3,11 @@
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
           entry.target.classList.add("in-view");
+          entry.target.classList.remove("opacity-0");
           console.log("Added 'in-view' class to:", entry.target);
         } else {
           entry.target.classList.remove("in-view");
+          entry.target.classList.add("opacity-0");
           console.log("Removed 'in-view' class from:", entry.target);
         }
       });
diff --git a/src/components/events/EventTitle.astro b/src/components/events/EventTitle.astro
index dde6f46..bd122ba 100644
--- a/src/components/events/EventTitle.astro
+++ b/src/components/events/EventTitle.astro
@@ -8,7 +8,8 @@ import { LiaDotCircle } from "react-icons/lia";
     <Image
         src={eventbg}
         alt="Event Page Background"
-        class="w-[45%] rounded-[2vw] aspect-[2/1] object-cover"
+        class="w-[45%] rounded-[2vw] aspect-[2/1] object-cover relative in-view:animate-fade-down opacity-0"
+        data-inview
     />
     <div
         class="absolute -bottom-[6%] left-[20%] flex items-center text-[3vw] py-[1.5%] px-[3%] text-white bg-ieee-black rounded-[2vw]"
diff --git a/src/components/projects/QP.astro b/src/components/projects/QP.astro
index c1fbbf3..ea94473 100644
--- a/src/components/projects/QP.astro
+++ b/src/components/projects/QP.astro
@@ -14,12 +14,13 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
     <Image
         src={qp}
         alt="qp showcase photo"
-        class="w-[70vw] aspect-[2.5/1] rounded-full"
+        class="opacity-0 w-[70vw] aspect-[2.5/1] rounded-full relative in-view:animate-fade-down"
+        data-inview
     />
     <Link
         data-inview
         href="/quarterly"
-        className="in-view:animate-fade-left absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md"
+        className="opacity-0 in-view:animate-fade-left absolute top-[25%] right-[15%] w-fit px-[1%] py-[0.4%] bg-white rounded-full text-black flex items-center text-[1.3vw] hover:bg-ieee-yellow duration-300 shadow-md"
     >
         more details
         <IoIosArrowDroprightCircle
@@ -27,7 +28,7 @@ import { IoIosArrowDroprightCircle } from "react-icons/io";
         />
     </Link>
     <div
-        data-inview class="in-view:animate-fade-right w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]"
+        data-inview class="opacity-0 in-view:animate-fade-right w-[45%] text-[1vw] font-semibold bg-white/50 backdrop-blur text-black absolute -bottom-[6%] left-[15%] px-[1.5%] py-[1%] rounded-[1.5vw]"
     >
         <p class="text-[1.4vw] mb-[2%]">Quarterly Project</p>
         <p>

From e8f5c4d22b77753dcf3d06c5141d6d6923a3be88 Mon Sep 17 00:00:00 2001
From: Andrew Smithwick <andy.smithwick@gmail.com>
Date: Fri, 31 Jan 2025 18:19:41 -0800
Subject: [PATCH 2/2] Reduce flicker in officers

---
 src/components/board/Officer.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/board/Officer.astro b/src/components/board/Officer.astro
index 4bc0b39..77edd52 100644
--- a/src/components/board/Officer.astro
+++ b/src/components/board/Officer.astro
@@ -41,7 +41,7 @@ const { name, position, picture, email } = Astro.props;
         >
             <p
                 data-inview
-                class="in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]"
+                class="opacity-0 in-view:animate-fade-right md:text-[2vw] text-[3.5vw] font-light md:leading-[2.5vw] leading-[5vw] w-[10vw]"
             >
                 {name}
             </p>