JS-GitRepo · JS-GitRepo · Jul 14, 2022 · Jul 14, 2022 · Jul 14, 2022
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -0,0 +1,19 @@
+favicon.ico,1657132704394,c5bfaf489c76198724beac38fd4b3fca1125bbf8ba0f3ffd9ba9190bf6f53cea
+logo192.png,1657132692666,94a05bb86f2fa54e8d3f48900f954b5e79c3ea27468b473afd15103f852ef107
+logo512.png,1657132682614,7b92476b36f05aa53bd69500645fb5fe8866d7f0e3ef517c7b6529251418faff
+manifest.json,1657132371588,03d105d6225429616e0596db9f20a9c62fc48e2564cd1fc208ea60e6af1a0297
+robots.txt,1650942577330,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
+asset-manifest.json,1657829112988,c1ab03361ac5d599a6733ea4b8b22d5f7c572ac44a8debdff100121604b380e6
+index.html,1657829112988,1590ef6a3edd9c0754ba55a664db46790700c563cb3cbd95f684ced2c71dea5a
+static/css/main.d819203b.css,1657829112997,b194d80e43401a1c1f169ae74dc6730e1121a55c29e441fc044041af2effd374
+static/css/main.d819203b.css.map,1657829112998,2ec85b58f0e75cf4fe776dfe211fc58dcd592908aa00127adbe4dc997c5d0829
+static/js/787.cda612ba.chunk.js,1657829112997,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
+static/js/main.6ecde0db.js.LICENSE.txt,1657829112997,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c
+static/js/787.cda612ba.chunk.js.map,1657829112998,b2951aaefc907405199924466aa3611981c93baa933053878b4820131e37e4e6
+static/media/munro.f78662ff4aad4d038806.ttf,1657829112997,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
+static/media/animated-14fps.0a0c585671594fb5b8d7.png,1657829112997,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
+static/media/DeerfallBannerPoster.da9b95c64930f253bad0.avif,1657829112997,97801686c427e88a0435c83da7e8169cc9f89c3fb7773de869092077d7a1304c
+static/media/MediaMatchupMain.a4679932dd8686a8a9fc.avif,1657829112997,51bfb191530232ca3eb81f40f2c227acdbff36ad57bc570b9c9fbf9329e8dec6
+static/js/main.6ecde0db.js,1657829112997,d61dd4a72ef55459fa4f9ccd16e57c23d99de34f752cc8a56df93b2467155478
+static/media/DeerfallProRes_AV1.d420aebda0fdbb533e69.mp4,1657829112999,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
+static/js/main.6ecde0db.js.map,1657829112999,c8b1c30b9bad68c42870d38ad52e4208d2b24563a9997cf39541bd4034a3a18f
diff --git a/.firebase/hosting.cHVibGlj.cache b/.firebase/hosting.cHVibGlj.cache
@@ -0,0 +1,6 @@
+favicon.ico,1650942576689,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9
+index.html,1657069816534,85e97b54f14b4e67090bc2c53166e388b8cd1120e54e06b4c4ebba4df594ef06
+logo192.png,1650942577000,3ee59515172ee198f3be375979df15ac5345183e656720a381b8872b2a39dc8b
+logo512.png,1650942577052,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
+manifest.json,1650942576755,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
+robots.txt,1650942577330,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -31,23 +31,20 @@
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
-
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>JSDotDev</title>
+    <title>jakesnyder.dev</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
-
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
-
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -4,7 +4,7 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
+      "sizes": "64x64 32x32 16x16",
       "type": "image/x-icon"
     },
     {

diff --git a/src/App.css b/src/App.css
@@ -8,6 +8,7 @@
 .App {
   position: relative;
   height: 100%;
+  max-height: 100%;
   width: 100%;
   text-align: center;
 }
@@ -16,15 +17,42 @@
   font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
 }
 
