Merge pull request #17 from JS-GitRepo/feature/Introduction

Feature/introduction

Author: JS-GitRepo

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<boolean>(false);
+  const [isIntro, setIsIntro] = useState<boolean>(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}
       />
-      <HomeViewContent currentContent={param4} />
-      <HomeViewFooter allParams={allParamsArray} />
+      <HomeViewContent currentContent={param4} isIntro={isIntro} />
+      <HomeViewFooter allParams={allParamsArray} isIntro={isIntro} />
     </div>
   );
 };

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: <PersonalIntro />,
     deerfall: <Deerfall isPortfolio={true} />,
     mediamatchup: <MediaMatchup isPortfolio={true} />,
   };
@@ -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 (
     <div className='HomeViewContent'>

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 (
     <div className='HomeViewFooter'>
       <div className='project-nav-ctr'>
-        <div className='project-nav'>
+        <div className={isIntro ? "project-nav hidden" : "project-nav"}>
           <span className='material-symbols-outlined'>chevron_left</span>
           <h2>{allParams[3]}</h2>
           <span className='material-symbols-outlined'>chevron_right</span>

src/components/HomeViewHeader.tsx

@@ -8,20 +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<boolean>(false);
-
-  useEffect(() => {
-    if (allParams[1] === "introduction") {
-      setIsIntro(true);
-    } else {
-      setIsIntro(false);
-    }
-  }, [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 (
@@ -85,8 +77,7 @@ const HomeViewHeader = ({ subtitle, subEmoji, allParams }: Props) => {
           </ul>
         </div>
       </div>
-
-      <div className='nav-category-ctr'>
+      <div className={isIntro ? "hidden" : "nav-category-ctr"}>
         <ul>
           <li>
             <NavLink

src/components/PersonalIntro.tsx renamed to 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 (

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 {

src/components/styles/HomeViewFooter.css

@@ -15,7 +15,8 @@
   position: absolute;
   bottom: 5%;
   width: 65vw;
-  max-width: 350px;
+  min-width: 235px;
+  max-width: 375px;
   height: 110px;
   border-radius: 20px;
   /* Flex */
@@ -76,6 +77,11 @@
   font-size: 10px;
 }
 
+.HomeViewFooter .hidden {
+  margin: -3px;
+  visibility: hidden;
+}
+
 /* - - - MEDIA QUERIES - - -*/
 
 @media only screen and (min-width: 768px) {

src/components/styles/HomeViewHeader.css

@@ -54,12 +54,17 @@
   align-items: center;
   list-style: none;
   padding: 0px;
+  width: 181px;
 }
 
 .HomeViewHeader .nav-category-ctr ul li {
   margin: 0px 10px;
 }
 
+.HomeViewHeader .hidden {
+  display: none;
+}
+
 /* - - - MEDIA QUERIES - - -*/
 @media only screen and (min-width: 768px) {
   .HomeViewHeader {
@@ -105,4 +110,10 @@
     margin: 0px 10px;
     height: 30px;
   }
+
+  .HomeViewHeader .hidden {
+    display: flex;
+    visibility: hidden;
+    width: 181px;
+  }
 }

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;