added custom hook 'useIntersectionObserver' to modify url hash when a section is in view. Nav scrolls to the appropriate section on click, smoothly. Portfolio <-> blog animates the change in nav smoothly. selected section is highlighted with hueRotation. other css tweaks

Author: JS-GitRepo

src/components/HVContent.tsx

@@ -1,14 +1,13 @@
-import { useEffect, useState } from "react";
+import { MutableRefObject, useContext, useEffect, useState } from "react";
 import { animated, useTransition } from "react-spring";
 import "./styles/HVContent.css";
 import Deerfall from "./projects/Deerfall";
 import MediaMatchup from "./projects/MediaMatchup";
 import Introduction from "./Introduction";
-import mediaIcon from "../img/navIcons/media.png";
-import techIcon from "../img/navIcons/tech.png";
-import aboutIcon from "../img/navIcons/about.png";
-import blogIcon from "../img/navIcons/blog.png";
 import HVSideNav from "./HVSideNav";
+import AppContext from "../contexts/AppContext";
+import { useIntersectionObserver } from "../hooks/useIntersectionObserver";
+import { useLocation, useNavigate } from "react-router-dom";
 
 interface Props {
   project: string;
@@ -19,6 +18,36 @@ interface Props {
 const HVContent = ({ project, isIntro, allParams }: Props) => {
   // - - - - STATES - - - -
   const [isPortfolio, setIsPortfolio] = useState<boolean>(true);
+  const location = useLocation();
+  const navigate = useNavigate();
+  // - - - - CONTEXT - - - -
+  const { scrollRefs, hueRotation } = useContext(AppContext);
+  const observerOptions: IntersectionObserverInit = {
+    threshold: 0.5,
+    root: null,
+    rootMargin: "0px",
+  };
+  const mediaScrollObserver = useIntersectionObserver(
+    scrollRefs.media,
+    observerOptions,
+    false
+  );
+  const techScrollObserver = useIntersectionObserver(
+    scrollRefs.tech,
+    observerOptions,
+    false
+  );
+  const blogScrollObserver = useIntersectionObserver(
+    scrollRefs.blog,
+    observerOptions,
+    false
+  );
+  const aboutScrollObserver = useIntersectionObserver(
+    scrollRefs.about,
+    observerOptions,
+    false
+  );
+
   // - - - - PROJECTS - - - -
   const allProjList = {
     intro: <Introduction />,
@@ -42,6 +71,8 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
     // exitBeforeEnter: true,
   });
 
+  // = = = = = FUNCTIONS = = = = =
+
   const checkAndSetProjComp = () => {
     if (isIntro) {
       setLocalProject("intro");
@@ -50,7 +81,11 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
     }
   };
 
-  // - - - - - USE EFFECTS - - - - -
+  const scrollToElement = (ref: React.MutableRefObject<any>) => {
+    ref.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  // = = = = = USE EFFECTS = = = = =
   // Hide Project when it is Changed, then set the new project once hidden
   useEffect(() => {
     setShow(false);
@@ -71,9 +106,40 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
     }
   }, [allParams]);
 
+  useEffect(() => {
+    if (mediaScrollObserver?.isIntersecting) {
+      navigate(`${location.pathname}#media`);
+    }
+  }, [mediaScrollObserver?.isIntersecting]);
+
+  useEffect(() => {
+    if (techScrollObserver?.isIntersecting)
+      navigate(`${location.pathname}#tech`);
+  }, [techScrollObserver?.isIntersecting]);
+
+  useEffect(() => {
+    if (blogScrollObserver?.isIntersecting)
+      navigate(`${location.pathname}#blog`);
+  }, [blogScrollObserver?.isIntersecting]);
+
+  useEffect(() => {
+    if (aboutScrollObserver?.isIntersecting)
+      navigate(`${location.pathname}#about`);
+  }, [aboutScrollObserver?.isIntersecting]);
+
   return (
     <main className='HVContent'>
-      {isIntro ? "" : <HVSideNav isPortfolio={isPortfolio} />}
+      {isIntro ? (
+        ""
+      ) : (
+        <HVSideNav
+          isPortfolio={isPortfolio}
+          allParams={allParams}
+          scrollRefs={scrollRefs}
+          hueRotation={hueRotation}
+          scrollToElement={scrollToElement}
+        />
+      )}
 
       {transitionFade(
         (styles, item) =>

src/components/HVSideNav.tsx

@@ -4,50 +4,72 @@ 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 { useContext } from "react";
-import AppContext from "../contexts/AppContext";
+import { useEffect, useState } from "react";
+import { ScrollRefs, HueRotation } from "../models/Models";
 
 interface Props {
+  scrollRefs: ScrollRefs;
+  hueRotation: HueRotation;
   isPortfolio: boolean;
+  allParams: string[];
+  scrollToElement: (ref: React.MutableRefObject<any>) => void;
 }
 
-const HVSideNav = ({ isPortfolio }: Props) => {
-  const { scrollRefs } = useContext(AppContext);
+const HVSideNav = ({
+  isPortfolio,
+  allParams,
+  scrollRefs,
+  hueRotation,
+  scrollToElement,
+}: Props) => {
+  const [hlNav, setHLNav] = useState("media");
   const navSizeChange = useSpring({
     from: { height: "150px" },
     to: { height: "110px" },
     config: { mass: 1, tension: 200, friction: 15 },
     reverse: isPortfolio,
   });
 
-  const handleScroll = (ref: any) => {
-    ref.current?.scrollIntoView({ behavior: "smooth" });
+  const handleNavClick = (
+    ref: React.MutableRefObject<any>,
+    navName: string
+  ) => {
+    scrollToElement(ref);
+    setHLNav(navName);
   };
 
+  useEffect(() => {
+    scrollRefs.media.current?.scrollIntoView({ behavior: "smooth" });
+    setHLNav("media");
+  }, [allParams[1]]);
+
   return (
     <animated.nav className='HVSideNav' style={navSizeChange}>
       {isPortfolio ? (
         <ul>
           <li>
-            <img
-              onClick={() => handleScroll(scrollRefs.media)}
+            <animated.img
+              onClick={() => handleNavClick(scrollRefs.media, "media")}
               className='nav-icon'
+              style={hlNav === "media" ? hueRotation : {}}
               src={mediaIcon}
               alt='media navigation icon'
             />
           </li>
           <li>
-            <img
-              onClick={() => handleScroll(scrollRefs.tech)}
+            <animated.img
+              onClick={() => handleNavClick(scrollRefs.tech, "tech")}
               className='nav-icon'
+              style={hlNav === "tech" ? hueRotation : {}}
               src={techIcon}
               alt='technologies and skills navigation icon'
             />
           </li>
           <li>
-            <img
-              onClick={() => handleScroll(scrollRefs.about)}
+            <animated.img
+              onClick={() => handleNavClick(scrollRefs.about, "about")}
               className='nav-icon'
+              style={hlNav === "about" ? hueRotation : {}}
               src={aboutIcon}
               alt='about project navigation icon'
             />
@@ -56,17 +78,19 @@ const HVSideNav = ({ isPortfolio }: Props) => {
       ) : (
         <ul>
           <li>
-            <img
-              onClick={() => handleScroll(scrollRefs.media)}
+            <animated.img
+              onClick={() => handleNavClick(scrollRefs.media, "media")}
               className='nav-icon'
+              style={hlNav === "media" ? hueRotation : {}}
               src={mediaIcon}
               alt='media navigation icon'
             />
           </li>
           <li>
-            <img
-              onClick={() => handleScroll(scrollRefs.blog)}
+            <animated.img
+              onClick={() => handleNavClick(scrollRefs.blog, "blog")}
               className='nav-icon'
+              style={hlNav === "blog" ? hueRotation : {}}
               src={blogIcon}
               alt='media navigation icon'
             />

src/components/projects/subComponents/ProjDescPortfolio.tsx

@@ -21,10 +21,10 @@ const ProjDescPortfolio = ({
       className='ProjDescPortfolio full-w-h
   '>
       <section ref={tech_ScrollRef} className='content-section tech-skills-ctr'>
-        Tech and Skills
+        <p>Tech and Skills</p>
       </section>
       <section ref={about_ScrollRef} className='content-section about-ctr'>
-        About Project
+        <p>About Project</p>
       </section>
     </animated.div>
   );

src/components/projects/subComponents/ProjImage.tsx

@@ -16,7 +16,7 @@ const ProjImage = ({
       <div className='content-section full-w-h'>
         <picture>
           <source srcSet={imgSrc} />
-          <img className='main-img' src={imgSrc_Fallback} alt={imgAltTxt} />
+          <img src={imgSrc_Fallback} alt={imgAltTxt} />
         </picture>
       </div>
     </section>

src/components/projects/subComponents/Project.css

@@ -53,6 +53,10 @@ li {
 }
 
 .Project .content-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
@@ -73,13 +77,11 @@ li {
   position: relative;
 }
 
-.Project .ProjImage .content-section {
-  box-sizing: border-box;
-  border: 1px black dashed;
-  /* padding-bottom: 35%; */
+.Project .ProjImage .content-section picture {
+  height: 100%;
 }
 
-.Project .ProjImage .content-section .main-img {
+.Project .ProjImage .content-section picture img {
   height: 75%;
 }
 

src/components/styles/HVSideNav.css

@@ -15,7 +15,7 @@
   width: 45px;
   /* styling */
   color: white;
-  background-color: rgba(96, 96, 96, 0.5);
+  background-color: rgba(96, 96, 96, 0.3);
   backdrop-filter: blur(4px);
   font-size: 40px;
   border: 2px white solid;
@@ -30,11 +30,15 @@
 
 .HVSideNav .nav-icon {
   image-rendering: pixelated;
-  filter: invert();
+  filter: saturate(0) brightness(100);
   margin: 8px;
   width: 30px;
 }
 
+.HVSideNav .highlighted-nav {
+  filter: none;
+}
+
 .HVSideNav .highlighted-icon {
   background-color: red;
 }

src/components/styles/Introduction.css

@@ -51,11 +51,11 @@ p {
   flex-direction: column;
   align-items: center;
   width: 100%;
-  max-height: 63%;
   overflow: scroll;
   z-index: 1;
   color: rgb(250, 250, 250);
   padding: 6vh 0%;
+  margin-bottom: 150px;
 }
 
 .Introduction .img-ctr {

src/contexts/AppContext.ts

@@ -1,4 +1,5 @@
-import { createContext, useState } from "react";
+import { createContext, useContext } from "react";
+import { HueRotation, ScrollRefs } from "../models/Models";
 
 export interface AppContextModel {
   isMobile: boolean;
@@ -8,13 +9,24 @@ export interface AppContextModel {
   scrollRefs: any;
 }
 
-const defaultValue: AppContextModel = {
-  isMobile: true,
+const defaultValues: AppContextModel = {
+  isMobile: false,
   hueRotation: undefined,
   hueRotation_Inv: undefined,
   setHueDuration: undefined,
   scrollRefs: undefined,
 };
 
-const AppContext = createContext(defaultValue);
+const AppContext = createContext(defaultValues);
+// const initAppContext = createContext<AppContextModel | undefined>(undefined);
+
+// export const AppContext = () => {
+//   const useAppContext = useContext(initAppContext!);
+//   if (!initAppContext) {
+//     throw new Error("No AppContext.Provider found when calling AppContext.");
+//   } else {
+//     return useAppContext!;
+//   }
+// };
+
 export default AppContext;

src/contexts/AppContextProvider.tsx

@@ -1,7 +1,8 @@
 import AppContext from "./AppContext";
 import { ReactNode, useEffect, useRef, useState } from "react";
-import { useSpring } from "react-spring";
+import { SpringValue, useSpring } from "react-spring";
 import AppConfig from "../AppConfig.json";
+import { HueRotation, ScrollRefs } from "../models/Models";
 
 interface Props {
   children: ReactNode;
@@ -16,7 +17,7 @@ const AppContextProvider = ({ children }: Props) => {
   const tech = useRef(null);
   const about = useRef(null);
   const blog = useRef(null);
-  const [scrollRefs, setScrollRefs] = useState({
+  const [scrollRefs, setScrollRefs] = useState<ScrollRefs>({
     media,
     tech,
     about,
@@ -27,7 +28,7 @@ const AppContextProvider = ({ children }: Props) => {
   const [hueDuration, setHueDuration] = useState<number>(
     AppConfig.hueAnimDuration
   );
-  const hueRotation = useSpring({
+  const hueRotation: HueRotation = useSpring({
     loop: { reverse: true, config: { duration: hueDuration } },
     to: {
       filter: "hue-rotate(130deg) saturate(80%) sepia(30%)",
@@ -37,7 +38,7 @@ const AppContextProvider = ({ children }: Props) => {
     },
     config: { duration: hueDuration, precision: 0.001 },
   });
-  const hueRotation_Inv = useSpring({
+  const hueRotation_Inv: HueRotation = useSpring({
     loop: { reverse: true, config: { duration: hueDuration } },
     to: {
       filter: "hue-rotate(0deg) saturate(100%) sepia(0%)",

src/contexts/AuthContextProvider.tsx

@@ -2,7 +2,7 @@ import { User } from "firebase/auth";
 import AuthContext from "./AuthContext";
 import { ReactNode, useEffect, useState } from "react";
 import { auth } from "../firebaseConfig";
-import UserAccount from "../models/UserAcount";
+import { UserAccount } from "../models/Models";
 import { createNewUser, getUserById } from "../services/userService";
 
 interface Props {