+.App .emoji {
+  font-family: "Noto Emoji", sans-serif;
+  font-style: normal;
+}
+
 .App .wip-disclaimer {
   font-family: "munro";
   color: white;
   position: absolute;
-  bottom: 100px;
+  bottom: 12%;
   left: 50%;
   transform: translate(-50%);
   z-index: 100;
   border: solid white 2px;
   background-color: rgba(96, 96, 96, 0.348);
-  padding: 10px;
+  padding: 0px 10px;
+  width: 90%;
+}
+
+.App .wip-disclaimer h2 {
+  margin: 10px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.App .wip-disclaimer p {
+  margin: 10px;
+  font-size: 14px;
+}
+
+/* - - - - MEDIA QUERIES - - - - */
+@media only screen and (min-width: 768px) {
+  .App .wip-disclaimer {
+    bottom: 100px;
+    padding: 10px;
+    width: 80%;
+  }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -108,8 +108,11 @@ function App() {
         </Routes>
       </Router>
       <div className={"wip-disclaimer"}>
-        <p>{`[Website Under Construction / Active Development]`}</p>
-        <p>{`At the moment, some features may be incomplete, buggy, or site-breaking. Please re-visit when able to see how things change and how far they have come since last time!`}</p>
+        <h2>
+          <span className="emoji">🛠</span> Website Under Construction{" "}
+          <span className="emoji">🛠</span>
+        </h2>
+        <p>{`Some features may be incomplete, buggy, or site-breaking. Feel free to explore and please re-visit soon!`}</p>
       </div>
     </div>
   );

diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx
@@ -14,11 +14,14 @@ interface Props {
 }
 
 const HomeView = ({ hueRotation, setHueDuration }: Props) => {
-  // - - - - - Titles and Text - - - - -
+  // - - - - GENERAL STATES - - - -
+  const [firstRender, setFirstRender] = useState<boolean>(true);
+  // - - - - - TITLES AND TEXT - - - - -
+  const [currentProject, setCurrentProject] = useState<string>("Deerfall");
   const [title, setTitle] = useState<string>("Dev Blog");
   const [subtitle, setSubtitle] = useState<string>("Welcome! ");
   const [subEmoji, setSubEmoji] = useState<string>(" 🙂");
-  // - - - - - Links - - - - -
+  // - - - - - LINKS - - - - -
   const [gameDevLink, setGameDevLink] = useState<string>("");
   const [webDevLink, setWebDevLink] = useState<string>("");
   const [portfolioLink, setPortfolioLink] = useState<string>("");
@@ -27,10 +30,9 @@ const HomeView = ({ hueRotation, setHueDuration }: Props) => {
   const [isGameDev, setIsGameDev] = useState<boolean>(true);
   const navigate = useNavigate();
   const currentPath = useLocation().pathname;
-  // - - - - - Projects - - - - -
+  // - - - - - PROJECTS - - - - -
   const gameDevProjList = ["Deerfall"];
   const webDevProjList = ["MediaMatchup"];
-  const [currentProject, setCurrentProject] = useState<string>("");
 
   useEffect(() => {
     if (currentPath.includes("/gamedev/")) {
@@ -42,29 +44,37 @@ const HomeView = ({ hueRotation, setHueDuration }: Props) => {
 
   useEffect(() => {
     if (currentPath.includes("/gamedev/portfolio")) {
+      if (currentPath.includes("home/")) {
+        navigate(`/home/gamedev/portfolio/${currentProject}`);
+      }
       setTitle("GameDev Portfolio");
-      navigate(`/home/gamedev/portfolio/${currentProject}`);
       setWebDevLink(`/home/webdev/portfolio/${currentProject}`);
       setBlogLink(`/home/gamedev/blog/${currentProject}`);
       setIsPortfolio(true);
       setIsGameDev(true);
     } else if (currentPath.includes("/gamedev/blog")) {
+      if (currentPath.includes("home/")) {
+        navigate(`/home/gamedev/blog/${currentProject}`);
+      }
       setTitle("GameDev Blog");
-      navigate(`/home/gamedev/blog/${currentProject}`);
       setWebDevLink(`/home/webdev/blog/${currentProject}`);
       setPortfolioLink(`/home/gamedev/portfolio/${currentProject}`);
       setIsPortfolio(false);
       setIsGameDev(true);
     } else if (currentPath.includes("/webdev/portfolio")) {
+      if (currentPath.includes("home/")) {
+        navigate(`/home/webdev/portfolio/${currentProject}`);
+      }
       setTitle("WebDev Portfolio");
-      navigate(`/home/webdev/portfolio/${currentProject}`);
       setGameDevLink(`/home/gamedev/portfolio/${currentProject}`);
       setBlogLink(`/home/webdev/blog/${currentProject}`);
       setIsPortfolio(true);
       setIsGameDev(false);
     } else if (currentPath.includes("/webdev/blog")) {
+      if (currentPath.includes("home/")) {
+        navigate(`/home/webdev/blog/${currentProject}`);
+      }
       setTitle("WebDev Blog");
-      navigate(`/home/webdev/blog/${currentProject}`);
       setGameDevLink(`/home/gamedev/blog/${currentProject}`);
       setPortfolioLink(`/home/webdev/portfolio/${currentProject}`);
       setIsPortfolio(false);

diff --git a/src/components/HomeViewFooter.css b/src/components/HomeViewFooter.css
@@ -43,7 +43,8 @@
 }
 
 .HomeViewFooter .project-nav-type-cat a {
-  margin: 6px;
+  font-size: 18px;
+  margin: 4px;
 }
 
 .HomeViewFooter .rights-ctr {

diff --git a/src/components/LandingPage.css b/src/components/LandingPage.css
@@ -4,6 +4,7 @@
 .LandingPage {
   position: relative;
   height: 100%;
+  max-height: 100%;
   width: 100%;
   overflow: hidden;
 }
@@ -17,6 +18,7 @@
   justify-content: center;
   box-sizing: border-box;
   height: 100%;
+  max-height: 100%;
   width: 100%;
   z-index: 1;
   /* . . . Fonts . . . */
@@ -28,17 +30,19 @@
 }
 
 .LandingPage .bg-img-container {
+  height: 100%;
+  max-height: 100%;
+  width: 100vw;
   display: flex;
   align-items: center; /* vertical */
   justify-content: center; /* horizontal */
   position: absolute;
-  width: 100vw;
-  height: 100vh;
   z-index: 0;
 }
 
 .LandingPage .bg-img {
-  height: 100vh;
+  height: 100%;
+  max-height: 100%;
   min-width: 100%;
   object-fit: cover;
   /* . . . Image Rendering . . . */
@@ -91,7 +95,8 @@
   justify-content: center;
   box-sizing: border-box;
   width: 100vw;
-  height: 100vh;
+  height: 100%;
+  max-height: 100%;
   z-index: 0;
 }
 

diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import "./LandingPage.css";
 import LandingPageLink from "./LandingPageLink";
-import { animated, SpringValue, useSpring, useTransition } from "react-spring";
+import { animated, SpringValue, useTransition } from "react-spring";
 import HomeView from "./HomeView";
 import AuthContext from "../contexts/AuthContext";
 import pixelBG from "../img/pixelBG_LowRes.png";

diff --git a/src/components/projects/Deerfall.tsx b/src/components/projects/Deerfall.tsx
@@ -1,22 +1,15 @@
-import ProjectContents from "./ProjectContents";
-import DeerfallVid from "../../img/MainBanner-H264.mp4";
-import { useEffect, useState } from "react";
-import { animated, config, useTransition } from "react-spring";
+import ProjVideo from "./ProjVideo";
+import DeerfallVidAV1 from "../../img/Projects/Deerfall/DeerfallBanner_AV1.mp4";
+import DeerfallVidH265 from "../../img/Projects/Deerfall/DeerfallBanner_H265.mp4";
+import DeerfallVidH264 from "../../img/Projects/Deerfall/DeerfallBanner_H264.mp4";
+import DeerfallPosterJPG from "../../img/Projects/Deerfall/DeerfallBannerPoster.jpg";
+import { animated } from "react-spring";
 
 interface Props {
   isPortfolio: boolean;
 }
 
 const Deerfall = ({ isPortfolio }: Props) => {
-  // - - - - Transition - - - -
-  // const transitions = useTransition(transition, {
-  //   from: { opacity: 0 },
-  //   enter: { opacity: 1 },
-  //   update: { opacity: 0 },
-  //   leave: { opacity: 0 },
-  //   config: config.molasses,
-  // });
-
   // - - - - Tech and Skills - - - -
   const technologies: string[] = [
     "Unreal Engine",
@@ -32,14 +25,20 @@ const Deerfall = ({ isPortfolio }: Props) => {
     "Locomotion",
     "Inventory Systems",
   ];
+  const desc: string = "";
 
   return (
     <animated.div className="Deerfall">
-      <ProjectContents
-        vidSrc={DeerfallVid}
+      <ProjVideo
+        vidSrc={DeerfallVidAV1}
         isPortfolio={isPortfolio}
         tech={technologies}
         skills={skills}
+        title={"Deerfall"}
+        desc={desc}
+        vidPoster={DeerfallPosterJPG}
+        vidSrc_Fallback={DeerfallVidH265}
+        vidSrc_Fallback2={DeerfallVidH264}
       />
     </animated.div>
   );

diff --git a/src/components/projects/MediaMatchup.tsx b/src/components/projects/MediaMatchup.tsx
@@ -1,21 +1,13 @@
-import ProjectImage from "./ProjectImage";
-import mediaMatchupMain from "../../img/Projects/MediaMatchup/MediaMatchupMain.png";
-import { animated, config, useTransition } from "react-spring";
-import { useEffect, useState } from "react";
+import ProjImage from "./ProjImage";
+import mediaMatchupMainAVIF from "../../img/Projects/MediaMatchup/MediaMatchupMain.avif";
+import mediaMatchupMainJPG from "../../img/Projects/MediaMatchup/MediaMatchupMain.jpg";
+import { animated } from "react-spring";
 
 interface Props {
   isPortfolio: boolean;
 }
 
 const MediaMatchup = ({ isPortfolio }: Props) => {
-  // - - - - Transitions - - - -
-  // const transitions = useTransition(transition, {
-  //   from: { opacity: 0 },
-  //   enter: { opacity: 1 },
-  //   leave: { opacity: 0 },
-  //   reverse: transition,
-  //   config: config.molasses,
-  // });
   // - - - - Tech and Skills - - - -
   const technologies: string[] = [
     "JavaScript",
@@ -32,15 +24,19 @@ const MediaMatchup = ({ isPortfolio }: Props) => {
     "Software Engineering",
     "Hosting",
   ];
+  const desc: string = "";
 
   return (
     <animated.div className="MediaMatchup">
-      <ProjectImage
-        imgSrc={mediaMatchupMain}
+      <ProjImage
+        imgSrc={mediaMatchupMainAVIF}
+        imgSrc_Fallback={mediaMatchupMainJPG}
         isPortfolio={isPortfolio}
         imgAltTxt={"MediaMatchup Demo"}
         tech={technologies}
         skills={skills}
+        title={"Media Matchup"}
+        desc={desc}
       />
     </animated.div>
   );

diff --git a/src/components/projects/ProjectBlogDesc.css → src/components/projects/ProjDescBlog.css b/src/components/projects/ProjectBlogDesc.css → src/components/projects/ProjDescBlog.css
diff --git a/src/components/projects/ProjDescBlog.tsx b/src/components/projects/ProjDescBlog.tsx
@@ -0,0 +1,12 @@
+import "./ProjDescBlog.css";
+
+interface Props {
+  title: string;
+  desc: string;
+}
+
+const ProjDescBlog = ({ title, desc }: Props) => {
+  return <div className="ProjDescBlog">{title}</div>;
+};
+
+export default ProjDescBlog;
diff --git a/src/components/projects/ProjectContents.css → ...components/projects/ProjDescPortfolio.css b/src/components/projects/ProjectContents.css → ...components/projects/ProjDescPortfolio.css
diff --git a/src/components/projects/ProjDescPortfolio.tsx b/src/components/projects/ProjDescPortfolio.tsx
@@ -0,0 +1,18 @@
+import "./ProjDescPortfolio.css";
+
+interface Props {
+  title: string;
+  desc: string;
+}
+
+const ProjDescPortfolio = ({ title, desc }: Props) => {
+  return (
+    <div
+      className="ProjDescPortfolio
+  ">
+      {title}
+    </div>
+  );
+};
+
+export default ProjDescPortfolio;
diff --git a/src/components/projects/ProjectImage.css → src/components/projects/ProjImage.css b/src/components/projects/ProjectImage.css → src/components/projects/ProjImage.css