fixed project transitions and bug where they broke on refresh

.firebase/hosting.YnVpbGQ.cache

@@ -3,17 +3,20 @@ logo192.png,1657132692666,94a05bb86f2fa54e8d3f48900f954b5e79c3ea27468b473afd1510
 logo512.png,1657132682614,7b92476b36f05aa53bd69500645fb5fe8866d7f0e3ef517c7b6529251418faff
 manifest.json,1657132371588,03d105d6225429616e0596db9f20a9c62fc48e2564cd1fc208ea60e6af1a0297
 robots.txt,1650942577330,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
-asset-manifest.json,1657829112988,c1ab03361ac5d599a6733ea4b8b22d5f7c572ac44a8debdff100121604b380e6
-index.html,1657829112988,1590ef6a3edd9c0754ba55a664db46790700c563cb3cbd95f684ced2c71dea5a
-static/css/main.d819203b.css,1657829112997,b194d80e43401a1c1f169ae74dc6730e1121a55c29e441fc044041af2effd374
-static/css/main.d819203b.css.map,1657829112998,2ec85b58f0e75cf4fe776dfe211fc58dcd592908aa00127adbe4dc997c5d0829
-static/js/787.cda612ba.chunk.js,1657829112997,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
-static/js/main.6ecde0db.js.LICENSE.txt,1657829112997,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c
-static/js/787.cda612ba.chunk.js.map,1657829112998,b2951aaefc907405199924466aa3611981c93baa933053878b4820131e37e4e6
-static/media/munro.f78662ff4aad4d038806.ttf,1657829112997,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
-static/media/animated-14fps.0a0c585671594fb5b8d7.png,1657829112997,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
-static/media/DeerfallBannerPoster.da9b95c64930f253bad0.avif,1657829112997,97801686c427e88a0435c83da7e8169cc9f89c3fb7773de869092077d7a1304c
-static/media/MediaMatchupMain.a4679932dd8686a8a9fc.avif,1657829112997,51bfb191530232ca3eb81f40f2c227acdbff36ad57bc570b9c9fbf9329e8dec6
-static/js/main.6ecde0db.js,1657829112997,d61dd4a72ef55459fa4f9ccd16e57c23d99de34f752cc8a56df93b2467155478
-static/media/DeerfallProRes_AV1.d420aebda0fdbb533e69.mp4,1657829112999,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
-static/js/main.6ecde0db.js.map,1657829112999,c8b1c30b9bad68c42870d38ad52e4208d2b24563a9997cf39541bd4034a3a18f
+asset-manifest.json,1658256627242,72548d569a1d2126e6249404f2a63976222d508f8d5e1b35cfe3b7d8d589898b
+index.html,1658256627229,aae59aea4977e79820f1f1b371ad2fc26493afcf030feeda2a58c87b9e3cdfbd
+static/css/main.ebddce61.css,1658256627239,0ec11174cf32003f3fc1d5f8c680013e014c534e289584fe24233f1cf3536834
+static/js/787.cda612ba.chunk.js,1658256627240,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
+static/css/main.ebddce61.css.map,1658256627239,a00085d8d4f12fbcbb2573c8fdaef8d0590d7a2c4b99b21c6237ee612015ff82
+static/js/787.cda612ba.chunk.js.map,1658256627242,b2951aaefc907405199924466aa3611981c93baa933053878b4820131e37e4e6
+static/js/main.eb68c05d.js.LICENSE.txt,1658256627240,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c
+static/media/munro.f78662ff4aad4d038806.ttf,1658256627240,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
+static/media/animated-14fps.0a0c585671594fb5b8d7.png,1658256627239,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
+static/media/MediaMatchupMain.7061048d09c6103946f4.jpg,1658256627239,cde79e6af32cd09f5eb22edc47cdbf8516b6ce3ee8b5707b9fa5abe2e383c801
+static/media/DeerfallBannerPoster.5318e7922524aab5a4b1.jpg,1658256627239,5241662b3103ea00e937b1de64dc74e70267c5ad16d6e87de938f1acaf659f34
+static/media/MediaMatchupMain.a4679932dd8686a8a9fc.avif,1658256627239,51bfb191530232ca3eb81f40f2c227acdbff36ad57bc570b9c9fbf9329e8dec6
+static/js/main.eb68c05d.js,1658256627240,05437fe08b8e26762604aee8dcfe9ad61b4cefbf315c2df4b7b91ab626c9b2c5
+static/media/DeerfallBanner_H265.26575320e1418ba9b542.mp4,1658256627241,a0f474b066407039c297e98db245737e4a232ec9996ed7f0de16961b94b84d3a
+static/media/DeerfallBanner_AV1.d420aebda0fdbb533e69.mp4,1658256627241,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
+static/media/DeerfallBanner_H264.d3d2d7793a0a0e61516b.mp4,1658256627242,5d9c3d555cf4b2d0775c18d015a709e07b1d2c3f8fa42612de1e184584354091
+static/js/main.eb68c05d.js.map,1658256627241,312d6108f1e23ff83deb5df4dbd439aea87873ba12f288c7516851bfa92fe915

src/components/HomeView.tsx

