Feature/page transitions

package.json

@@ -16,7 +16,7 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
-    "react-spring": "^9.4.5-beta.1",
+    "react-spring": "^9.4.5",
     "typescript": "^4.6.3",
     "web-vitals": "^2.1.4"
   },

public/index.html

@@ -13,9 +13,13 @@
     <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=VT323&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;1,300;1,400&family=Kdam+Thmor+Pro&display=swap"
       rel="stylesheet"
     />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.css

@@ -1,3 +1,9 @@
 .App {
+  height: 100%;
+  width: 100%;
   text-align: center;
 }
+
+.material-symbols-outlined {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+}

src/App.tsx

@@ -1,5 +1,10 @@
 import "./App.css";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  useLocation,
+} from "react-router-dom";
 import LandingPage from "./components/LandingPage";
 import HomeView from "./components/HomeView";
 
@@ -11,9 +16,9 @@ function App() {
           <Route path="/" element={<LandingPage />} />
           <Route path="/landing" element={<LandingPage />} />
           <Route path="/landing/:location" element={<LandingPage />} />
-          <Route path="/landing/:location/:content" element={<LandingPage />} />
-          <Route path="/home" element={<LandingPage />} />
-          <Route path="/home/:location/:content" element={<LandingPage />} />
+          <Route path="/landing/:category/:content" element={<LandingPage />} />
+          <Route path="/home" element={<HomeView />} />
+          <Route path="/home/:category/:content" element={<HomeView />} />
         </Routes>
       </Router>
     </div>

src/components/HomeView.css

@@ -4,8 +4,40 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100vh;
+  height: 100%;
   width: 100vw;
-  border: dashed black 10px;
   box-sizing: border-box;
+  /* FONTS */
+  font-family: "Fira Sans", sans-serif;
+  font-weight: 300;
+  font-style: italic;
+  font-size: 18px;
+  letter-spacing: 1px;
+  color: rgb(75, 75, 75);
+  font-smooth: never;
+}
+
+.HomeView h1 {
+  font-weight: 300;
+  font-size: 24px;
+}
+
+.HomeView h2 {
+  font-weight: 400;
+  font-size: 22px;
+}
+
+/* - - - - - HomeView Background Image - - - - -  */
+
+/* - - - MEDIA QUERIES - - -*/
+@media only screen and (min-width: 768px) {
+  .HomeView {
+    font-weight: 400;
+    font-size: 1.5vh;
+  }
+
+  .HomeView h1 {
+    font-weight: 300;
+    font-size: 2.5vh;
+  }
 }

src/components/HomeView.tsx

@@ -1,7 +1,21 @@
 import "./HomeView.css";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+import HomeViewHeader from "./HomeViewHeader";
+import HomeViewFooter from "./HomeViewFooter";
+import HomeViewContent from "./HomeViewContent";
 
 const HomeView = () => {
-  return <div className="HomeView">HomeView works</div>;
+  const currentPath = useLocation().pathname;
+  const navigate = useNavigate();
+
+  return (
+    <div className="HomeView">
+      <HomeViewHeader pathname={currentPath} />
+      <HomeViewContent pathname={currentPath} />
+      <HomeViewFooter pathname={currentPath} />
+    </div>
+  );
 };
 
 export default HomeView;

src/components/HomeViewContent.css

