diff --git a/public/index.html b/public/index.html
index 5b171d8..90c9a5c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;1,300;1,400&family=Kdam+Thmor+Pro&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;1,100;1,200;1,300;1,400&family=Kdam+Thmor+Pro&family=Noto+Emoji:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
diff --git a/src/App.css b/src/App.css
index 5d068aa..fe61fe9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,12 @@
+/* - - - - - lINKS AND FONTS - - - - - - - - */
+@font-face {
+  font-family: "munro";
+  src: url("/src/img/munro/munro.ttf");
+}
+
+/* - - - - - GENERAL - - - - - - - - */
 .App {
+  position: relative;
   height: 100%;
   width: 100%;
   text-align: center;
@@ -7,3 +15,16 @@
 .material-symbols-outlined {
   font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
 }
+
+.App .wip-disclaimer {
+  font-family: "munro";
+  color: white;
+  position: absolute;
+  bottom: 100px;
+  left: 50%;
+  transform: translate(-50%);
+  z-index: 100;
+  border: solid white 2px;
+  background-color: rgba(96, 96, 96, 0.348);
+  padding: 10px;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 37172e4..13c79df 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,20 +7,110 @@ import {
 } from "react-router-dom";
 import LandingPage from "./components/LandingPage";
 import HomeView from "./components/HomeView";
+import { useSpring } from "react-spring";
+import { useState } from "react";
 
 function App() {
+  const [hueFlip, setHueFlip] = useState<boolean>(false);
+  const [bgAnimOff, setBgAnimOff] = useState<boolean>(false);
+  const [hueDuration, setHueDuration] = useState<number>(4000);
+  const hueRotation = useSpring({
+    to: {
+      filter: "hue-rotate(130deg) saturate(80%) sepia(30%)",
+    },
+    from: {
+      filter: "hue-rotate(0deg) saturate(100%) sepia(0%)",
+    },
+    reset: false,
+    cancel: bgAnimOff,
+    reverse: hueFlip,
+    delay: 2000,
+    config: { duration: hueDuration, tension: 280, friction: 60 },
+    onRest: () => setHueFlip(!hueFlip),
+  });
+
   return (
     <div className="App">
       <Router>
         <Routes>
-          <Route path="/" element={<LandingPage />} />
-          <Route path="/landing" element={<LandingPage />} />
-          <Route path="/landing/:location" element={<LandingPage />} />
-          <Route path="/landing/:category/:content" element={<LandingPage />} />
-          <Route path="/home" element={<HomeView />} />
-          <Route path="/home/:category/:content" element={<HomeView />} />
+          <Route
+            path="/"
+            element={
+              <LandingPage
+                hueRotation={hueRotation}
+                setHueDuration={setHueDuration}
+              />
+            }
+          />
+          <Route
+            path="/landing"
+            element={
+              <LandingPage
+                hueRotation={hueRotation}
+                setHueDuration={setHueDuration}
+              />
+            }
+          />
+          <Route
+            path="/landing/:location"
+            element={
+              <LandingPage
+                hueRotation={hueRotation}
+                setHueDuration={setHueDuration}
+              />
+            }
+          />
+          <Route
+            path="/landing/:category/:content"
+            element={
+              <LandingPage
+                hueRotation={hueRotation}
+                setHueDuration={setHueDuration}
+              />
+            }
+          />
+          <Route
+            path="/landing/:category/:content/:project"
+            element={
+              <LandingPage
+                hueRotation={hueRotation}
+                setHueDuration={setHueDuration}
+              />
+            }
+          />
+          <Route
+            path="/home"
+            element={
+              <HomeView
+                hueRotation={hueRotation}
+                setHueDuration={setHueDuration}
+              />
+            }
+          />
+          <Route
+            path="/home/:category/:content"
+            element={
+              <HomeView
+                hueRotation={hueRotation}
+                setHueDuration={setHueDuration}
+              />
+            }
+          />
+          <Route
+            path="/home/:category/:content/:project"
+            element={
+              <HomeView
+                hueRotation={hueRotation}
+                setHueDuration={setHueDuration}
+              />
+            }
+          />
         </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>
+      </div>
     </div>
   );
 }
diff --git a/src/components/HomeView.css b/src/components/HomeView.css
index 268cc44..59e44b0 100644
--- a/src/components/HomeView.css
+++ b/src/components/HomeView.css
@@ -1,3 +1,13 @@
+/* - - - - RESETS - - - -*/
+.HomeViewHeader h1,
+.HomeViewHeader h2,
+.HomeViewHeader a,
+.HomeViewHeader p {
+  margin: 0px;
+  padding: 0px;
+}
+
+/* - - - - GENERAL - - - -*/
 .HomeView {
   position: absolute;
   display: flex;
@@ -8,18 +18,18 @@
   width: 100vw;
   box-sizing: border-box;
   /* FONTS */
-  font-family: "Fira Sans", sans-serif;
+  font-family: "munro";
+  font-size: 16px;
   font-weight: 300;
-  font-style: italic;
-  font-size: 18px;
+  font-smooth: never;
+  -webkit-font-smoothing: none;
   letter-spacing: 1px;
   color: rgb(75, 75, 75);
-  font-smooth: never;
 }
 
 .HomeView h1 {
   font-weight: 300;
-  font-size: 24px;
+  font-size: 22px;
 }
 
 .HomeView h2 {
@@ -27,17 +37,60 @@
   font-size: 22px;
 }
 
-/* - - - - - HomeView Background Image - - - - -  */
+.HomeView a {
+  text-decoration: none;
+  color: rgb(75, 75, 75);
+}
+
+.HomeView a:hover {
+  color: rgb(64, 210, 236);
+  text-decoration: none;
+}
+
+.HomeView .subtitle {
+  font-size: 14px;
+  font-weight: 300;
+  display: none;
+}
+
+.HomeView .highlighted-link {
+  color: rgb(0, 175, 166);
+}
+
+.HomeView .emoji {
+  font-family: "Noto Emoji", sans-serif;
+  font-style: normal;
+  font-size: 12px;
+}
 
-/* - - - MEDIA QUERIES - - -*/
+/* - - - - MEDIA QUERIES - - - -*/
 @media only screen and (min-width: 768px) {
   .HomeView {
-    font-weight: 400;
-    font-size: 1.5vh;
+    font-size: 18px;
   }
 
   .HomeView h1 {
-    font-weight: 300;
-    font-size: 2.5vh;
+    font-weight: 200;
+    font-size: 24px;
+  }
+
+  .HomeView h2 {
+    font-weight: 200;
+    font-size: 26px;
+  }
+
+  .HomeView .subtitle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: "munro";
+    font-style: normal;
+    font-size: 14px;
+    font-weight: 300px;
+  }
+
+  .HomeView .emoji {
+    font-size: 10px;
+    font-weight: 700;
   }
 }
diff --git a/src/components/HomeView.tsx b/src/components/HomeView.tsx
index cbea80d..b5fce23 100644
--- a/src/components/HomeView.tsx
+++ b/src/components/HomeView.tsx
@@ -1,19 +1,106 @@
 import "./HomeView.css";
-import { useLocation, useNavigate } from "react-router-dom";
-import { useEffect } from "react";
+import { Navigate, useLocation, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
 import HomeViewHeader from "./HomeViewHeader";
 import HomeViewFooter from "./HomeViewFooter";
 import HomeViewContent from "./HomeViewContent";
+import { SpringValue } from "react-spring";
 
-const HomeView = () => {
-  const currentPath = useLocation().pathname;
+interface Props {
+  hueRotation: {
+    filter: SpringValue<string>;
+  };
+  setHueDuration: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const HomeView = ({ hueRotation, setHueDuration }: Props) => {
+  // - - - - - Titles and Text - - - - -
+  const [title, setTitle] = useState<string>("Dev Blog");
+  const [subtitle, setSubtitle] = useState<string>("Welcome! ");
+  const [subEmoji, setSubEmoji] = useState<string>(" 🙂");
+  // - - - - - Links - - - - -
+  const [gameDevLink, setGameDevLink] = useState<string>("");
+  const [webDevLink, setWebDevLink] = useState<string>("");
+  const [portfolioLink, setPortfolioLink] = useState<string>("");
+  const [blogLink, setBlogLink] = useState<string>("");
+  const [isPortfolio, setIsPortfolio] = useState<boolean>(true);
+  const [isGameDev, setIsGameDev] = useState<boolean>(true);
   const navigate = useNavigate();
+  const currentPath = useLocation().pathname;
+  // - - - - - Projects - - - - -
+  const gameDevProjList = ["Deerfall"];
+  const webDevProjList = ["MediaMatchup"];
+  const [currentProject, setCurrentProject] = useState<string>("");
+
+  useEffect(() => {
+    if (currentPath.includes("/gamedev/")) {
+      setCurrentProject(gameDevProjList[0]);
+    } else if (currentPath.includes("/webdev/")) {
+      setCurrentProject(webDevProjList[0]);
+    }
+  }, [isGameDev]);
+
+  useEffect(() => {
+    if (currentPath.includes("/gamedev/portfolio")) {
+      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")) {
+      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")) {
+      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")) {
+      setTitle("WebDev Blog");
+      navigate(`/home/webdev/blog/${currentProject}`);
+      setGameDevLink(`/home/gamedev/blog/${currentProject}`);
+      setPortfolioLink(`/home/webdev/portfolio/${currentProject}`);
+      setIsPortfolio(false);
+      setIsGameDev(false);
+    }
+    setHueDuration(12000);
+  }, [currentPath, currentProject]);
 
   return (
     <div className="HomeView">
-      <HomeViewHeader pathname={currentPath} />
-      <HomeViewContent pathname={currentPath} />
-      <HomeViewFooter pathname={currentPath} />
+      <HomeViewHeader
+        isPortfolio={isPortfolio}
+        gamedevOrWebdev={isGameDev}
+        hueRotation={hueRotation}
+        title={title}
+        subtitle={subtitle}
+        subEmoji={subEmoji}
+        gameDevLink={gameDevLink}
+        webDevLink={webDevLink}
+        portfolioLink={portfolioLink}
+        currentProject={currentProject}
+        blogLink={blogLink}
+      />
+      <HomeViewContent
+        pathname={currentPath}
+        isPortfolio={isPortfolio}
+        currentProject={currentProject}
+      />
+      <HomeViewFooter
+        pathname={currentPath}
+        gamedevOrWebdev={isGameDev}
+        hueRotation={hueRotation}
+        gameDevLink={gameDevLink}
+        webDevLink={webDevLink}
+        currentProject={currentProject}
+      />
     </div>
   );
 };
diff --git a/src/components/HomeViewContent.css b/src/components/HomeViewContent.css
index 0046772..af349a9 100644
--- a/src/components/HomeViewContent.css
+++ b/src/components/HomeViewContent.css
@@ -1,3 +1,4 @@
+/* - - - - GENERAL - - - -*/
 .HomeViewContent {
   position: relative;
   display: flex;
@@ -8,13 +9,23 @@
   overflow: hidden;
 }
 
+.HomeViewContent .media-ctr {
+  height: 100%;
+  width: 100%;
+}
+
 .HomeViewContent video {
-  /* position: absolute; */
   height: 100%;
   object-fit: cover;
   min-width: 100%;
 }
+.HomeViewContent img {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
 
+/* - - - - MEDIA QUERIES - - - -*/
 @media only screen and (min-width: 768px) {
   .HomeViewContent video {
     height: 110%;
diff --git a/src/components/HomeViewContent.tsx b/src/components/HomeViewContent.tsx
index ca1b55a..467a0b7 100644
--- a/src/components/HomeViewContent.tsx
+++ b/src/components/HomeViewContent.tsx
@@ -1,16 +1,68 @@
+import { useEffect, useState } from "react";
+import { animated, config, useTransition } from "react-spring";
 import "./HomeViewContent.css";
-import bannerVid from "../img/MainBanner-H264.mp4";
+import Deerfall from "./projects/Deerfall";
+import MediaMatchup from "./projects/MediaMatchup";
 
 interface Props {
   pathname: string;
+  isPortfolio: boolean;
+  currentProject: string;
 }
 
-const HomeViewContent = ({ pathname }: Props) => {
+const HomeViewContent = ({ pathname, isPortfolio, currentProject }: Props) => {
+  // - - - - States - - - -
+  // toggleQueue false = projQueue1, toggleQueue true = projQueue2
+  const [toggleQueue, setToggleQueue] = useState(false);
+  // - - - - Projects - - - -
+  const gameDevProjList = {
+    Deerfall: <Deerfall isPortfolio={isPortfolio} />,
+  };
+  const webDevProjList = {
+    MediaMatchup: <MediaMatchup isPortfolio={isPortfolio} />,
+  };
+  const [projQueue1, setProjQueue1] = useState<JSX.Element>(
+    <Deerfall isPortfolio={isPortfolio} />
+  );
+  const [projQueue2, setProjQueue2] = useState<JSX.Element>(
+    <Deerfall isPortfolio={isPortfolio} />
+  );
+  // - - - - Transitions - - - -
+  const transitions = useTransition(toggleQueue, {
+    from: { opacity: 0 },
+    enter: { opacity: 1 },
+    leave: { opacity: 0 },
+    config: { duration: 300 },
+    exitBeforeEnter: true,
+  });
+
+  const checkQueue = (project: JSX.Element) => {
+    if (toggleQueue === true) {
+      setProjQueue2(project);
+      setToggleQueue(!toggleQueue);
+    } else {
+      setProjQueue1(project);
+      setToggleQueue(!toggleQueue);
+    }
+  };
+
+  useEffect(() => {
+    if (currentProject === "Deerfall") {
+      checkQueue(gameDevProjList.Deerfall);
+    } else if (currentProject === "MediaMatchup") {
+      checkQueue(webDevProjList.MediaMatchup);
+    }
+  }, [currentProject]);
+
   return (
     <div className="HomeViewContent">
-      <video autoPlay loop muted playsInline>
-        <source src={bannerVid} type="video/mp4" />
-      </video>
+      {transitions((styles, item) =>
+        item ? (
+          <animated.div style={styles}>{projQueue1}</animated.div>
+        ) : (
+          <animated.div style={styles}>{projQueue2}</animated.div>
+        )
+      )}
     </div>
   );
 };
diff --git a/src/components/HomeViewFooter.css b/src/components/HomeViewFooter.css
index aa6c3a6..4c01b2b 100644
--- a/src/components/HomeViewFooter.css
+++ b/src/components/HomeViewFooter.css
@@ -10,14 +10,13 @@
 /* - - - GENERAL - - -*/
 .HomeViewFooter {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: rgb(255, 255, 255);
+  background-color: rgb(240, 240, 240);
   width: 100vw;
   height: 100px;
   font-size: 16px;
-  font-weight: 300;
 }
 
 .HomeViewFooter h2 {
@@ -40,12 +39,17 @@
 .HomeViewFooter .project-nav-type-cat {
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 
 .HomeViewFooter .project-nav-type-cat a {
   margin: 6px;
 }
 
+.HomeViewFooter .rights-ctr {
+  font-size: 10px;
+}
+
 /* - - - MEDIA QUERIES - - -*/
 
 @media only screen and (min-width: 768px) {
@@ -56,4 +60,8 @@
   .HomeViewFooter .project-nav-ctr {
     display: none;
   }
+
+  .HomeViewFooter .rights-ctr {
+    font-size: 14px;
+  }
 }
diff --git a/src/components/HomeViewFooter.tsx b/src/components/HomeViewFooter.tsx
index 8b8faf8..21427a0 100644
--- a/src/components/HomeViewFooter.tsx
+++ b/src/components/HomeViewFooter.tsx
@@ -1,24 +1,64 @@
+import { Link } from "react-router-dom";
+import { animated, SpringValue } from "react-spring";
 import "./HomeViewFooter.css";
 
 interface Props {
   pathname: string;
+  gamedevOrWebdev: boolean;
+  gameDevLink: string;
+  webDevLink: string;
+  currentProject: string;
+  hueRotation: {
+    filter: SpringValue<string>;
+  };
 }
 
-const HomeViewFooter = ({ pathname }: Props) => {
+const HomeViewFooter = ({
+  pathname,
+  gamedevOrWebdev,
+  hueRotation,
+  gameDevLink,
+  webDevLink,
+  currentProject,
+}: Props) => {
+  const currentYear = new Date();
+
   return (
     <div className="HomeViewFooter">
       <div className="project-nav-ctr">
         <div className="project-nav">
           <span className="material-symbols-outlined">chevron_left</span>
-          <h2>Deerfall</h2>
+          <h2>{currentProject}</h2>
           <span className="material-symbols-outlined">chevron_right</span>
         </div>
 
         <div className="project-nav-type-cat">
-          <a>Game Dev</a>
-          <a>Web Dev</a>
+          <Link
+            to={gameDevLink}
+            className={gamedevOrWebdev ? "highlighted-link" : ""}>
+            <animated.p style={gamedevOrWebdev ? hueRotation : {}}>
+              Game Dev
+            </animated.p>
+          </Link>
+          <Link
+            to={webDevLink}
+            className={gamedevOrWebdev ? "" : "highlighted-link"}>
+            <animated.p style={gamedevOrWebdev ? {} : hueRotation}>
+              Web Dev
+            </animated.p>
+          </Link>
         </div>
       </div>
+
+      <div className="rights-ctr">
+        <p>
+          <animated.span
+            className={"highlighted-link"}
+            style={
+              hueRotation
+            }>{`© ${currentYear.getFullYear()} All Rights Reserved`}</animated.span>{" "}
+        </p>
+      </div>
     </div>
   );
 };
diff --git a/src/components/HomeViewHeader.css b/src/components/HomeViewHeader.css
index ac4b77f..1661326 100644
--- a/src/components/HomeViewHeader.css
+++ b/src/components/HomeViewHeader.css
@@ -1,20 +1,12 @@
-/* - - - RESETS - - -*/
-.HomeViewHeader h1,
-.HomeViewHeader h2,
-.HomeViewHeader a,
-.HomeViewHeader p {
-  margin: 0px;
-  padding: 0px;
-}
-
 /* - - - GENERAL - - -*/
 .HomeViewHeader {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  background-color: rgb(255, 255, 255);
-  width: 100vw;
-  height: 80px;
+  background-color: rgb(240, 240, 240);
+  width: 100%;
+  height: 100px;
+  text-decoration: none;
 }
 
 .HomeViewHeader h1 {
@@ -25,7 +17,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  width: 120px;
+  width: 175px;
 }
 
 .HomeViewHeader .project-nav-ctr {
@@ -44,6 +36,7 @@
 .HomeViewHeader .project-nav-type-cat {
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 
 .HomeViewHeader .project-nav-type-cat a {
@@ -71,15 +64,12 @@
 /* - - - MEDIA QUERIES - - -*/
 @media only screen and (min-width: 768px) {
   .HomeViewHeader {
-    justify-content: space-between;
+    justify-content: space-around;
+    height: 100px;
   }
 
   .HomeViewHeader .title-ctr {
-    width: 230px;
-  }
-
-  .HomeViewHeader .nav-ctr {
-    width: 230px;
+    width: 200px;
   }
 
   .HomeViewHeader .project-nav-ctr {
@@ -88,4 +78,12 @@
     align-items: center;
     justify-content: center;
   }
+
+  .HomeViewHeader .nav-ctr {
+    width: 200px;
+  }
+
+  .HomeViewHeader .nav-ctr ul li {
+    margin: 0px 10px;
+  }
 }
diff --git a/src/components/HomeViewHeader.tsx b/src/components/HomeViewHeader.tsx
index 25cb2b7..46b2675 100644
--- a/src/components/HomeViewHeader.tsx
+++ b/src/components/HomeViewHeader.tsx
@@ -1,38 +1,98 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { animated, SpringValue } from "react-spring";
 import "./HomeViewHeader.css";
 
 interface Props {
-  pathname: string;
+  title: string;
+  subtitle: string;
+  subEmoji: string;
+  gameDevLink: string;
+  webDevLink: string;
+  portfolioLink: string;
+  blogLink: string;
+  isPortfolio: boolean;
+  gamedevOrWebdev: boolean;
+  currentProject: string;
+  hueRotation: {
+    filter: SpringValue<string>;
+  };
 }
 
-const HomeViewHeader = ({ pathname }: Props) => {
-  const [title, setTitle] = useState<string>("Dev Blog");
-  const [subtitle, setSubtitle] = useState<string>("Welcome! 😊");
-
+const HomeViewHeader = ({
+  title,
+  subtitle,
+  subEmoji,
+  gameDevLink,
+  webDevLink,
+  portfolioLink,
+  blogLink,
+  isPortfolio,
+  gamedevOrWebdev,
+  currentProject,
+  hueRotation,
+}: Props) => {
   // 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="title-ctr">
-        <h1>{`Jake's ${title}`}</h1>
-      </div>
+      <Link className="title-ctr" to={{ pathname: "/" }}>
+        <h1>
+          {`Jake's `}
+          <animated.span style={hueRotation} className="highlighted-link">
+            {title}
+          </animated.span>
+        </h1>
+        <p className="subtitle">
+          {subtitle}
+          <span className="emoji">{subEmoji}</span>
+        </p>
+      </Link>
 
       <div className="project-nav-ctr">
         <div className="project-nav">
           <span className="material-symbols-outlined">chevron_left</span>
-          <h2>Deerfall</h2>
+          <h2>{currentProject}</h2>
           <span className="material-symbols-outlined">chevron_right</span>
         </div>
 
         <div className="project-nav-type-cat">
-          <a>Game Dev</a>
-          <a>Web Dev</a>
+          <Link
+            to={gameDevLink}
+            className={gamedevOrWebdev ? "highlighted-link" : ""}>
+            <animated.p style={gamedevOrWebdev ? hueRotation : {}}>
+              Game Dev
+            </animated.p>
+          </Link>
+          <Link
+            to={webDevLink}
+            className={gamedevOrWebdev ? "" : "highlighted-link"}>
+            <animated.p style={gamedevOrWebdev ? {} : hueRotation}>
+              Web Dev
+            </animated.p>
+          </Link>
         </div>
       </div>
 
       <div className="nav-ctr">
         <ul>
-          <li>Portfolio</li>
-          <li>Blog</li>
+          <li>
+            <Link
+              className={isPortfolio ? "highlighted-link" : ""}
+              to={portfolioLink}>
+              <animated.p style={isPortfolio ? hueRotation : {}}>
+                Portfolio
+              </animated.p>
+            </Link>
+          </li>
+          <li>
+            <Link
+              className={isPortfolio ? "" : "highlighted-link"}
+              to={blogLink}>
+              <animated.p style={isPortfolio ? {} : hueRotation}>
+                Blog
+              </animated.p>
+            </Link>
+          </li>
         </ul>
       </div>
     </div>
diff --git a/src/components/LandingPage.css b/src/components/LandingPage.css
index aaac2e3..514a51b 100644
--- a/src/components/LandingPage.css
+++ b/src/components/LandingPage.css
@@ -1,8 +1,3 @@
-/* - - - - - lINKS AND FONTS - - - - - - - - */
-@font-face {
-  font-family: "munro";
-  src: url("/src/img/munro/munro.ttf");
-}
 /* - - - - - - - RESETS - - - - - - - - - - */
 
 /* - - - - - - - SPECIFICS - - - - - - - - - - */
diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx
index 187202f..0afbc60 100644
--- a/src/components/LandingPage.tsx
+++ b/src/components/LandingPage.tsx
@@ -2,13 +2,20 @@ import { useContext, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import "./LandingPage.css";
 import LandingPageLink from "./LandingPageLink";
-import { animated, useSpring, useTransition } from "react-spring";
+import { animated, SpringValue, useSpring, useTransition } from "react-spring";
 import HomeView from "./HomeView";
 import AuthContext from "../contexts/AuthContext";
 import pixelBG from "../img/pixelBG_LowRes.png";
 import pixelFadeBG from "../img/animated-14fps.png";
 
-const LandingPage = () => {
+interface Props {
+  hueRotation: {
+    filter: SpringValue<string>;
+  };
+  setHueDuration: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const LandingPage = ({ hueRotation, setHueDuration }: Props) => {
   // - - - - - LINK FUNCTIONALITY - - - - -
   const [currentDisplay, setCurrentDisplay] = useState<string>("");
   const [firstRender, setFirstRender] = useState<boolean>(true);
@@ -25,8 +32,6 @@ const LandingPage = () => {
   const [hideHV, setHideHV] = useState<string>("hide");
   const [isActivePage, setIsActivePage] = useState<boolean>(true);
   const [currBG, setCurrBG] = useState<string>(pixelBG);
-  const [hueFlip, setHueFlip] = useState<boolean>(false);
-  const [bgAnimOff, setBgAnimOff] = useState<boolean>(false);
 
   // - - - - - BG TRANSITION - - - - -
   const transDuration = 500;
@@ -44,27 +49,15 @@ const LandingPage = () => {
       config: { duration: transDuration },
     },
   });
-  const bgHueRotation = useSpring({
-    to: {
-      filter: "hue-rotate(130deg) saturate(80%) sepia(30%)",
-    },
-    from: {
-      filter: "hue-rotate(0deg) saturate(100%) sepia(0%)",
-    },
-    reset: false,
-    cancel: bgAnimOff,
-    reverse: hueFlip,
-    delay: 2000,
-    config: { duration: 4000, tension: 280, friction: 60 },
-    onRest: () => setHueFlip(!hueFlip),
-  });
 
   // - - - - - useEffects - - - - -
+
   useEffect(() => {
     setCurrentPathContext(currentPath);
     if (firstRender) {
       setFirstRender(false);
     } else if (
+      // If current path is 'complete', transition to HomeView
       currentPath.endsWith("/portfolio") ||
       currentPath.endsWith("/blog")
     ) {
@@ -72,19 +65,23 @@ const LandingPage = () => {
       setIsActivePage(false);
       setHideHV("");
       setTimeout(() => setHideLP("hide"), 2000);
-      setTimeout(() => setBgAnimOff(true), 2000);
+      setHueDuration(12000);
     }
-  }, [currentPath]);
 
-  useEffect(() => {
     if (currentPath === "/") {
       navigate("/landing");
+      setCurrBG(pixelBG);
+      setIsActivePage(true);
+      setHideHV("hide");
+      setHideLP("");
+      setHueDuration(4000);
     } else if (currentPath === "/landing") {
       setCurrentDisplay("jakesnyder.dev");
       setLink1Text("Web Dev");
       setLink1Path("/landing/webdev");
       setLink2Text("Game Dev");
       setLink2Path("/landing/gamedev");
+      setHueDuration(4000);
     } else if (currentPath === "/landing/webdev") {
       setCurrentDisplay("Web Development");
       setLink1Text("Portfolio");
@@ -142,7 +139,7 @@ const LandingPage = () => {
         )}
         <div className="bg-img-container">
           <animated.img
-            style={bgHueRotation}
+            style={hueRotation}
             className={`bg-img`}
             src={currBG}
             alt=""
@@ -150,7 +147,7 @@ const LandingPage = () => {
         </div>
       </div>
       <div className={`HomeView-container ${hideHV}`}>
-        <HomeView />
+        <HomeView hueRotation={hueRotation} setHueDuration={setHueDuration} />
       </div>
     </div>
   );
diff --git a/src/components/projects/Deerfall.tsx b/src/components/projects/Deerfall.tsx
new file mode 100644
index 0000000..de7dc19
--- /dev/null
+++ b/src/components/projects/Deerfall.tsx
@@ -0,0 +1,48 @@
+import ProjectContents from "./ProjectContents";
+import DeerfallVid from "../../img/MainBanner-H264.mp4";
+import { useEffect, useState } from "react";
+import { animated, config, useTransition } 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",
+    "C++",
+    "Blueprints",
+    "Blender",
+  ];
+  const skills: string[] = [
+    "Level Design",
+    "3D Modeling",
+    "Textures and Materials",
+    "Automatic Landscape Materials",
+    "Locomotion",
+    "Inventory Systems",
+  ];
+
+  return (
+    <animated.div className="Deerfall">
+      <ProjectContents
+        vidSrc={DeerfallVid}
+        isPortfolio={isPortfolio}
+        tech={technologies}
+        skills={skills}
+      />
+    </animated.div>
+  );
+};
+
+export default Deerfall;
diff --git a/src/components/projects/MediaMatchup.tsx b/src/components/projects/MediaMatchup.tsx
new file mode 100644
index 0000000..284954f
--- /dev/null
+++ b/src/components/projects/MediaMatchup.tsx
@@ -0,0 +1,49 @@
+import ProjectImage from "./ProjectImage";
+import mediaMatchupMain from "../../img/Projects/MediaMatchup/MediaMatchupMain.png";
+import { animated, config, useTransition } from "react-spring";
+import { useEffect, useState } from "react";
+
+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",
+    "Mongo DB",
+    "Express JS",
+    "React JS",
+    "Node JS",
+    "REST API",
+    "Firebase",
+  ];
+  const skills: string[] = [
+    "Web Development",
+    "Web Design",
+    "Software Engineering",
+    "Hosting",
+  ];
+
+  return (
+    <animated.div className="MediaMatchup">
+      <ProjectImage
+        imgSrc={mediaMatchupMain}
+        isPortfolio={isPortfolio}
+        imgAltTxt={"MediaMatchup Demo"}
+        tech={technologies}
+        skills={skills}
+      />
+    </animated.div>
+  );
+};
+
+export default MediaMatchup;
diff --git a/src/components/projects/ProjectBlogDesc.css b/src/components/projects/ProjectBlogDesc.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/projects/ProjectBlogDesc.tsx b/src/components/projects/ProjectBlogDesc.tsx
new file mode 100644
index 0000000..85e03d8
--- /dev/null
+++ b/src/components/projects/ProjectBlogDesc.tsx
@@ -0,0 +1,7 @@
+import "./ProjectBlogDesc.css";
+
+const ProjectBlogDesc = () => {
+  return <div className="ProjectBlogDesc">ProjectBlogDesc works</div>;
+};
+
+export default ProjectBlogDesc;
diff --git a/src/components/projects/ProjectContents.css b/src/components/projects/ProjectContents.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/projects/ProjectContents.tsx b/src/components/projects/ProjectContents.tsx
new file mode 100644
index 0000000..2f1e086
--- /dev/null
+++ b/src/components/projects/ProjectContents.tsx
@@ -0,0 +1,27 @@
+import ProjectBlogDesc from "./ProjectBlogDesc";
+import ProjectPortfolioDesc from "./ProjectPortfolioDesc";
+import "./ProjectContents.css";
+
+interface Props {
+  vidSrc: string;
+  isPortfolio: boolean;
+  tech: string[];
+  skills: string[];
+}
+
+const ProjectVideo = ({ vidSrc, isPortfolio, tech, skills }: Props) => {
+  return (
+    <div className="ProjectVideo">
+      <div className="video-ctr">
+        <video autoPlay loop muted playsInline>
+          <source src={vidSrc} type="video/mp4" />
+        </video>
+      </div>
+      <div className="desc-ctr">
+        {isPortfolio ? <ProjectPortfolioDesc /> : <ProjectBlogDesc />}
+      </div>
+    </div>
+  );
+};
+
+export default ProjectVideo;
diff --git a/src/components/projects/ProjectImage.css b/src/components/projects/ProjectImage.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/projects/ProjectImage.tsx b/src/components/projects/ProjectImage.tsx
new file mode 100644
index 0000000..2d26f68
--- /dev/null
+++ b/src/components/projects/ProjectImage.tsx
@@ -0,0 +1,32 @@
+import ProjectBlogDesc from "./ProjectBlogDesc";
+import "./ProjectImage.css";
+import ProjectPortfolioDesc from "./ProjectPortfolioDesc";
+
+interface Props {
+  imgSrc: string;
+  isPortfolio: boolean;
+  imgAltTxt: string;
+  tech: string[];
+  skills: string[];
+}
+
+const ProjectImage = ({
+  imgSrc,
+  isPortfolio,
+  imgAltTxt,
+  tech,
+  skills,
+}: Props) => {
+  return (
+    <div className="ProjectImage">
+      <div className="img-ctr">
+        <img src={imgSrc} alt={imgAltTxt} />
+      </div>
+      <div className="desc-ctr">
+        {isPortfolio ? <ProjectPortfolioDesc /> : <ProjectBlogDesc />}
+      </div>
+    </div>
+  );
+};
+
+export default ProjectImage;
diff --git a/src/components/projects/ProjectPortfolioDesc.css b/src/components/projects/ProjectPortfolioDesc.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/projects/ProjectPortfolioDesc.tsx b/src/components/projects/ProjectPortfolioDesc.tsx
new file mode 100644
index 0000000..3627863
--- /dev/null
+++ b/src/components/projects/ProjectPortfolioDesc.tsx
@@ -0,0 +1,13 @@
+import "./ProjectPortfolioDesc.css";
+
+const ProjectPortfolioDesc = () => {
+  return (
+    <div
+      className="ProjectPortfolioDesc
+  ">
+      ProjectPortfolioDesc works
+    </div>
+  );
+};
+
+export default ProjectPortfolioDesc;
diff --git a/src/components/projects/TechItem.css b/src/components/projects/TechItem.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/projects/TechItem.tsx b/src/components/projects/TechItem.tsx
new file mode 100644
index 0000000..7b06275
--- /dev/null
+++ b/src/components/projects/TechItem.tsx
@@ -0,0 +1,7 @@
+import "./TechItem.css";
+
+const TechItem = () => {
+  return <li className="TechItem">Tech Item Works</li>;
+};
+
+export default TechItem;
diff --git a/src/img/NotoEmoji-Regular.ttf b/src/img/NotoEmoji-Regular.ttf
new file mode 100644
index 0000000..fc2cb2c
Binary files /dev/null and b/src/img/NotoEmoji-Regular.ttf differ
diff --git a/src/img/Projects/MediaMatchup/MediaMatchupMain.png b/src/img/Projects/MediaMatchup/MediaMatchupMain.png
new file mode 100644
index 0000000..d8e1cce
Binary files /dev/null and b/src/img/Projects/MediaMatchup/MediaMatchupMain.png differ