From 32b15fc486cd4dde207722277b36c08c8ab602a4 Mon Sep 17 00:00:00 2001 From: Jake Snyder Date: Fri, 14 Oct 2022 16:18:00 -0400 Subject: [PATCH 1/2] modified intro display; mostly CSS changes --- src/components/HomeViewHeader.tsx | 6 ++++-- src/components/styles/HomeViewFooter.css | 1 + src/components/styles/HomeViewHeader.css | 11 +++++++++++ 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/HomeViewHeader.tsx b/src/components/HomeViewHeader.tsx index 705fb79..6f353fb 100644 --- a/src/components/HomeViewHeader.tsx +++ b/src/components/HomeViewHeader.tsx @@ -16,11 +16,14 @@ const HomeViewHeader = ({ subtitle, subEmoji, allParams }: Props) => { const [isIntro, setIsIntro] = useState(false); useEffect(() => { + console.log(allParams[1]); + if (allParams[1] === "introduction") { setIsIntro(true); } else { setIsIntro(false); } + console.log(isIntro); }, [allParams]); // 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 @@ -85,8 +88,7 @@ const HomeViewHeader = ({ subtitle, subEmoji, allParams }: Props) => { - -
+
  • Date: Sun, 16 Oct 2022 14:05:02 -0400 Subject: [PATCH 2/2] more intro functionality; changing feature to introduction page --- src/components/HomeView.tsx | 14 ++++++-- src/components/HomeViewContent.tsx | 11 +++++-- src/components/HomeViewFooter.tsx | 5 +-- src/components/HomeViewHeader.tsx | 15 ++------- .../{ => projects}/PersonalIntro.tsx | 3 +- src/components/styles/HomeViewContent.css | 33 ++++++++++++++++--- src/components/styles/HomeViewFooter.css | 9 +++-- src/components/styles/LandingPage.css | 16 --------- src/components/styles/PersonalIntro.css | 0 src/contexts/AppContextProvider.tsx | 1 - 10 files changed, 60 insertions(+), 47 deletions(-) rename src/components/{ => projects}/PersonalIntro.tsx (68%) delete mode 100644 src/components/styles/PersonalIntro.css diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx index 45497cc..57064e1 100644 --- a/src/components/HomeView.tsx +++ b/src/components/HomeView.tsx @@ -33,6 +33,7 @@ const HomeView = ({}: Props) => { const paramStateSet = [setParam1, setParam2, setParam3, setParam4]; // check if this is the landing page const [isLanding, setIsLanding] = useState(false); + const [isIntro, setIsIntro] = useState(false); // - - - - CONTEXT - - - - const { hueRotation, setHueDuration } = useContext(AppContext); // - - - - - TITLES AND TEXT - - - - - @@ -84,7 +85,13 @@ const HomeView = ({}: Props) => { setParam4(webDevProjList[0]); tempParams[3] = webDevProjList[0]; } - + // Checks for introduction page + if (tempParams[1] === "introduction") { + setIsIntro(true); + } else { + setIsIntro(false); + } + // Reroutes to default project / current project based on current route let construct_URL = `/${tempParams[0]}/${tempParams[1]}/${tempParams[2]}/${tempParams[3]}`; let isSame_URL = construct_URL === location.pathname; let isIntroduction_URL = tempParams[1] === "introduction"; @@ -117,9 +124,10 @@ const HomeView = ({}: Props) => { subtitle={subtitle} subEmoji={subEmoji} allParams={allParamsArray} + isIntro={isIntro} /> - - + +
); }; diff --git a/src/components/HomeViewContent.tsx b/src/components/HomeViewContent.tsx index 7477fd9..103a245 100644 --- a/src/components/HomeViewContent.tsx +++ b/src/components/HomeViewContent.tsx @@ -4,18 +4,21 @@ import "./styles/HomeViewContent.css"; import Deerfall from "./projects/Deerfall"; import MediaMatchup from "./projects/MediaMatchup"; import { useNavigate } from "react-router-dom"; +import PersonalIntro from "./projects/PersonalIntro"; interface Props { currentContent: string | undefined; + isIntro: boolean; } -const HomeViewContent = ({ currentContent }: Props) => { +const HomeViewContent = ({ currentContent, isIntro }: Props) => { // - - - - States - - - - // toggleQueue false = projQueue1, toggleQueue true = projQueue2 const [toggleQueue, setToggleQueue] = useState(false); const navigate = useNavigate(); // - - - - Projects - - - - const allProjList = { + intro: , deerfall: , mediamatchup: , }; @@ -36,10 +39,12 @@ const HomeViewContent = ({ currentContent }: Props) => { }); useEffect(() => { - if (currentContent) { + if (currentContent && !isIntro) { setCurrProjArray([eval(`allProjList.${currentContent}`)]); + } else if (isIntro) { + setCurrProjArray([eval("allProjList.intro")]); } - }, [currentContent]); + }, [currentContent, isIntro]); return (
diff --git a/src/components/HomeViewFooter.tsx b/src/components/HomeViewFooter.tsx index 4b8cc09..8794dfd 100644 --- a/src/components/HomeViewFooter.tsx +++ b/src/components/HomeViewFooter.tsx @@ -6,16 +6,17 @@ import "./styles/HomeViewFooter.css"; interface Props { allParams: string[]; + isIntro: boolean; } -const HomeViewFooter = ({ allParams }: Props) => { +const HomeViewFooter = ({ allParams, isIntro }: Props) => { const currentYear = new Date(); const { hueRotation } = useContext(AppContext); return (
-
+
chevron_left

{allParams[3]}

chevron_right diff --git a/src/components/HomeViewHeader.tsx b/src/components/HomeViewHeader.tsx index 6f353fb..7e422b6 100644 --- a/src/components/HomeViewHeader.tsx +++ b/src/components/HomeViewHeader.tsx @@ -8,23 +8,12 @@ interface Props { subtitle: string; subEmoji: string; allParams: string[]; + isIntro: boolean; } -const HomeViewHeader = ({ subtitle, subEmoji, allParams }: Props) => { +const HomeViewHeader = ({ subtitle, subEmoji, allParams, isIntro }: Props) => { // GENERAL const { hueRotation } = useContext(AppContext); - const [isIntro, setIsIntro] = useState(false); - - useEffect(() => { - console.log(allParams[1]); - - if (allParams[1] === "introduction") { - setIsIntro(true); - } else { - setIsIntro(false); - } - console.log(isIntro); - }, [allParams]); // 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 ( diff --git a/src/components/PersonalIntro.tsx b/src/components/projects/PersonalIntro.tsx similarity index 68% rename from src/components/PersonalIntro.tsx rename to src/components/projects/PersonalIntro.tsx index cb791ab..e41b3ce 100644 --- a/src/components/PersonalIntro.tsx +++ b/src/components/projects/PersonalIntro.tsx @@ -1,5 +1,4 @@ -import "./styles/PersonalIntro.css"; -import headshot from "../img/Headshot-PurpleFlannel.png"; +import headshot from "../../img/Headshot-PurpleFlannel.png"; const PersonalIntro = () => { return ( diff --git a/src/components/styles/HomeViewContent.css b/src/components/styles/HomeViewContent.css index 1d134a3..37fdc5c 100644 --- a/src/components/styles/HomeViewContent.css +++ b/src/components/styles/HomeViewContent.css @@ -9,11 +9,6 @@ overflow: hidden; } -.HomeViewContent .media-ctr { - height: 100%; - width: 100%; -} - .HomeViewContent video { height: 100%; object-fit: cover; @@ -28,6 +23,34 @@ width: 100%; } +.HomeViewContent .media-ctr { + height: 100%; + width: 100%; +} + +.HomeViewContent .PersonalIntro { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + margin-bottom: 0%; + width: 100%; + height: 100%; + z-index: 1; + border: 10px ridge rgba(0, 255, 221, 0.767); +} + +.HomeViewContent .PersonalIntro img { + min-width: 100px; + min-height: 100px; + max-width: 400px; + max-height: 400px; + width: 40vw; + height: auto; + padding: 3px; + border: 10px ridge rgba(255, 0, 255, 0.767); +} + /* - - - - MEDIA QUERIES - - - -*/ @media only screen and (min-width: 768px) { .HomeViewContent video { diff --git a/src/components/styles/HomeViewFooter.css b/src/components/styles/HomeViewFooter.css index 6b032e9..50b944b 100644 --- a/src/components/styles/HomeViewFooter.css +++ b/src/components/styles/HomeViewFooter.css @@ -15,8 +15,8 @@ position: absolute; bottom: 5%; width: 65vw; - min-width: 225px; - max-width: 350px; + min-width: 235px; + max-width: 375px; height: 110px; border-radius: 20px; /* Flex */ @@ -77,6 +77,11 @@ font-size: 10px; } +.HomeViewFooter .hidden { + margin: -3px; + visibility: hidden; +} + /* - - - MEDIA QUERIES - - -*/ @media only screen and (min-width: 768px) { diff --git a/src/components/styles/LandingPage.css b/src/components/styles/LandingPage.css index 0ca40e4..88cd204 100644 --- a/src/components/styles/LandingPage.css +++ b/src/components/styles/LandingPage.css @@ -72,22 +72,6 @@ z-index: 1; } -.LandingPage .lp-content-ctr .PersonalIntro { - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - margin-bottom: 0%; - width: 100%; - z-index: 1; -} - -.LandingPage .lp-content-ctr .PersonalIntro img { - border: 10px ridge rgba(0, 255, 221, 0.767); - padding: 3px; - width: 250px; -} - .LandingPage .lp-content-ctr .nav-ctr { display: flex; flex: 5; diff --git a/src/components/styles/PersonalIntro.css b/src/components/styles/PersonalIntro.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/contexts/AppContextProvider.tsx b/src/contexts/AppContextProvider.tsx index 94188b4..f70b377 100644 --- a/src/contexts/AppContextProvider.tsx +++ b/src/contexts/AppContextProvider.tsx @@ -2,7 +2,6 @@ import AppContext from "./AppContext"; import { ReactNode, useEffect, useState } from "react"; import { useSpring } from "react-spring"; import AppConfig from "../AppConfig.json"; -import { useLocation, useParams } from "react-router-dom"; interface Props { children: ReactNode;