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

much progress on introduction page; complete for now. Mostly finalizi…

Author: JS-GitRepo

src/App.tsx

@@ -5,9 +5,9 @@ import WIPDisclaimer from "./components/WIPDisclaimer";
 import ErrorNotFound from "./components/ErrorNotFound";
 
 // 9-28-22
-// Refactoring routes, and general way this 'web app' works. Making HomeView the default route, with a 'modal' over it which will be Landing Page. Instead of all this weird routing form Landing Page to Homeview, landing page will be an overlay that exists within HomeView, that is only present when the user is at /landing. Thinking of actually making the LandingPage an option for "HomeViewContent" that steels the entire viewport, so that HomeView is always there behind it.
+// Refactoring routes, and general way this 'web app' works. Making HomeView the default route, with a 'modal' over it which will be Landing Page. Instead of all this weird routing form Landing Page to Homeview, landing page will be an overlay that exists within HomeView, that is only present when the user is at /landing. Thinking of actually making the LandingPage an option for "HVContent" that steels the entire viewport, so that HomeView is always there behind it.
 
-// This would effectively make "App" into what is currently HomeView, and turn HomeView into HomeViewContent which can then be routed between
+// This would effectively make "App" into what is currently HomeView, and turn HomeView into HVContent which can then be routed between
 
 // jakesnyder.dev/:landingOrHome/:category1/:gameOrWeb/:project
 // jakesnyder.dev/:landingOrHome/:category1/introduction

src/AppConfig.json

@@ -1,5 +1,10 @@
 {
   "hueAnimDuration": 7000,
   "hueAnimDuration_Slow": 10000,
-  "projectURL_Params": ["deerfall", "mediamatchup"]
+  "projectURL_Params": ["deerfall", "mediamatchup"],
+  "intro_txt_p1": "Hi! I'm Jake.",
+  "intro_txt_p2": "Life long tinkerer, learner, IT enthusiast... and the one that built this website!",
+  "intro_txt_p3": "I love figuring out how things work, how people work, and how the two (things and people) interact.",
+  "intro_txt_p4": "I'll be creating a contact form here soon, but in the meantime please reachout via LinkedIn!",
+  "built_using_txt": "REACT JS | REACT SPRING | TYPESCRIPT | FIREBASE"
 }

src/components/HomeViewContent.tsx renamed to src/components/HVContent.tsx

@@ -1,24 +1,24 @@
 import { useEffect, useState } from "react";
 import { animated, useTransition } from "react-spring";
-import "./styles/HomeViewContent.css";
+import "./styles/HVContent.css";
 import Deerfall from "./projects/Deerfall";
 import MediaMatchup from "./projects/MediaMatchup";
 import { useNavigate } from "react-router-dom";
-import PersonalIntro from "./projects/PersonalIntro";
+import Introduction from "./projects/Introduction";
 
 interface Props {
   currentContent: string | undefined;
   isIntro: boolean;
 }
 
