From f6fd39654b10f4b7bcf0056c657147f638fb3cd9 Mon Sep 17 00:00:00 2001
From: Jake Snyder <jak3legacy@gmail.com>
Date: Sun, 30 Oct 2022 22:54:22 -0400
Subject: [PATCH] all new features adapted for desktop view

---
 .firebase/hosting.YnVpbGQ.cache               | 34 ++++----
 src/components/ErrorNotFound.tsx              | 28 ++++++-
 src/components/HVContent.tsx                  |  3 +-
 src/components/HVSideNav.tsx                  | 10 ++-
 src/components/projects/Deerfall.tsx          | 21 +++--
 src/components/projects/MediaMatchup.tsx      | 17 +++-
 .../projects/subComponents/ProjDescBlog.tsx   |  4 +-
 .../subComponents/ProjDescPortfolio.tsx       | 52 +++++++++++-
 .../projects/subComponents/Project.css        | 83 ++++++++++++++++++-
 .../projects/subComponents/Project.tsx        | 21 +++--
 src/components/styles/ErrorNotFound.css       | 49 +++++++++++
 src/components/styles/HVHeader.css            |  3 +-
 src/components/styles/HVSideNav.css           | 10 +++
 src/components/styles/Introduction.css        |  1 +
 src/models/Models.ts                          |  5 ++
 15 files changed, 288 insertions(+), 53 deletions(-)

diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
index 1a2bde9..6a5a5e2 100644
--- 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
index 1ccabbf..07ccdb0 100644
--- 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
index e0a8eb6..ff451e0 100644
--- 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
index 7af5825..386c375 100644
--- 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
index 3d3db7a..51b20d6 100644
--- 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,8 +12,8 @@ const Deerfall = ({ isPortfolio }: Props) => {
   // - - - - Tech and Skills - - - -
   const technologies: string[] = [
     "Unreal Engine",
+    "UE Blueprints",
     "C++",
-    "Blueprints",
     "Blender",
   ];
   const skills: string[] = [
@@ -22,10 +21,14 @@ const Deerfall = ({ isPortfolio }: Props) => {
     "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
index 741f004..8cfea24 100644
--- a/src/components/projects/MediaMatchup.tsx
+++ b/src/components/projects/MediaMatchup.tsx
@@ -25,7 +25,14 @@ 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 (
     <>
@@ -33,14 +40,16 @@ const MediaMatchup = ({ isPortfolio }: Props) => {
         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
index feae730..06c4570 100644
--- 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
index 62e107b..11e1b75 100644
--- a/src/components/projects/subComponents/ProjDescPortfolio.tsx
+++ b/src/components/projects/subComponents/ProjDescPortfolio.tsx
@@ -1,8 +1,15 @@
+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>;
@@ -10,21 +17,58 @@ interface Props {
 
 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>
   );
diff --git a/src/components/projects/subComponents/Project.css b/src/components/projects/subComponents/Project.css
index 3aaea2c..fab9ea7 100644
--- a/src/components/projects/subComponents/Project.css
+++ b/src/components/projects/subComponents/Project.css
@@ -9,9 +9,11 @@ li {
 
 /* GENERAL */
 .Project {
+  /* sizing */
   position: relative;
   width: 100%;
   height: 100%;
+  /* scroll */
   overflow: scroll;
   scroll-snap-type: y proximity;
 }
@@ -56,17 +58,17 @@ li {
 .Project .content-section {
   /* display */
   display: flex;
+  position: relative;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  box-sizing: border-box;
   scroll-snap-align: start;
   /* sizing */
+  box-sizing: border-box;
   height: 100%;
   width: 100%;
   /* style */
-  border: 1px black dashed;
-  /* padding-bottom: 35%; */
+  overflow: scroll;
 }
 
 .Project .ProjVideo {
@@ -90,13 +92,88 @@ li {
   height: 75%;
 }
 
+.Project .content-ctr {
+  /* display */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* sizing */
+  box-sizing: border-box;
+  max-height: 100%;
+  width: 80%;
+  margin-bottom: 150px;
+  /* styling */
+  overflow: scroll;
+}
+
+.Project .content-ctr h1 {
+  font-size: 24px;
+  margin: 4px;
+}
+
+.Project .content-ctr .tech-p,
+.Project .content-ctr .skill-p {
+  margin: 8px;
+}
+
+.Project .proj-link {
+  color: rgb(0, 175, 166);
+  padding: 8px;
+  margin: 10px;
+  font-size: 20px;
+  border: solid rgb(0, 175, 166) 3px;
+  border-radius: 10px;
+}
+
+.Project .proj-link:hover {
+  border: solid rgb(64, 210, 236) 3px;
+}
+
 /* DESKTOP MEDIA QUERY */
 @media only screen and (min-width: 768px) {
+  ::-webkit-scrollbar {
+    display: none;
+    /* width: 5px;
+    background-color: white; */
+  }
+
+  /* ::-webkit-scrollbar-thumb {
+    background: rgb(27, 27, 27);
+  } */
+
   .Project {
     justify-content: center;
+    overflow: auto;
+    scrollbar-width: none;
   }
 
   .Project .ProjImage {
     justify-content: center;
   }
+
+  .Project .content-section {
+    padding-left: 5px;
+    overflow: auto;
+  }
+
+  .Project .ProjImage .content-section picture {
+    display: flex;
+    align-items: center;
+  }
+
+  .Project .content-ctr {
+    overflow: auto;
+    margin-bottom: 0px;
+    width: 50%;
+  }
+
+  .Project .content-ctr h1 {
+    font-size: 26px;
+    margin: 15px;
+  }
+
+  .Project .content-ctr .tech-p,
+  .Project .content-ctr .skill-p {
+    margin: 15px;
+  }
 }
diff --git a/src/components/projects/subComponents/Project.tsx b/src/components/projects/subComponents/Project.tsx
index 289c16a..f4faade 100644
--- a/src/components/projects/subComponents/Project.tsx
+++ b/src/components/projects/subComponents/Project.tsx
@@ -6,6 +6,7 @@ import ProjImage from "./ProjImage";
 import ProjVideo from "./ProjVideo";
 import { useContext } from "react";
 import AppContext from "../../../contexts/AppContext";
+import { ProjectLinks } from "../../../models/Models";
 
 interface Props {
   mediaSrc: string;
@@ -13,12 +14,14 @@ interface Props {
   mediaSrc_Fallback2: string | undefined;
   mediaAltTxt: string;
   vidPoster: string | undefined;
+  isVideo: boolean;
   isPortfolio: boolean;
   tech: string[];
   skills: string[];
   title: string;
-  desc: string;
-  isVideo: boolean;
+  about: string;
+  techDesc: string;
+  projLinks: ProjectLinks;
 }
 
 const Project = ({
@@ -27,12 +30,14 @@ const Project = ({
   mediaSrc_Fallback2,
   mediaAltTxt,
   vidPoster,
+  isVideo,
   isPortfolio,
   tech,
   skills,
   title,
-  desc,
-  isVideo,
+  about,
+  techDesc,
+  projLinks,
 }: Props) => {
   const { scrollRefs } = useContext(AppContext);
   const fadeTransition = useTransition(isPortfolio, {
@@ -66,15 +71,19 @@ const Project = ({
         item ? (
           <ProjDescPortfolio
             title={title}
-            desc={desc}
+            about={about}
+            tech={tech}
+            skills={skills}
+            techDesc={techDesc}
             transStyle={styles}
             tech_ScrollRef={scrollRefs.tech}
             about_ScrollRef={scrollRefs.about}
+            projLinks={projLinks}
           />
         ) : (
           <ProjDescBlog
             title={title}
-            desc={desc}
+            about={about}
             transStyle={styles}
             blog_ScrollRef={scrollRefs.blog}
           />
diff --git a/src/components/styles/ErrorNotFound.css b/src/components/styles/ErrorNotFound.css
index 17c3ab2..1976716 100644
--- a/src/components/styles/ErrorNotFound.css
+++ b/src/components/styles/ErrorNotFound.css
@@ -1,7 +1,56 @@
 .ErrorNotFound {
+  /* display */
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  /* sizing */
+  box-sizing: border-box;
   height: 100%;
+  border: 7px dashed rgb(71, 71, 71);
+  /* font */
+  font-family: "munro";
+  font-weight: 300;
+  font-smooth: never;
+  -webkit-font-smoothing: none;
+  letter-spacing: 1px;
+  color: rgb(71, 71, 71);
+}
+
+.ErrorNotFound p {
+  font-size: 18px;
+}
+
+.ErrorNotFound button {
+  color: rgb(0, 175, 166);
+  padding: 8px;
+  margin: 10px;
+  font-size: 20px;
+  border: solid rgb(0, 175, 166) 3px;
+  border-radius: 10px;
+}
+
+.ErrorNotFound button:hover {
+  color: rgb(64, 210, 236);
+  cursor: pointer;
+  border: solid rgb(64, 210, 236) 3px;
+}
+
+.ErrorNotFound .content-ctr {
+  width: 95%;
+}
+
+@media only screen and (min-width: 768px) {
+  .ErrorNotFound {
+    /* display */
+    border: 10px dashed rgb(71, 71, 71);
+  }
+
+  .ErrorNotFound p {
+    font-size: 20px;
+  }
+
+  .ErrorNotFound .content-ctr {
+    width: 60%;
+  }
 }
diff --git a/src/components/styles/HVHeader.css b/src/components/styles/HVHeader.css
index 9944221..d11b54b 100644
--- a/src/components/styles/HVHeader.css
+++ b/src/components/styles/HVHeader.css
@@ -69,7 +69,8 @@
 @media only screen and (min-width: 768px) {
   .HVHeader {
     justify-content: space-around;
-    height: 100px;
+    height: 120px;
+    margin-right: 10px;
   }
 
   .HVHeader .title-ctr {
diff --git a/src/components/styles/HVSideNav.css b/src/components/styles/HVSideNav.css
index 62a6778..5c67253 100644
--- a/src/components/styles/HVSideNav.css
+++ b/src/components/styles/HVSideNav.css
@@ -42,3 +42,13 @@
 .HVSideNav .highlighted-icon {
   background-color: red;
 }
+
+@media only screen and (min-width: 768px) {
+  .HVSideNav {
+    width: 70px;
+  }
+
+  .HVSideNav .nav-icon {
+    width: 40px;
+  }
+}
diff --git a/src/components/styles/Introduction.css b/src/components/styles/Introduction.css
index 05b4107..5e4320d 100644
--- a/src/components/styles/Introduction.css
+++ b/src/components/styles/Introduction.css
@@ -108,6 +108,7 @@ p {
     justify-content: center;
     max-height: none;
     overflow: hidden;
+    margin-bottom: 0px;
   }
 
   .Introduction .content-ctr p {
diff --git a/src/models/Models.ts b/src/models/Models.ts
index 9892774..a3900c6 100644
--- a/src/models/Models.ts
+++ b/src/models/Models.ts
@@ -24,3 +24,8 @@ export interface UserAccount {
 export interface HueRotation {
   filter: SpringValue<string>;
 }
+
+export interface ProjectLinks {
+  github: string;
+  demo: string;
+}