diff --git a/src/App.tsx b/src/App.tsx
index dfe4b82..53cfd9a 100644
--- a/src/App.tsx
+++ b/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
diff --git a/src/AppConfig.json b/src/AppConfig.json
index 9c89576..04ba2dc 100644
--- a/src/AppConfig.json
+++ b/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"
 }
diff --git a/src/components/HomeViewContent.tsx b/src/components/HVContent.tsx
similarity index 86%
rename from src/components/HomeViewContent.tsx
rename to src/components/HVContent.tsx
index 103a245..9626d02 100644
--- a/src/components/HomeViewContent.tsx
+++ b/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;
diff --git a/src/components/HomeViewFooter.tsx b/src/components/HVFooter.tsx
similarity index 92%
rename from src/components/HomeViewFooter.tsx
rename to src/components/HVFooter.tsx
index 8794dfd..dabcfca 100644
--- a/src/components/HomeViewFooter.tsx
+++ b/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;
diff --git a/src/components/HomeViewHeader.tsx b/src/components/HVHeader.tsx
similarity index 94%
rename from src/components/HomeViewHeader.tsx
rename to src/components/HVHeader.tsx
index 7e422b6..0bd4596 100644
--- a/src/components/HomeViewHeader.tsx
+++ b/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;
diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx
index 57064e1..e25543a 100644
--- a/src/components/HomeView.tsx
+++ b/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>
   );
 };
