diff --git a/src/AppConfig.json b/src/AppConfig.json new file mode 100644 index 0000000..5cd619c --- /dev/null +++ b/src/AppConfig.json @@ -0,0 +1,4 @@ +{ + "hueAnimDuration": 4000, + "hueAnimDuration_Slow": 10000 +} diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx index db146fd..95ec86e 100644 --- a/src/components/HomeView.tsx +++ b/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(true); const { hueRotation, setHueDuration } = useContext(StyleContext); // - - - - - TITLES AND TEXT - - - - - const [currentProject, setCurrentProject] = useState("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 ( diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index 8b83b9a..604e88a 100644 --- a/src/components/LandingPage.tsx +++ b/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]); diff --git a/src/contexts/StyleContextProvider.tsx b/src/contexts/StyleContextProvider.tsx index 13796af..3e98427 100644 --- a/src/contexts/StyleContextProvider.tsx +++ b/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(false); - const [hueDuration, setHueDuration] = useState(4000); + const [hueDuration, setHueDuration] = useState( + AppConfig.hueAnimDuration + ); const hueRotation = useSpring({ loop: { reverse: true, config: { duration: hueDuration } }, delay: 1000,