added navigation functionality as well as project transitions

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

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;
+}

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>
   );
 }

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,36 +18,79 @@
   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 {
   font-weight: 400;
   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;
   }
 }

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>
   );
 };