diff --git a/src/components/LandingPageLink.tsx b/src/components/LPLink.tsx
similarity index 92%
rename from src/components/LandingPageLink.tsx
rename to src/components/LPLink.tsx
index 52d90a9..d6ee3bb 100644
--- a/src/components/LandingPageLink.tsx
+++ b/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;
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 5290032..288d257 100644
--- a/src/components/LandingPage.tsx
+++ b/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}
diff --git a/src/components/projects/Introduction.css b/src/components/projects/Introduction.css
new file mode 100644
index 0000000..79e303b
--- /dev/null
+++ b/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%;
+  }
+}
diff --git a/src/components/projects/Introduction.tsx b/src/components/projects/Introduction.tsx
new file mode 100644
index 0000000..4877a41
--- /dev/null
+++ b/src/components/projects/Introduction.tsx
@@ -0,0 +1,49 @@
+import { useContext } from "react";
+import { animated } from "react-spring";
+import AppContext from "../../contexts/AppContext";
+import headshot from "../../img/Headshot-PurpleFlannel.png";
+import pixelBG from "../../img/pixelBG_LowRes.png";
+import AppConfig from "../../AppConfig.json";
+import "./Introduction.css";
+
+const Introduction = () => {
+  const { hueRotation, hueRotation_Inv } = useContext(AppContext);
+  const introP1 = AppConfig.intro_txt_p1;
+  const introP2 = AppConfig.intro_txt_p2;
+  const introP3 = AppConfig.intro_txt_p3;
+  const introP4 = AppConfig.intro_txt_p4;
+  const introP5 = AppConfig.built_using_txt;
+
+  return (
+    <div className='Introduction'>
+      <div className='bg-img-ctr'>
+        <animated.img
+          className={`bg-img`}
+          style={hueRotation_Inv}
+          src={pixelBG}
+          alt='pixelart background image'
+        />
+      </div>
+      <div className='content-ctr'>
+        <div className='img-ctr'>
+          <img className={"headshot"} src={headshot} alt='jake-headshot-img' />
+          <animated.div
+            className='img-bg-border'
+            style={hueRotation}></animated.div>
+        </div>
+        <div className='text-ctr'>
+          <h1>{introP1}</h1>
+          <p>{introP2}</p>
+          <p>{introP3}</p>
+          <p>{introP4}</p>
+          <h2>This website built from scratch utilizing:</h2>
+          <animated.div className={"technologies"} style={hueRotation}>
+            <p>{introP5}</p>
+          </animated.div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Introduction;
diff --git a/src/components/projects/MediaMatchup.tsx b/src/components/projects/MediaMatchup.tsx
index 7c40c31..4feee42 100644
--- a/src/components/projects/MediaMatchup.tsx
+++ b/src/components/projects/MediaMatchup.tsx
@@ -1,6 +1,7 @@
 import ProjImage from "./ProjImage";
-import mediaMatchupMainAVIF from "../../img/Projects/MediaMatchup/MediaMatchupMain.avif";
-import mediaMatchupMainJPG from "../../img/Projects/MediaMatchup/MediaMatchupMain.jpg";
+// import mediaMatchupMainAVIF from "../../img/Projects/MediaMatchup/MediaMatchupMain.avif";
+// import mediaMatchupMainJPG from "../../img/Projects/MediaMatchup/MediaMatchupMain.jpg";
+import matchupImg from "../../img/Projects/MediaMatchup/ST4vsArt.jpg";
 import { animated } from "react-spring";
 
 interface Props {
@@ -29,8 +30,8 @@ const MediaMatchup = ({ isPortfolio }: Props) => {
   return (
     <animated.div className='MediaMatchup media-ctr'>
       <ProjImage
-        imgSrc={mediaMatchupMainJPG}
-        imgSrc_Fallback={mediaMatchupMainJPG}
+        imgSrc={matchupImg}
+        imgSrc_Fallback={matchupImg}
         isPortfolio={isPortfolio}
         imgAltTxt={"MediaMatchup Demo"}
         tech={technologies}
diff --git a/src/components/projects/PersonalIntro.tsx b/src/components/projects/PersonalIntro.tsx
deleted file mode 100644
index e41b3ce..0000000
--- a/src/components/projects/PersonalIntro.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import headshot from "../../img/Headshot-PurpleFlannel.png";
-
-const PersonalIntro = () => {
-  return (
-    <div className='PersonalIntro'>
-      <img src={headshot} alt='jake-headshot-img' />
-      <p>Hello! I'm Jake</p>
-    </div>
-  );
-};
-
-export default PersonalIntro;
diff --git a/src/components/projects/ProjDescPortfolio.tsx b/src/components/projects/ProjDescPortfolio.tsx
index c3f04d1..8c8980b 100644
--- a/src/components/projects/ProjDescPortfolio.tsx
+++ b/src/components/projects/ProjDescPortfolio.tsx
@@ -8,10 +8,8 @@ interface Props {
 const ProjDescPortfolio = ({ title, desc }: Props) => {
   return (
     <div
-      className="ProjDescPortfolio
-  ">
-      {title}
-    </div>
+      className='ProjDescPortfolio
+  '></div>
   );
 };
 
diff --git a/src/components/projects/ProjImage.css b/src/components/projects/ProjImage.css
index 56875c0..50fe43c 100644
--- a/src/components/projects/ProjImage.css
+++ b/src/components/projects/ProjImage.css
@@ -1,11 +1,21 @@
 .ProjImage {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: start;
+  align-items: center;
+  /* height: 50%; */
+  width: 100%;
   height: 100%;
-  max-width: 100%;
+  margin: 0px;
 }
 
 .ProjImage .img-ctr {
-  max-width: 100%;
+  max-width: 70%;
+  max-height: 80%;
+}
+
+@media only screen and (min-width: 768px) {
+  .ProjImage {
+    justify-content: center;
+  }
 }
diff --git a/src/components/styles/HVContent.css b/src/components/styles/HVContent.css
new file mode 100644
index 0000000..fb04fe0
--- /dev/null
+++ b/src/components/styles/HVContent.css
@@ -0,0 +1,36 @@
+/* - - - - GENERAL - - - -*/
+.HVContent {
+  position: relative;
+  display: flex;
+  width: 100vw;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.HVContent video {
+  height: 100%;
+  object-fit: cover;
+  margin-left: 50%;
+  transform: translateX(-50%);
+  min-width: 100%;
+}
+
+.HVContent img {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.HVContent .media-ctr {
+  height: 100%;
+  width: 100%;
+}
+
+/* - - - - MEDIA QUERIES - - - -*/
+@media only screen and (min-width: 768px) {
+  .HVContent video {
+    height: 110%;
+  }
+}
diff --git a/src/components/styles/HomeViewFooter.css b/src/components/styles/HVFooter.css
similarity index 70%
rename from src/components/styles/HomeViewFooter.css
rename to src/components/styles/HVFooter.css
index 50b944b..49d6c73 100644
--- a/src/components/styles/HomeViewFooter.css
+++ b/src/components/styles/HVFooter.css
@@ -1,23 +1,23 @@
 /* - - - RESETS - - -*/
-.HomeViewFooter h1,
-.HomeViewFooter h2,
-.HomeViewFooter a,
-.HomeViewFooter p,
-.HomeViewFooter ul,
-.HomeViewFooter li {
+.HVFooter h1,
+.HVFooter h2,
+.HVFooter a,
+.HVFooter p,
+.HVFooter ul,
+.HVFooter li {
   margin: 0px;
   padding: 0px;
 }
 
 /* - - - GENERAL - - -*/
-.HomeViewFooter {
+.HVFooter {
   /* Position and Sizing */
   position: absolute;
   bottom: 5%;
-  width: 65vw;
   min-width: 235px;
   max-width: 375px;
-  height: 110px;
+  width: 65vw;
+  height: 100px;
   border-radius: 20px;
   /* Flex */
   display: flex;
@@ -32,19 +32,19 @@
   font-size: 16px;
 }
 
-.HomeViewFooter h2 {
+.HVFooter h2 {
   font-size: 26px;
   font-weight: 400;
 }
 
-.HomeViewFooter .project-nav-ctr {
+.HVFooter .project-nav-ctr {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
-.HomeViewFooter .project-nav {
+.HVFooter .project-nav {
   display: flex;
   flex: 1;
   flex-direction: row;
@@ -52,32 +52,32 @@
   margin-bottom: 5px;
 }
 
-.HomeViewFooter .nav-ctr {
+.HVFooter .nav-ctr {
   display: flex;
   flex: 1;
   justify-content: center;
   align-items: center;
 }
 
-.HomeViewFooter .nav-ctr a {
+.HVFooter .nav-ctr a {
   font-size: 22px;
 }
 
-.HomeViewFooter .nav-ctr ul {
+.HVFooter .nav-ctr ul {
   display: flex;
   list-style: none;
 }
 
-.HomeViewFooter .nav-ctr ul li {
+.HVFooter .nav-ctr ul li {
   margin: 0px 10px;
   height: 30px;
 }
 
-.HomeViewFooter .rights-ctr {
+.HVFooter .rights-ctr {
   font-size: 10px;
 }
 
-.HomeViewFooter .hidden {
+.HVFooter .hidden {
   margin: -3px;
   visibility: hidden;
 }
@@ -85,7 +85,7 @@
 /* - - - MEDIA QUERIES - - -*/
 
 @media only screen and (min-width: 768px) {
-  .HomeViewFooter {
+  .HVFooter {
     height: 20px;
     bottom: 10px;
     border: none;
@@ -93,11 +93,11 @@
     backdrop-filter: none;
   }
 
-  .HomeViewFooter .project-nav-ctr {
+  .HVFooter .project-nav-ctr {
     display: none;
   }
 
-  .HomeViewFooter .rights-ctr {
+  .HVFooter .rights-ctr {
     font-size: 14px;
   }
 }
diff --git a/src/components/styles/HomeViewHeader.css b/src/components/styles/HVHeader.css
similarity index 67%
rename from src/components/styles/HomeViewHeader.css
rename to src/components/styles/HVHeader.css
index 86403cb..9268075 100644
--- a/src/components/styles/HomeViewHeader.css
+++ b/src/components/styles/HVHeader.css
@@ -1,16 +1,16 @@
 /* - - - RESETS - - -*/
-.HomeViewHeader h1,
-.HomeViewHeader h2,
-.HomeViewHeader a,
-.HomeViewHeader p,
-.HomeViewHeader ul,
-.HomeViewHeader li {
+.HVHeader h1,
+.HVHeader h2,
+.HVHeader a,
+.HVHeader p,
+.HVHeader ul,
+.HVHeader li {
   margin: 0px;
   padding: 0px;
 }
 
 /* - - - GENERAL - - -*/
-.HomeViewHeader {
+.HVHeader {
   /* Position and Sizing */
   width: 100vw;
   height: 90px;
@@ -24,31 +24,31 @@
   text-decoration: none;
 }
 
-.HomeViewHeader h1 {
+.HVHeader h1 {
   margin: 2px 0px;
 }
 
-.HomeViewHeader a {
+.HVHeader a {
   color: rgb(58, 58, 58);
 }
 
-.HomeViewHeader .title-ctr {
+.HVHeader .title-ctr {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 175px;
 }
 
-.HomeViewHeader .project-nav-ctr {
+.HVHeader .project-nav-ctr {
   display: none;
 }
 
-.HomeViewHeader .nav-category-ctr {
+.HVHeader .nav-category-ctr {
   display: flex;
   justify-content: center;
 }
 
-.HomeViewHeader .nav-category-ctr ul {
+.HVHeader .nav-category-ctr ul {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -57,61 +57,61 @@
   width: 181px;
 }
 
-.HomeViewHeader .nav-category-ctr ul li {
+.HVHeader .nav-category-ctr ul li {
   margin: 0px 10px;
 }
 
-.HomeViewHeader .hidden {
+.HVHeader .hidden {
   display: none;
 }
 
 /* - - - MEDIA QUERIES - - -*/
 @media only screen and (min-width: 768px) {
-  .HomeViewHeader {
+  .HVHeader {
     justify-content: space-around;
     height: 100px;
   }
 
-  .HomeViewHeader .title-ctr {
+  .HVHeader .title-ctr {
     width: 200px;
   }
 
-  .HomeViewHeader .project-nav-ctr {
+  .HVHeader .project-nav-ctr {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-evenly;
   }
 
-  .HomeViewHeader .project-nav {
+  .HVHeader .project-nav {
     display: flex;
     flex-direction: row;
     align-items: center;
     margin-top: 5px;
   }
 
-  .HomeViewHeader .nav-ctr {
+  .HVHeader .nav-ctr {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 5px;
   }
 
-  .HomeViewHeader .nav-ctr a {
+  .HVHeader .nav-ctr a {
     font-size: 20px;
   }
 
-  .HomeViewHeader .nav-ctr ul {
+  .HVHeader .nav-ctr ul {
     display: flex;
     list-style: none;
   }
 
-  .HomeViewHeader .nav-ctr ul li {
+  .HVHeader .nav-ctr ul li {
     margin: 0px 10px;
     height: 30px;
   }
 
-  .HomeViewHeader .hidden {
+  .HVHeader .hidden {
     display: flex;
     visibility: hidden;
     width: 181px;
diff --git a/src/components/styles/HomeView.css b/src/components/styles/HomeView.css
index ba6f428..9ddfaae 100644
--- a/src/components/styles/HomeView.css
+++ b/src/components/styles/HomeView.css
@@ -1,8 +1,8 @@
 /* - - - - RESETS - - - -*/
-.HomeViewHeader h1,
-.HomeViewHeader h2,
-.HomeViewHeader a,
-.HomeViewHeader p {
+.HVHeader h1,
+.HVHeader h2,
+.HVHeader a,
+.HVHeader p {
   margin: 0px;
   padding: 0px;
 }
@@ -55,6 +55,9 @@
 
 .HomeView .highlighted-link {
   color: rgb(0, 175, 166);
+  /* text-shadow: -0.5px -0.5px 0 rgb(250, 250, 250),
+    0.5px -0.5px 0 rgb(250, 250, 250), -0.5px 0.5px 0 rgb(250, 250, 250),
+    0.5px 0.5px 0 rgb(250, 250, 250); */
 }
 
 .HomeView .emoji {
diff --git a/src/components/styles/HomeViewContent.css b/src/components/styles/HomeViewContent.css
deleted file mode 100644
index 37fdc5c..0000000
--- a/src/components/styles/HomeViewContent.css
+++ /dev/null
@@ -1,59 +0,0 @@
-/* - - - - GENERAL - - - -*/
-.HomeViewContent {
-  position: relative;
-  display: flex;
-  width: 100vw;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-
-.HomeViewContent video {
-  height: 100%;
-  object-fit: cover;
-  margin-left: 50%;
-  transform: translateX(-50%);
-  min-width: 100%;
-}
-
-.HomeViewContent img {
-  height: 100%;
-  object-fit: cover;
-  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 {
-    height: 110%;
-  }
-}
diff --git a/src/components/styles/LandingPageLink.css b/src/components/styles/LPLink.css
similarity index 100%
rename from src/components/styles/LandingPageLink.css
rename to src/components/styles/LPLink.css
diff --git a/src/contexts/AppContext.ts b/src/contexts/AppContext.ts
index 959786d..dae5ba5 100644
--- a/src/contexts/AppContext.ts
+++ b/src/contexts/AppContext.ts
@@ -5,12 +5,14 @@ import { SpringValue } from "react-spring";
 export interface AppContextModel {
   isMobile: boolean;
   hueRotation: any;
+  hueRotation_Inv: any;
   setHueDuration: any;
 }
 
 const defaultValue: AppContextModel = {
   isMobile: true,
   hueRotation: undefined,
+  hueRotation_Inv: undefined,
   setHueDuration: undefined,
 };
 
diff --git a/src/contexts/AppContextProvider.tsx b/src/contexts/AppContextProvider.tsx
index f70b377..eff2664 100644
--- a/src/contexts/AppContextProvider.tsx
+++ b/src/contexts/AppContextProvider.tsx
@@ -26,6 +26,16 @@ const AppContextProvider = ({ children }: Props) => {
     },
     config: { duration: hueDuration, precision: 0.001 },
   });
+  const hueRotation_Inv = useSpring({
+    loop: { reverse: true, config: { duration: hueDuration } },
+    to: {
+      filter: "hue-rotate(0deg) saturate(100%) sepia(0%)",
+    },
+    from: {
+      filter: "hue-rotate(130deg) saturate(80%) sepia(30%)",
+    },
+    config: { duration: hueDuration, precision: 0.001 },
+  });
 
   const checkWindowSize = () => {
     if (window.matchMedia("(min-width: 768px)").matches && isMobile) {
@@ -42,7 +52,8 @@ const AppContextProvider = ({ children }: Props) => {
   });
 
   return (
-    <AppContext.Provider value={{ isMobile, hueRotation, setHueDuration }}>
+    <AppContext.Provider
+      value={{ isMobile, hueRotation, hueRotation_Inv, setHueDuration }}>
       {children}
     </AppContext.Provider>
   );
diff --git a/src/img/Projects/MediaMatchup/ST4vsArt.jpg b/src/img/Projects/MediaMatchup/ST4vsArt.jpg
new file mode 100644
index 0000000..5825356
Binary files /dev/null and b/src/img/Projects/MediaMatchup/ST4vsArt.jpg differ