From aff1a1cf3cb96bd0c0dcc068014133b94e210f5c Mon Sep 17 00:00:00 2001 From: Jake Snyder Date: Mon, 26 Sep 2022 23:15:18 -0400 Subject: [PATCH 1/4] more tweaks to landing page animation to make experience more smooth --- src/components/LandingPage.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index 8b83b9a..e7c8700 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -88,12 +88,14 @@ const LandingPage = ({}: Props) => { setLink1Path("/landing/webdev/portfolio"); setLink2Text("Blog"); setLink2Path("/landing/webdev/blog"); + setHueDuration(4000); } else if (currentPath === "/landing/gamedev") { setCurrentDisplay("Game Development"); setLink1Text("Portfolio"); setLink1Path("/landing/webdev/portfolio"); setLink2Text("Blog"); setLink2Path("/landing/gamedev/blog"); + setHueDuration(4000); } }, [currentPath]); From 21437260322a11750614cbed7e85cedb55acf446 Mon Sep 17 00:00:00 2001 From: Jake Snyder Date: Mon, 26 Sep 2022 23:36:08 -0400 Subject: [PATCH 2/4] added config JSON file for hueRotation and other variables --- src/AppConfig.json | 4 ++++ src/components/HomeView.tsx | 6 ++++-- src/components/LandingPage.tsx | 9 +++++---- src/contexts/StyleContextProvider.tsx | 5 ++++- 4 files changed, 17 insertions(+), 7 deletions(-) create mode 100644 src/AppConfig.json 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..ecc9b81 100644 --- a/src/components/HomeView.tsx +++ b/src/components/HomeView.tsx @@ -6,12 +6,12 @@ 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"); @@ -76,7 +76,9 @@ const HomeView = ({}: Props) => { } 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 e7c8700..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,21 +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(4000); + setHueDuration(AppConfig.hueAnimDuration); } else if (currentPath === "/landing/gamedev") { setCurrentDisplay("Game Development"); setLink1Text("Portfolio"); setLink1Path("/landing/webdev/portfolio"); setLink2Text("Blog"); setLink2Path("/landing/gamedev/blog"); - setHueDuration(4000); + 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, From b131707e881ff87742469e31b0f0be1cc381c424 Mon Sep 17 00:00:00 2001 From: Jake Snyder Date: Mon, 26 Sep 2022 23:41:54 -0400 Subject: [PATCH 3/4] more small tweaks --- src/components/HomeView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx index ecc9b81..2b5927b 100644 --- a/src/components/HomeView.tsx +++ b/src/components/HomeView.tsx @@ -74,7 +74,6 @@ const HomeView = ({}: Props) => { } else if (currentPath.includes("/webdev/")) { setCurrentProject(webDevProjList[0]); } - console.log(currentPath); if (hueRotation != AppConfig.hueAnimDuration_Slow) { setHueDuration(AppConfig.hueAnimDuration_Slow); From d00d6b629860e68993610c8e9b6d59fdfbf9c442 Mon Sep 17 00:00:00 2001 From: Jake Snyder Date: Mon, 26 Sep 2022 23:44:45 -0400 Subject: [PATCH 4/4] removed empty imports --- src/components/HomeView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx index 2b5927b..95ec86e 100644 --- a/src/components/HomeView.tsx +++ b/src/components/HomeView.tsx @@ -4,7 +4,6 @@ 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";