@@ -34,14 +34,6 @@ const HomeView = ({ hueRotation, setHueDuration }: Props) => {
   const gameDevProjList = ["Deerfall"];
   const webDevProjList = ["MediaMatchup"];
 
-  useEffect(() => {
-    if (currentPath.includes("/gamedev/")) {
-      setCurrentProject(gameDevProjList[0]);
-    } else if (currentPath.includes("/webdev/")) {
-      setCurrentProject(webDevProjList[0]);
-    }
-  }, [isGameDev]);
-
   useEffect(() => {
     if (currentPath.includes("/gamedev/portfolio")) {
       if (currentPath.includes("home/")) {
@@ -80,11 +72,18 @@ const HomeView = ({ hueRotation, setHueDuration }: Props) => {
       setIsPortfolio(false);
       setIsGameDev(false);
     }
+    if (currentPath.includes("/gamedev/")) {
+      setCurrentProject(gameDevProjList[0]);
+    } else if (currentPath.includes("/webdev/")) {
+      setCurrentProject(webDevProjList[0]);
+    }
+    console.log(currentPath);
+
     setHueDuration(12000);
-  }, [currentPath, currentProject]);
+  }, [currentPath]);
 
   return (
-    <div className="HomeView">
+    <div className='HomeView'>
       <HomeViewHeader
         isPortfolio={isPortfolio}
         gamedevOrWebdev={isGameDev}

src/components/HomeViewContent.css

@@ -17,8 +17,11 @@
 .HomeViewContent video {
   height: 100%;
   object-fit: cover;
+  margin-left: 50%;
+  transform: translateX(-50%);
   min-width: 100%;
 }
+
 .HomeViewContent img {
   height: 100%;
   object-fit: cover;

src/components/HomeViewContent.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { animated, config, useTransition } from "react-spring";
+import { animated, useTransition } from "react-spring";
 import "./HomeViewContent.css";
 import Deerfall from "./projects/Deerfall";
 import MediaMatchup from "./projects/MediaMatchup";
@@ -15,53 +15,39 @@ const HomeViewContent = ({ pathname, isPortfolio, currentProject }: Props) => {
   // toggleQueue false = projQueue1, toggleQueue true = projQueue2
   const [toggleQueue, setToggleQueue] = useState(false);
   // - - - - Projects - - - -
+  const allProjList = {
+    Deerfall: <Deerfall isPortfolio={isPortfolio} />,
+    MediaMatchup: <MediaMatchup isPortfolio={isPortfolio} />,
+  };
   const gameDevProjList = {
     Deerfall: <Deerfall isPortfolio={isPortfolio} />,
   };
   const webDevProjList = {
     MediaMatchup: <MediaMatchup isPortfolio={isPortfolio} />,
   };
-  const [projQueue1, setProjQueue1] = useState<JSX.Element>(
-    <Deerfall isPortfolio={isPortfolio} />
-  );
-  const [projQueue2, setProjQueue2] = useState<JSX.Element>(
-    <Deerfall isPortfolio={isPortfolio} />
-  );
+  const [currProjArray, setCurrProjArray] = useState<JSX.Element[]>([]);
   // - - - - Transitions - - - -
-  const transitions = useTransition(toggleQueue, {
+  const transition = useTransition(currProjArray, {
     from: { opacity: 0 },
     enter: { opacity: 1 },
     leave: { opacity: 0 },
     config: { duration: 300 },
     exitBeforeEnter: true,
   });
 
-  const checkQueue = (project: JSX.Element) => {
-    if (toggleQueue === true) {
-      setProjQueue2(project);
-      setToggleQueue(!toggleQueue);
-    } else {
-      setProjQueue1(project);
-      setToggleQueue(!toggleQueue);
-    }
-  };
-
   useEffect(() => {
-    if (currentProject === "Deerfall") {
-      checkQueue(gameDevProjList.Deerfall);
-    } else if (currentProject === "MediaMatchup") {
-      checkQueue(webDevProjList.MediaMatchup);
-    }
+    setCurrProjArray([eval(`allProjList.${currentProject}`)]);
   }, [currentProject]);
 
   return (
-    <div className="HomeViewContent">
-      {transitions((styles, item) =>
-        item ? (
-          <animated.div style={styles}>{projQueue1}</animated.div>
-        ) : (
-          <animated.div style={styles}>{projQueue2}</animated.div>
-        )
+    <div className='HomeViewContent'>
+      {transition(
+        (styles, item) =>
+          item && (
+            <animated.div className={`media-ctr`} style={styles}>
+              {item}
+            </animated.div>
+          )
       )}
     </div>
   );

src/components/projects/Deerfall.tsx

@@ -28,17 +28,17 @@ const Deerfall = ({ isPortfolio }: Props) => {
   const desc: string = "";
 
   return (
-    <animated.div className="Deerfall">
+    <animated.div className="Deerfall media-ctr">
       <ProjVideo
-        vidSrc={DeerfallVidAV1}
+        vidSrc={DeerfallVidH265}
+        vidSrc_Fallback={DeerfallVidAV1}
+        vidSrc_Fallback2={DeerfallVidH264}
         isPortfolio={isPortfolio}
         tech={technologies}
         skills={skills}
         title={"Deerfall"}
         desc={desc}
         vidPoster={DeerfallPosterJPG}
-        vidSrc_Fallback={DeerfallVidH265}
-        vidSrc_Fallback2={DeerfallVidH264}
       />
     </animated.div>
   );

src/components/projects/ProjVideo.css

@@ -0,0 +1,7 @@
+.ProjVideo {
+  height: 100%;
+}
+
+.ProjVideo .video-ctr {
+  height: 100%;
+}