Merge pull request #21 from JS-GitRepo/feature/desktopView

all new features adapted for desktop view
JS-GitRepo · Oct 31, 2022 · b30c081 · b30c081
2 parents f490988 + f6fd396
commit b30c081
Show file tree

Hide file tree

Showing 15 changed files with 288 additions and 53 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -3,20 +3,20 @@ logo192.png,1658782384754,94a05bb86f2fa54e8d3f48900f954b5e79c3ea27468b473afd1510
 logo512.png,1658782384754,7b92476b36f05aa53bd69500645fb5fe8866d7f0e3ef517c7b6529251418faff
 manifest.json,1658782384755,00ed38bd68df8fe063a1fda8efbea33c1e6e5118444b200531d8996998372fa5
 robots.txt,1650942577330,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
-asset-manifest.json,1666228677731,8587ff0e282d38665e3d4083dfcbd08e0643cf51909f796c5c9d14c1c64886f1
-index.html,1666228677719,cbd50d72dddceff54e2292487378050926f41f29cef41a7f86265c9e3d6a1b67
-static/css/main.bf399fb6.css,1666228677731,3021a3f58f6e8bcfb460f5f54ba0397e177a665940b1f4654c9be580d29fe755
-static/js/787.cda612ba.chunk.js,1666228677730,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
-static/css/main.bf399fb6.css.map,1666228677730,f5c6f41cc441d782aa66d992a188e7da8164a1e1dfb53f25373217c03620bc1f
-static/js/main.21bc060d.js.LICENSE.txt,1666228677730,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c
-static/js/787.cda612ba.chunk.js.map,1666228677731,db251c987184ae9b3dc222f3dc2c99654213dfb7d350df7db2aa272b583ed9a9
-static/media/munro.f78662ff4aad4d038806.ttf,1666228677729,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
-static/media/animated-14fps.0a0c585671594fb5b8d7.png,1666228677729,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
-static/media/ST4vsArt.64e6ec0dc2fce1023124.jpg,1666228677729,55d40e1482a37fb9b93d70efa539a829d3a48171c481550a096b46c57514f46f
-static/media/Headshot-PurpleFlannel.2b06661cd39ac41784bd.png,1666228677728,bf2d5ce61d627da14c23b29a12c90013d1773a8bed9f83e0be9d7a8cefae95b7
-static/media/DeerfallBannerPoster.5318e7922524aab5a4b1.jpg,1666228677729,5241662b3103ea00e937b1de64dc74e70267c5ad16d6e87de938f1acaf659f34
-static/js/main.21bc060d.js,1666228677729,95c8a21bdc62c35b0422ff8e086363c212e9c45e4145040fae1f1cbfdd17d9d5
-static/media/DeerfallBanner_H265.26575320e1418ba9b542.mp4,1666228677730,a0f474b066407039c297e98db245737e4a232ec9996ed7f0de16961b94b84d3a
-static/media/DeerfallBanner_AV1.d420aebda0fdbb533e69.mp4,1666228677731,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
-static/media/DeerfallBanner_H264.d3d2d7793a0a0e61516b.mp4,1666228677731,5d9c3d555cf4b2d0775c18d015a709e07b1d2c3f8fa42612de1e184584354091
-static/js/main.21bc060d.js.map,1666228677731,12edd3d4f07d0f145b52d5c2d6adc0348e0be01f3e544d785a2294872d08ae90
+asset-manifest.json,1667168598450,91f7aac3fbdef57736484c82663f818f2df6fc43cfd1d43d8df1ca96a87e0a0c
+index.html,1667168598436,e1097bb3cb938269c835851ac26bf7cf74dc5242fbbb59c29173d1c2e2350468
+static/js/787.cda612ba.chunk.js,1667168598447,bfd132cf30c4fc458aab63f8fb2d23785590a026a1cca2b97e5b7762f6d57df7
+static/js/main.5b659a05.js.LICENSE.txt,1667168598448,95cfff0d80fe8c950e4635524b106edf7b8ed9c6a91c0498cb6f2440f661f48c
+static/css/main.ff8022d0.css,1667168598448,10db115528d5c9ea977371a2bd31920d1ba764920dac48f72357f4e651ffc3ec
+static/css/main.ff8022d0.css.map,1667168598448,5272036390d6e7877bff03a82d348ca6cd0d2d850d9b9c85deaacf21cc54002e
+static/js/787.cda612ba.chunk.js.map,1667168598450,db251c987184ae9b3dc222f3dc2c99654213dfb7d350df7db2aa272b583ed9a9
+static/media/munro.f78662ff4aad4d038806.ttf,1667168598447,20391d127ab073c6108d379243b6af3bf56456829f3102be643063141524ea38
+static/media/animated-14fps.0a0c585671594fb5b8d7.png,1667168598447,01b9d75a2e4091fe5814de2e31d0e13c3c41c94f3141bc554ce2930b7cffe1f8
+static/media/ST4vsArt.64e6ec0dc2fce1023124.jpg,1667168598447,55d40e1482a37fb9b93d70efa539a829d3a48171c481550a096b46c57514f46f
+static/media/Headshot-PurpleFlannel.2b06661cd39ac41784bd.png,1667168598447,bf2d5ce61d627da14c23b29a12c90013d1773a8bed9f83e0be9d7a8cefae95b7
+static/media/DeerfallBannerPoster.5318e7922524aab5a4b1.jpg,1667168598447,5241662b3103ea00e937b1de64dc74e70267c5ad16d6e87de938f1acaf659f34
+static/js/main.5b659a05.js,1667168598447,bb87149c94c8b72c9d3c2eebfb1b949cdc4585bf3733ca0bfee2ba3e2480111a
+static/media/DeerfallBanner_H265.26575320e1418ba9b542.mp4,1667168598448,a0f474b066407039c297e98db245737e4a232ec9996ed7f0de16961b94b84d3a
+static/media/DeerfallBanner_AV1.d420aebda0fdbb533e69.mp4,1667168598449,dc1f6c0e3c7adfe3b0b2c184a62775168ba847fa060460aa1a99535186060d3d
+static/media/DeerfallBanner_H264.d3d2d7793a0a0e61516b.mp4,1667168598450,5d9c3d555cf4b2d0775c18d015a709e07b1d2c3f8fa42612de1e184584354091
+static/js/main.5b659a05.js.map,1667168598450,da09ca863e83fea58443d79df500bb1167d48f6ffa9c0f15251ec5c136344b86
diff --git a/src/components/ErrorNotFound.tsx b/src/components/ErrorNotFound.tsx
@@ -1,10 +1,34 @@
+import { useContext, useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { animated } from "react-spring";
+import AppContext from "../contexts/AppContext";
 import "./styles/ErrorNotFound.css";
 
 const ErrorNotFound = () => {
+  const navigate = useNavigate();
+  const { hueRotation } = useContext(AppContext);
+
   return (
     <div className='ErrorNotFound'>
-      <p>404</p>
-      <p>NotFound</p>
+      <div className='content-ctr'>
+        <h1>404 Not Found</h1>
+        <p>
+          Sorry, but that resource wasn't found.
+          <span className='emoji'>🙁</span>
+        </p>
+        <p>
+          There will soon be a contact form here to provide details of what
+          might've led you here. There are also some projects that have a
+          linking structure which is currently WIP.
+        </p>
+        <p></p>
+      </div>
+      <animated.button style={hueRotation} onClick={() => navigate(-1)}>
+        Go Back
+      </animated.button>
+      <animated.button style={hueRotation} onClick={() => navigate("/landing")}>
+        Go To Landing
+      </animated.button>
     </div>
   );
 };

diff --git a/src/components/HVContent.tsx b/src/components/HVContent.tsx
@@ -1,4 +1,4 @@
-import { SetStateAction, useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { animated, useTransition } from "react-spring";
 import "./styles/HVContent.css";
 import Deerfall from "./projects/Deerfall";
@@ -86,7 +86,6 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
     ref.current?.scrollIntoView({
       behavior: "smooth",
     });
-    console.log("scrollToElement Triggered");
   };
 
   // = = = = = USE EFFECTS = = = = =

diff --git a/src/components/HVSideNav.tsx b/src/components/HVSideNav.tsx
@@ -4,9 +4,10 @@ import techIcon from "../img/navIcons/tech.png";
 import aboutIcon from "../img/navIcons/about.png";
 import blogIcon from "../img/navIcons/blog.png";
 import { animated, useSpring } from "react-spring";
-import { useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
 import { HueRotation } from "../models/Models";
 import { useLocation, useNavigate } from "react-router-dom";
+import AppContext from "../contexts/AppContext";
 
 interface Props {
   hueRotation: HueRotation;
@@ -27,9 +28,10 @@ const HVSideNav = ({
 }: Props) => {
   const navigate = useNavigate();
   const location = useLocation();
+  const { isMobile } = useContext(AppContext);
   const navSizeChange = useSpring({
-    from: { height: "150px" },
-    to: { height: "110px" },
+    from: { height: isMobile ? "150px" : "200px" },
+    to: { height: isMobile ? "110px" : "135px" },
     config: { mass: 1, tension: 200, friction: 15 },
     reverse: isPortfolio,
   });
@@ -42,7 +44,7 @@ const HVSideNav = ({
 
   useEffect(() => {
     navigateToSection("media");
-  }, [allParams[1]]);
+  }, [allParams[1], allParams[2]]);
 
   return (
     <animated.nav className='HVSideNav' style={navSizeChange}>

diff --git a/src/components/projects/Deerfall.tsx b/src/components/projects/Deerfall.tsx
@@ -1,4 +1,3 @@
-import ProjVideo from "./subComponents/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";
@@ -13,19 +12,23 @@ const Deerfall = ({ isPortfolio }: Props) => {
   // - - - - Tech and Skills - - - -
   const technologies: string[] = [
     "Unreal Engine",
+    "UE Blueprints",
     "C++",
-    "Blueprints",
     "Blender",
   ];
   const skills: string[] = [
     "Level Design",
     "3D Modeling",
     "Textures and Materials",
     "Automatic Landscape Materials",
-    "Locomotion",
+    "Inverse Kinematics and Locomotion",
     "Inventory Systems",
   ];
-  const desc: string = "";
+  const about: string =
+    "A game that began with the idea of 'Rimworld meets Daggerfall'; a simulation game focused on story generation rather than experiencing a crafted story.";
+  const links = { github: "n/a", demo: "n/a" };
+  const techDesc: string =
+    "Built with Unreal Engine 5 from scratch. Most time up to this point spent learning materials somewhat deeply, and reversing IK / locomotion within the 'Advanced Locomotion v4' UE Plugin.";
 
   return (
     <>
@@ -35,12 +38,14 @@ const Deerfall = ({ isPortfolio }: Props) => {
         mediaSrc_Fallback2={DeerfallVidH264}
         mediaAltTxt={"deerfall videogame project"}
         vidPoster={DeerfallPosterJPG}
+        isVideo={true}
         isPortfolio={isPortfolio}
-        tech={[]}
-        skills={[]}
+        tech={technologies}
+        skills={skills}
         title={"deerfall"}
-        desc={desc}
-        isVideo={true}
+        about={about}
+        techDesc={techDesc}
+        projLinks={links}
       />
     </>
   );

diff --git a/src/components/projects/MediaMatchup.tsx b/src/components/projects/MediaMatchup.tsx
@@ -25,22 +25,31 @@ const MediaMatchup = ({ isPortfolio }: Props) => {
     "Software Engineering",
     "Hosting",
   ];
-  const desc: string = "A multi-media comparison app with a social twist. ";
+  const about: string =
+    "An 'apples to oranges' comparison app where various forms of media battle for your vote. These comparisons pit different categories of media against one another such as film, musical albums, video games, artwork, and television.";
+  const links = {
+    github: "https://github.com/JS-GitRepo/MediaMatchup_frontend",
+    demo: "https://mediamatchup.app",
+  };
+  const techDesc: string =
+    "MediaMatchup leverages 5 REST API's, 4 external and 1 internal, to generate a 'Matchup' on demand. Users are authenticated via Firebase Google Auth and have their Matchup choices saved to MongoDB Atlas Cloud. Users can add friends and view their feeds via MongoDB aggregation.";
 
   return (
     <>
       <Project
         mediaSrc={matchupImg}
         mediaSrc_Fallback={matchupImg}
         mediaSrc_Fallback2={undefined}
-        mediaAltTxt={"media matchup web application"}
+        mediaAltTxt={"media matchup react application"}
         vidPoster={undefined}
+        isVideo={false}
         isPortfolio={isPortfolio}
         tech={technologies}
         skills={skills}
         title={"mediamatchup"}
-        desc={desc}
-        isVideo={false}
+        about={about}
+        techDesc={techDesc}
+        projLinks={links}
       />
     </>
   );

diff --git a/src/components/projects/subComponents/ProjDescBlog.tsx b/src/components/projects/subComponents/ProjDescBlog.tsx
@@ -2,12 +2,12 @@ import { animated } from "react-spring";
 
 interface Props {
   title: string;
-  desc: string;
+  about: string;
   transStyle: any;
   blog_ScrollRef: React.MutableRefObject<null>;
 }
 
-const ProjDescBlog = ({ title, desc, transStyle, blog_ScrollRef }: Props) => {
+const ProjDescBlog = ({ title, about, transStyle, blog_ScrollRef }: Props) => {
   return (
     <animated.div
       ref={blog_ScrollRef}

diff --git a/src/components/projects/subComponents/ProjDescPortfolio.tsx b/src/components/projects/subComponents/ProjDescPortfolio.tsx
@@ -1,30 +1,74 @@
+import { useContext } from "react";
 import { animated } from "react-spring";
+import AppContext from "../../../contexts/AppContext";
+import { ProjectLinks } from "../../../models/Models";
 
 interface Props {
   title: string;
-  desc: string;
+  about: string;
+  tech: string[];
+  skills: string[];
+  techDesc: string;
+  projLinks: ProjectLinks;
   transStyle: any;
   tech_ScrollRef: React.MutableRefObject<null>;
   about_ScrollRef: React.MutableRefObject<null>;
 }
 
 const ProjDescPortfolio = ({
   title,
-  desc,
+  about,
+  tech,
+  skills,
+  techDesc,
   transStyle,
   tech_ScrollRef,
   about_ScrollRef,
+  projLinks,
 }: Props) => {
+  const { hueRotation } = useContext(AppContext);
+
   return (
     <animated.div
       style={transStyle}
       className='ProjDescPortfolio full-w-h
   '>
       <section ref={tech_ScrollRef} className='content-section tech-skills-ctr'>
-        <p>Tech and Skills</p>
+        <div className='content-ctr'>
+          <h1>Technologies Leveraged</h1>
+          {tech.map((tech, i) => (
+            <p className='tech-p' key={`technology #${i}`}>
+              {tech.toUpperCase()}
+            </p>
+          ))}
+          <h1>Skills Developed</h1>
+          {skills.map((skill, i) => (
+            <p className='skill-p' key={`skill #${i}`}>
+              {skill}
+            </p>
+          ))}
+        </div>
       </section>
       <section ref={about_ScrollRef} className='content-section about-ctr'>
-        <p>About Project</p>
+        <div className='content-ctr'>
+          <h1>About Project</h1>
+          <p>{about}</p>
+          <h1>Technical Description</h1>
+          <p>{techDesc}</p>
+          <h1>Links</h1>
+          <animated.a
+            className='proj-link'
+            style={hueRotation}
+            href={projLinks.github}>
+            Github
+          </animated.a>
+          <animated.a
+            className='proj-link'
+            style={hueRotation}
+            href={projLinks.demo}>
+            Demo
+          </animated.a>
+        </div>
       </section>
     </animated.div>
   );