{ // Some elements in the return will be hidden by media query CSS, to allow UI elements in the header or footer depending on mobile / Desktop. This is why there are some "redundant" elements return ( - - + + {`Jake's `} - + {title} - + {subtitle} - {subEmoji} + {subEmoji} - - - chevron_left + + + chevron_left {currentProject} - chevron_right + chevron_right - + @@ -73,7 +73,7 @@ const HomeViewHeader = ({ - + ; - }; - setHueDuration: React.Dispatch>; -} +interface Props {} -const LandingPage = ({ hueRotation, setHueDuration }: Props) => { +const LandingPage = ({}: Props) => { // - - - - - LINK FUNCTIONALITY - - - - - const [currentDisplay, setCurrentDisplay] = useState(""); const [firstRender, setFirstRender] = useState(true); @@ -25,6 +21,7 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => { const [link2Text, setLink2Text] = useState(""); const [link2Path, setLink2Path] = useState(""); const { currentPathContext, setCurrentPathContext } = useContext(AuthContext); + const { hueRotation, setHueDuration } = useContext(StyleContext); const currentPath = useLocation().pathname; const navigate = useNavigate(); @@ -108,7 +105,6 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => { currentDisplay={currentDisplay} linkText={currentDisplay} pathName={"/"} - className={"lp-link"} isH1={true} /> @@ -116,7 +112,7 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => { "" ) )} - + {/* */} {fadeOut((style: any, item: any) => item ? ( @@ -124,14 +120,12 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => { currentDisplay={currentDisplay} linkText={link1Text} pathName={link1Path} - className={"lp-link"} isH1={false} /> @@ -149,7 +143,7 @@ const LandingPage = ({ hueRotation, setHueDuration }: Props) => { - + ); diff --git a/src/components/LandingPageLink.tsx b/src/components/LandingPageLink.tsx index c6fe060..71f5f09 100644 --- a/src/components/LandingPageLink.tsx +++ b/src/components/LandingPageLink.tsx @@ -1,13 +1,13 @@ -import { useEffect, useRef, useState } from "react"; +import { useContext, useEffect, useRef, useState } from "react"; import { Link } from "react-router-dom"; import { animated, SpringValue, useSpring } from "react-spring"; -import "./LandingPageLink.css"; +import StyleContext from "../contexts/StyleContext"; +import "./styles/LandingPageLink.css"; interface Props { currentDisplay: string; linkText: string; pathName: string; - className: string; isH1: boolean; } @@ -15,11 +15,11 @@ const LandingPageLink = ({ currentDisplay, linkText, pathName, - className, isH1, }: Props) => { + const { isMobile } = useContext(StyleContext); const opacityRef = useRef(0); - const hoverOn = useSpring({ + const hoverOn: any = useSpring({ to: { opacity: 0 }, from: { opacity: 1 }, reset: true, @@ -28,7 +28,7 @@ const LandingPageLink = ({ loop: { reverse: true }, onChange: (): number => (opacityRef.current = hoverOn.opacity.get()), }); - const hoverOff = useSpring({ + const hoverOff: any = useSpring({ to: { opacity: 1, }, @@ -36,39 +36,47 @@ const LandingPageLink = ({ reset: true, loop: false, }); - const hoverStart = useSpring({ + const hoverNone: any = useSpring({ from: { opacity: 1 }, reset: true, }); const [animState, setAnimState] = useState<{ opacity: SpringValue }>( - hoverStart + hoverNone ); + const checkIsMobile = (hoverState: { opacity: SpringValue }) => { + if (isMobile) { + setAnimState(hoverNone); + } else if (!isMobile) { + setAnimState(hoverState); + } + }; + useEffect(() => { let fromVal = animState.opacity.animation.from; let timeout; if (fromVal > 0 && fromVal < 1) { - setTimeout(() => setAnimState(hoverStart), 400); + setTimeout(() => setAnimState(hoverNone), 400); } else { clearTimeout(timeout); } }, [animState]); return ( - + {isH1 ? ( setAnimState(hoverOn)} - onMouseLeave={() => setAnimState(hoverOff)}> + onMouseEnter={() => checkIsMobile(hoverOn)} + onMouseLeave={() => checkIsMobile(hoverOff)}> {currentDisplay} ) : ( setAnimState(hoverOn)} - onMouseLeave={() => setAnimState(hoverOff)}> + onMouseEnter={() => checkIsMobile(hoverOn)} + onMouseLeave={() => checkIsMobile(hoverOff)}> {linkText} )} diff --git a/src/components/PersonalIntro.tsx b/src/components/PersonalIntro.tsx index 6154f16..cb791ab 100644 --- a/src/components/PersonalIntro.tsx +++ b/src/components/PersonalIntro.tsx @@ -1,4 +1,4 @@ -import "./PersonalIntro.css"; +import "./styles/PersonalIntro.css"; import headshot from "../img/Headshot-PurpleFlannel.png"; const PersonalIntro = () => { diff --git a/src/components/WIPDisclaimer.tsx b/src/components/WIPDisclaimer.tsx index c95f7b1..d12274b 100644 --- a/src/components/WIPDisclaimer.tsx +++ b/src/components/WIPDisclaimer.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import "./WIPDisclaimer.css"; +import "./styles/WIPDisclaimer.css"; const WIPDisclaimer = () => { const [closeClass, setCloseClass] = useState("WIPDisclaimer"); diff --git a/src/components/projects/MediaMatchup.tsx b/src/components/projects/MediaMatchup.tsx index 6a1cf21..7c40c31 100644 --- a/src/components/projects/MediaMatchup.tsx +++ b/src/components/projects/MediaMatchup.tsx @@ -29,7 +29,7 @@ const MediaMatchup = ({ isPortfolio }: Props) => { return ( { return { currentDate, detailedDate, simpleDate }; }; + // Monitors login state useEffect(() => { return auth.onAuthStateChanged((newUser) => { setUser(newUser); diff --git a/src/contexts/StyleContext.ts b/src/contexts/StyleContext.ts new file mode 100644 index 0000000..45a0cf0 --- /dev/null +++ b/src/contexts/StyleContext.ts @@ -0,0 +1,18 @@ +import { User } from "firebase/auth"; +import { createContext, useState } from "react"; +import { SpringValue } from "react-spring"; + +export interface StyleContextModel { + isMobile: boolean; + hueRotation: any; + setHueDuration: any; +} + +const defaultValue: StyleContextModel = { + isMobile: true, + hueRotation: undefined, + setHueDuration: undefined, +}; + +const StyleContext = createContext(defaultValue); +export default StyleContext; diff --git a/src/contexts/StyleContextProvider.tsx b/src/contexts/StyleContextProvider.tsx new file mode 100644 index 0000000..62d0e83 --- /dev/null +++ b/src/contexts/StyleContextProvider.tsx @@ -0,0 +1,53 @@ +import { User } from "firebase/auth"; +import StyleContext from "./StyleContext"; +import { ReactNode, useEffect, useState } from "react"; +import { useSpring } from "react-spring"; + +interface Props { + children: ReactNode; +} + +const StyleContextProvider = ({ children }: Props) => { + // GENERAL + const [isMobile, setIsMobile] = useState(true); + // ANIMATIONS / REACT SPRING + const [hueFlip, setHueFlip] = useState(false); + const [bgAnimOff, setBgAnimOff] = useState(false); + const [hueDuration, setHueDuration] = useState(4500); + const hueRotation = useSpring({ + to: { + filter: "hue-rotate(130deg) saturate(80%) sepia(30%)", + }, + from: { + filter: "hue-rotate(0deg) saturate(100%) sepia(0%)", + }, + reset: false, + cancel: bgAnimOff, + reverse: hueFlip, + delay: 1000, + config: { duration: hueDuration, tension: 280, friction: 60 }, + onRest: () => setHueFlip(!hueFlip), + }); + + const checkWindowSize = () => { + if (window.matchMedia("(min-width: 768px)").matches && isMobile) { + setIsMobile(false); + } else if (!window.matchMedia("(min-width: 768px)").matches && !isMobile) { + setIsMobile(true); + } + }; + + // Monitors window for its size; sets "isMobile" accordingly + useEffect(() => { + checkWindowSize(); + window.addEventListener("resize", checkWindowSize); + }); + + return ( + + {children} + + ); +}; + +export default StyleContextProvider; diff --git a/src/index.tsx b/src/index.tsx index 0a6d0fd..976bad4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,6 +4,7 @@ import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import AuthContextProvider from "./contexts/AuthContextProvider"; +import StyleContextProvider from "./contexts/StyleContextProvider"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement @@ -11,7 +12,9 @@ const root = ReactDOM.createRoot( root.render( - + + + );
+
{subtitle} - {subEmoji} + {subEmoji}