-const HomeViewContent = ({ currentContent, isIntro }: Props) => {
+const HVContent = ({ currentContent, isIntro }: Props) => {
   // - - - - States - - - -
   // toggleQueue false = projQueue1, toggleQueue true = projQueue2
   const [toggleQueue, setToggleQueue] = useState(false);
   const navigate = useNavigate();
   // - - - - Projects - - - -
   const allProjList = {
-    intro: <PersonalIntro />,
+    intro: <Introduction />,
     deerfall: <Deerfall isPortfolio={true} />,
     mediamatchup: <MediaMatchup isPortfolio={true} />,
   };
@@ -47,7 +47,7 @@ const HomeViewContent = ({ currentContent, isIntro }: Props) => {
   }, [currentContent, isIntro]);
 
   return (
-    <div className='HomeViewContent'>
+    <div className='HVContent'>
       {transition(
         (styles, item) =>
           item && (
@@ -60,4 +60,4 @@ const HomeViewContent = ({ currentContent, isIntro }: Props) => {
   );
 };
 
-export default HomeViewContent;
+export default HVContent;

src/components/HomeViewFooter.tsx renamed to src/components/HVFooter.tsx

@@ -2,19 +2,19 @@ import { useContext } from "react";
 import { NavLink } from "react-router-dom";
 import { animated } from "react-spring";
 import AppContext from "../contexts/AppContext";
-import "./styles/HomeViewFooter.css";
+import "./styles/HVFooter.css";
 
 interface Props {
   allParams: string[];
   isIntro: boolean;
 }
 
-const HomeViewFooter = ({ allParams, isIntro }: Props) => {
+const HVFooter = ({ allParams, isIntro }: Props) => {
   const currentYear = new Date();
   const { hueRotation } = useContext(AppContext);
 
   return (
-    <div className='HomeViewFooter'>
+    <div className='HVFooter'>
       <div className='project-nav-ctr'>
         <div className={isIntro ? "project-nav hidden" : "project-nav"}>
           <span className='material-symbols-outlined'>chevron_left</span>
@@ -68,4 +68,4 @@ const HomeViewFooter = ({ allParams, isIntro }: Props) => {
   );
 };
 
-export default HomeViewFooter;
+export default HVFooter;

src/components/HomeViewHeader.tsx renamed to src/components/HVHeader.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useReducer, useState } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 import { animated } from "react-spring";
 import AppContext from "../contexts/AppContext";
-import "./styles/HomeViewHeader.css";
+import "./styles/HVHeader.css";
 
 interface Props {
   subtitle: string;
@@ -11,13 +11,13 @@ interface Props {
   isIntro: boolean;
 }
 
-const HomeViewHeader = ({ subtitle, subEmoji, allParams, isIntro }: Props) => {
+const HVHeader = ({ subtitle, subEmoji, allParams, isIntro }: Props) => {
   // GENERAL
   const { hueRotation } = useContext(AppContext);
 
   // 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 (
-    <div className='HomeViewHeader'>
+    <div className='HVHeader'>
       <Link className='title-ctr' to={{ pathname: "/landing" }}>
         <h1>
           {`${isIntro ? "who is " : ""}`}
@@ -103,4 +103,4 @@ const HomeViewHeader = ({ subtitle, subEmoji, allParams, isIntro }: Props) => {
   );
 };
 
-export default HomeViewHeader;
+export default HVHeader;

src/components/HomeView.tsx

@@ -1,12 +1,12 @@
 import "./styles/HomeView.css";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useContext, useEffect, useState } from "react";
-import HomeViewHeader from "./HomeViewHeader";
-import HomeViewFooter from "./HomeViewFooter";
+import HVHeader from "./HVHeader";
+import HVFooter from "./HVFooter";
 import AppContext from "../contexts/AppContext";
 import AppConfig from "../AppConfig.json";
 import LandingPage from "./LandingPage";
-import HomeViewContent from "./HomeViewContent";
+import HVContent from "./HVContent";
 
 interface Props {}
 
@@ -120,14 +120,14 @@ const HomeView = ({}: Props) => {
   return (
     <div className='HomeView'>
       {isLanding ? <LandingPage setIsLanding={setIsLanding} /> : ""}
-      <HomeViewHeader
+      <HVHeader
         subtitle={subtitle}
         subEmoji={subEmoji}
         allParams={allParamsArray}
         isIntro={isIntro}
       />
-      <HomeViewContent currentContent={param4} isIntro={isIntro} />
-      <HomeViewFooter allParams={allParamsArray} isIntro={isIntro} />
+      <HVContent currentContent={param4} isIntro={isIntro} />
+      <HVFooter allParams={allParamsArray} isIntro={isIntro} />
     </div>
   );
 };

src/components/LandingPageLink.tsx renamed to src/components/LPLink.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { animated, SpringValue, useSpring } from "react-spring";
 import AppContext from "../contexts/AppContext";
-import "./styles/LandingPageLink.css";
+import "./styles/LPLink.css";
 
 interface Props {
   currentDisplay: string;
@@ -11,12 +11,7 @@ interface Props {
   isH1: boolean;
 }
 
-const LandingPageLink = ({
-  currentDisplay,
-  linkText,
-  pathName,
-  isH1,
-}: Props) => {
+const LPLink = ({ currentDisplay, linkText, pathName, isH1 }: Props) => {
   const { isMobile } = useContext(AppContext);
   const opacityRef = useRef(0);
   const hoverOn: any = useSpring({
@@ -84,4 +79,4 @@ const LandingPageLink = ({
   );
 };
 
-export default LandingPageLink;
+export default LPLink;

src/components/LandingPage.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import "./styles/LandingPage.css";
-import LandingPageLink from "./LandingPageLink";
+import LPLink from "./LPLink";
 import { animated, useTransition } from "react-spring";
 import pixelBG from "../img/pixelBG_LowRes.png";
 import pixelFadeBG from "../img/animated-14fps.png";
@@ -98,7 +98,7 @@ const LandingPage = ({ setIsLanding }: Props) => {
         {fadeOut((style: any, item: any) =>
           item ? (
             <animated.div className={"header-ctr"} style={style}>
-              <LandingPageLink
+              <LPLink
                 currentDisplay={currentDisplay}
                 linkText={currentDisplay}
                 pathName={"/"}
@@ -109,17 +109,17 @@ const LandingPage = ({ setIsLanding }: Props) => {
             ""
           )
         )}
-        {/* <PersonalIntro /> */}
+        {/* <Introduction /> */}
         {fadeOut((style: any, item: any) =>
           item ? (
             <animated.div className='nav-ctr' style={style}>
-              <LandingPageLink
+              <LPLink
                 currentDisplay={currentDisplay}
                 linkText={link1Text}
                 pathName={link1Path}
                 isH1={false}
               />
-              <LandingPageLink
+              <LPLink
                 currentDisplay={currentDisplay}
                 linkText={link2Text}
                 pathName={link2Path}

src/components/projects/Introduction.css

@@ -0,0 +1,145 @@
+/* RESETS */
+p {
+  margin: 10px 3%;
+}
+
+/* GENERAL */
+.Introduction {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+  box-sizing: border-box;
+  margin-bottom: 0%;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+/* background images */
+.Introduction .bg-img-ctr {
+  /* position */
+  display: flex;
+  align-items: center; /* vertical */
+  justify-content: center; /* horizontal */
+  position: absolute;
+  z-index: 0;
+  /* sizing */
+  height: 100%;
+  max-height: 100%;
+  width: 100vw;
+}
+
+.Introduction .bg-img {
+  height: 100%;
+  max-height: 100%;
+  min-width: 100%;
+  object-fit: cover;
+  /* . . . Image Rendering . . . */
+  image-rendering: -moz-crisp-edges; /* Firefox */
+  image-rendering: -o-crisp-edges; /* Opera */
+  image-rendering: -webkit-optimize-contrast; /* Chrome / Safari */
+  image-rendering: pixelated; /* Chrome as of 2019 */
+  image-rendering: optimize-contrast; /* CSS3 Proposed */
+  -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
+  z-index: -1;
+}
+
+/* content */
+.Introduction .content-ctr {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100vw;
+  max-height: 63%;
+  overflow: scroll;
+  z-index: 1;
+  color: rgb(250, 250, 250);
+  padding: 6vh 0%;
+}
+
+.Introduction .img-ctr {
+  display: flex;
+  position: relative;
+  width: fit-content;
+  padding: 5px;
+  margin: 15px;
+}
+.Introduction .headshot {
+  min-width: 100px;
+  min-height: 100px;
+  max-width: 250px;
+  max-height: 250px;
+  width: 45vw;
+  height: auto;
+}
+.Introduction .img-bg-border {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  border: 10px ridge rgba(0, 255, 225, 0.767);
+}
+
+.Introduction .text-ctr {
+  max-width: 100%;
+  height: auto;
+}
+
+.Introduction .text-ctr .technologies {
+  font-weight: 600;
+  font-size: 17px;
+  text-shadow: 0 0 1.5px rgba(255, 255, 255, 1),
+    0 0 1.5px rgba(255, 255, 255, 1), 0 0 1.5px rgba(255, 255, 255, 1),
+    0 0 1.5px rgba(255, 255, 255, 1);
+  color: rgb(34, 176, 150);
+}
+
+@media only screen and (min-width: 768px) {
+  .Introduction {
+    justify-content: center;
+  }
+
+  .Introduction .content-ctr {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-height: none;
+    overflow: hidden;
+  }
+
+  .Introduction .content-ctr p {
+    text-align: center;
+    width: 300px;
+  }
+
+  .Introduction .content-ctr h1 {
+    font-size: 26px;
+  }
+
+  .Introduction .content-ctr h2 {
+    font-size: 22px;
+  }
+
+  .Introduction .text-ctr {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .Introduction .text-ctr .technologies {
+    font-size: 30px;
+    text-shadow: 0 0 4px rgba(255, 255, 255, 0.8),
+      0 0 4px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.8),
+      0 0 4px rgba(255, 255, 255, 0.8);
+    color: rgb(34, 176, 150);
+  }
+
+  .Introduction .technologies p {
+    margin: 0px 0px 5px 0px;
+    width: 100%;
+  }
+}