Merge pull request #13 from JS-GitRepo/feature/LandingPageAnimations

Feature/landing page animations

Author: JS-GitRepo

src/AppConfig.json

@@ -0,0 +1,4 @@
+{
+  "hueAnimDuration": 4000,
+  "hueAnimDuration_Slow": 10000
+}

src/components/HomeView.tsx

@@ -4,14 +4,13 @@ import { useContext, useEffect, useState } from "react";
 import HomeViewHeader from "./HomeViewHeader";
 import HomeViewFooter from "./HomeViewFooter";
 import HomeViewContent from "./HomeViewContent";
-import { SpringValue } from "react-spring";
 import StyleContext from "../contexts/StyleContext";
+import AppConfig from "../AppConfig.json";
 
 interface Props {}
 
 const HomeView = ({}: Props) => {
   // - - - - GENERAL STATES - - - -
-  const [firstRender, setFirstRender] = useState<boolean>(true);
   const { hueRotation, setHueDuration } = useContext(StyleContext);
   // - - - - - TITLES AND TEXT - - - - -
   const [currentProject, setCurrentProject] = useState<string>("Deerfall");
@@ -74,9 +73,10 @@ const HomeView = ({}: Props) => {
     } else if (currentPath.includes("/webdev/")) {
       setCurrentProject(webDevProjList[0]);
     }
-    console.log(currentPath);
 
-    // setHueDuration(12000);
+    if (hueRotation != AppConfig.hueAnimDuration_Slow) {
+      setHueDuration(AppConfig.hueAnimDuration_Slow);
+    }
   }, [currentPath]);
 
   return (

src/components/LandingPage.tsx

@@ -9,6 +9,7 @@ import pixelBG from "../img/pixelBG_LowRes.png";
 import pixelFadeBG from "../img/animated-14fps.png";
 import PersonalIntro from "./PersonalIntro";
 import StyleContext from "../contexts/StyleContext";
+import AppConfig from "../AppConfig.json";
 
 interface Props {}
 
@@ -65,7 +66,7 @@ const LandingPage = ({}: Props) => {
       setIsActivePage(false);
       setHideHV("");
       setTimeout(() => setHideLP("hide"), 2000);
-      setHueDuration(12000);
+      setHueDuration(AppConfig.hueAnimDuration_Slow);
     }
 
     if (currentPath === "/") {
@@ -81,19 +82,21 @@ const LandingPage = ({}: Props) => {
       setLink1Path("/landing/webdev");
       setLink2Text("Game Dev");
       setLink2Path("/landing/gamedev");
-      setHueDuration(4000);
+      setHueDuration(AppConfig.hueAnimDuration);
     } else if (currentPath === "/landing/webdev") {
       setCurrentDisplay("Web Development");
       setLink1Text("Portfolio");
       setLink1Path("/landing/webdev/portfolio");
       setLink2Text("Blog");
       setLink2Path("/landing/webdev/blog");
+      setHueDuration(AppConfig.hueAnimDuration);
     } else if (currentPath === "/landing/gamedev") {
       setCurrentDisplay("Game Development");
       setLink1Text("Portfolio");
       setLink1Path("/landing/webdev/portfolio");
       setLink2Text("Blog");
       setLink2Path("/landing/gamedev/blog");
+      setHueDuration(AppConfig.hueAnimDuration);
     }
   }, [currentPath]);
 

src/contexts/StyleContextProvider.tsx

@@ -1,6 +1,7 @@
 import StyleContext from "./StyleContext";
 import { ReactNode, useEffect, useState } from "react";
 import { useSpring } from "react-spring";
+import AppConfig from "../AppConfig.json";
 
 interface Props {
   children: ReactNode;
@@ -12,7 +13,9 @@ const StyleContextProvider = ({ children }: Props) => {
 
   // ANIMATIONS / REACT SPRING
   const [bgAnimOff, setBgAnimOff] = useState<boolean>(false);
-  const [hueDuration, setHueDuration] = useState<number>(4000);
+  const [hueDuration, setHueDuration] = useState<number>(
+    AppConfig.hueAnimDuration
+  );
   const hueRotation = useSpring({
     loop: { reverse: true, config: { duration: hueDuration } },
     delay: 1000,