@@ -0,0 +1,22 @@
+.HomeViewContent {
+  position: relative;
+  display: flex;
+  width: 100vw;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+.HomeViewContent video {
+  /* position: absolute; */
+  height: 100%;
+  object-fit: cover;
+  min-width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+  .HomeViewContent video {
+    height: 110%;
+  }
+}

src/components/HomeViewContent.tsx

@@ -0,0 +1,18 @@
+import "./HomeViewContent.css";
+import bannerVid from "../img/MainBanner-H264.mp4";
+
+interface Props {
+  pathname: string;
+}
+
+const HomeViewContent = ({ pathname }: Props) => {
+  return (
+    <div className="HomeViewContent">
+      <video autoPlay loop muted playsInline>
+        <source src={bannerVid} type="video/mp4" />
+      </video>
+    </div>
+  );
+};
+
+export default HomeViewContent;

src/components/HomeViewFooter.css

@@ -0,0 +1,59 @@
+/* - - - RESETS - - -*/
+.HomeViewFooter h1,
+.HomeViewFooter h2,
+.HomeViewFooter a,
+.HomeViewFooter p {
+  margin: 0px;
+  padding: 0px;
+}
+
+/* - - - GENERAL - - -*/
+.HomeViewFooter {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(255, 255, 255);
+  width: 100vw;
+  height: 100px;
+  font-size: 16px;
+  font-weight: 300;
+}
+
+.HomeViewFooter h2 {
+  font-weight: 400;
+}
+
+.HomeViewFooter .project-nav-ctr {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.HomeViewFooter .project-nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.HomeViewFooter .project-nav-type-cat {
+  display: flex;
+  justify-content: center;
+}
+
+.HomeViewFooter .project-nav-type-cat a {
+  margin: 6px;
+}
+
+/* - - - MEDIA QUERIES - - -*/
+
+@media only screen and (min-width: 768px) {
+  .HomeViewFooter {
+    height: 80px;
+  }
+
+  .HomeViewFooter .project-nav-ctr {
+    display: none;
+  }
+}

src/components/HomeViewFooter.tsx

@@ -0,0 +1,26 @@
+import "./HomeViewFooter.css";
+
+interface Props {
+  pathname: string;
+}
+
+const HomeViewFooter = ({ pathname }: Props) => {
+  return (
+    <div className="HomeViewFooter">
+      <div className="project-nav-ctr">
+        <div className="project-nav">
+          <span className="material-symbols-outlined">chevron_left</span>
+          <h2>Deerfall</h2>
+          <span className="material-symbols-outlined">chevron_right</span>
+        </div>
+
+        <div className="project-nav-type-cat">
+          <a>Game Dev</a>
+          <a>Web Dev</a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomeViewFooter;

src/components/HomeViewHeader.css

@@ -0,0 +1,91 @@
+/* - - - 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;
+}
+
+.HomeViewHeader h1 {
+  margin: 2px 0px;
+}
+
+.HomeViewHeader .title-ctr {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 120px;
+}
+
+.HomeViewHeader .project-nav-ctr {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.HomeViewHeader .project-nav {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.HomeViewHeader .project-nav-type-cat {
+  display: flex;
+  justify-content: center;
+}
+
+.HomeViewHeader .project-nav-type-cat a {
+  margin: 6px 6px 0px 6px;
+}
+
+.HomeViewHeader .nav-ctr {
+  display: flex;
+  justify-content: center;
+  width: 120px;
+}
+
+.HomeViewHeader .nav-ctr ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+  padding: 0px;
+}
+
+.HomeViewHeader .nav-ctr ul li {
+  margin: 0px 10px;
+}
+
+/* - - - MEDIA QUERIES - - -*/
+@media only screen and (min-width: 768px) {
+  .HomeViewHeader {
+    justify-content: space-between;
+  }
+
+  .HomeViewHeader .title-ctr {
+    width: 230px;
+  }
+
+  .HomeViewHeader .nav-ctr {
+    width: 230px;
+  }
+
+  .HomeViewHeader .project-nav-ctr {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}

src/components/HomeViewHeader.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import "./HomeViewHeader.css";
+
+interface Props {
+  pathname: string;
+}
+
+const HomeViewHeader = ({ pathname }: Props) => {
+  const [title, setTitle] = useState<string>("Dev Blog");
+  const [subtitle, setSubtitle] = useState<string>("Welcome! 😊");
+
+  // 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>
+
+      <div className="project-nav-ctr">
+        <div className="project-nav">
+          <span className="material-symbols-outlined">chevron_left</span>
+          <h2>Deerfall</h2>
+          <span className="material-symbols-outlined">chevron_right</span>
+        </div>
+
+        <div className="project-nav-type-cat">
+          <a>Game Dev</a>
+          <a>Web Dev</a>
+        </div>
+      </div>
+
+      <div className="nav-ctr">
+        <ul>
+          <li>Portfolio</li>
+          <li>Blog</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default HomeViewHeader;