Compressed some font files, removed strange files to speed up fronten…

…d load times.

client/src/components/BlogPostGraphics/BlogPostGraphics.css

@@ -5,16 +5,16 @@
     align-items: center;
     width: 100%;
     height: 100%;
+    -webkit-animation: bob 2s ease-in-out infinite;
     animation: bob 2s ease-in-out infinite;
 }
 
-
-@keyframes spin-intro {
-    0% {
-        transform: rotateY(120deg);
+@-webkit-keyframes bob {
+    0%, 100% {
+        margin-top: -5px;
     }
-    100% {
-        transform: rotateY(0deg);
+    50% {
+        margin-top: 5px;
     }
 }
 
@@ -28,12 +28,17 @@
 }
 
 .blog-graphics__paper, .paper.-two {
-    width: 90%; height: 100%;
-    min-width: 80px; min-height: 130px;
-    max-width: 200px; max-height: 300px;
-    border: .1px solid black;
+    width: 90%; 
+    height: 100%;
+    min-width: 80px; 
+    min-height: 130px;
+    max-width: 200px; 
+    max-height: 300px;
+    border: 0.1px solid black;
     border-radius: 1vw;
+    -webkit-transform: rotateX(-40deg) rotateZ(-20deg);
     transform: rotateX(-40deg) rotateZ(-20deg);
+    position: absolute;
 }
 
 .blog-graphics__paper {
@@ -51,31 +56,32 @@
     content: '';
     position: absolute;
     top: -1px; right: -1px;
-    border-top: var(--paper-flip-size)  solid var(--paper-background-color);
+    border-top: var(--paper-flip-size) solid var(--paper-background-color);
     border-left: var(--paper-flip-size) solid #F7F8F3;
     width: 0;
     border-radius: 0 0 0 12px;
     box-shadow: -2px 2px 1px rgba(109, 71, 47, 0.2);
 }
 
-
-.blog-graphics__paper>div {
+.blog-graphics__paper > div {
     background: #666;
     height: 1px;
     width: 80%;
 }
 
-.blog-graphics__paper>div:nth-child(1) {
+.blog-graphics__paper > div:nth-child(1) {
     width: 50%;
 }
 
-.blog-graphics__paper>div:last-child {
+.blog-graphics__paper > div:last-child {
     width: 50%;
 }
 
 .paper.-two {
-    position: absolute;
     background: #E9E9E9;
+    -webkit-transform: rotateX(-40deg) rotateZ(-20deg) translate(max(-1vw, -10px), min(1.5vw, 12px));
     transform: rotateX(-40deg) rotateZ(-20deg) translate(max(-1vw, -10px), min(1.5vw, 12px));
-    background-image: radial-gradient(#333 1px, transparent 0); background-size: 4px 4px; background-position: -19px -19px;
+    background-image: radial-gradient(#333 1px, transparent 0); 
+    background-size: 4px 4px; 
+    background-position: -19px -19px;
 }

client/src/components/BlogPostGraphics/BlogPostGraphics.tsx

@@ -1,7 +1,17 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import "./BlogPostGraphics.css";
 
 const BlogPostGraphics: React.FC<{}> = () => {
+    const [isLoaded, setIsLoaded] = useState(false);
+
+    useEffect(() => {
+        setIsLoaded(true);
+    }, []);
+
+    if (!isLoaded) {
+        return null; // Or a loading spinner, or a placeholder
+    }
+
     return (
         <div className="blog-graphics">
             <div className="blog-graphics__paper">

client/src/components/Navbar/Navbar.tsx

@@ -14,20 +14,20 @@ import "./Navbar.css";
 const NavBar: React.FC<INavbarProps> = (props) => {
     const { scrollStatus } = props;
 
-    const navbar = useRef<HTMLDivElement>();
-    const navbarLeft = useRef<HTMLDivElement>();
-    const selectedNavlinkWindow = useRef<HTMLDivElement>();
-    const burgerPanel = useRef<HTMLDivElement>();
-    const burgerButton = useRef<HTMLDivElement>();
-    const scrollProgress = useRef<HTMLDivElement>();
-    const navbarSubmenu = useRef<HTMLDivElement>();
+    const navbar = useRef<HTMLDivElement>(null);
+    const navbarLeft = useRef<HTMLDivElement>(null);
+    const selectedNavlinkWindow = useRef<HTMLDivElement>(null);
+    const burgerPanel = useRef<HTMLDivElement>(null);
+    const burgerButton = useRef<HTMLDivElement>(null);
+    const scrollProgress = useRef<HTMLDivElement>(null);
+    const navbarSubmenu = useRef<HTMLDivElement>(null);
 
     const [navBarHeight, setNavBarHeight] = useState(0);
     const [isLoaded, setIsLoaded] = useState<boolean>(false);
 
     const links = useMemo(() => {
-        return linksData.links
-    }, [])
+        return linksData.links;
+    }, []);
 
     const websiteName = "~/llcode.tech" as const;
 
@@ -41,30 +41,30 @@ const NavBar: React.FC<INavbarProps> = (props) => {
     });
 
     useEffect(() => {
-        const element = navbar.current!;
+        const element = navbar.current;
         const height = element?.getBoundingClientRect().height || 0;
         setNavBarHeight(height);
-    }, [isLoaded])
+    }, [isLoaded]);
 
     const updateScrolledProgress = (progress: number) => {
-        if (isLoaded && scrollProgress) {
-            scrollProgress.current!.style.width = `${progress * 100}vw`;
+        if (isLoaded && scrollProgress.current) {
+            scrollProgress.current.style.width = `${progress * 100}vw`;
             const blueEnd = 95 + progress * 4.5;
-            scrollProgress.current!.style.background = `linear-gradient(to right,  var(--dark-mode-purple-2), ${blueEnd}%, #00bfff)`;
+            scrollProgress.current.style.background = `linear-gradient(to right, var(--dark-mode-purple-2), ${blueEnd}%, #00bfff)`;
 
             if (progress === 1) {
-                scrollProgress.current!.classList.add("scroll-progress-complete");
-                scrollProgress.current!.style.background = "orange";
+                scrollProgress.current.classList.add("scroll-progress-complete");
+                scrollProgress.current.style.background = "orange";
             } else {
-                scrollProgress.current!.classList.remove("scroll-progress-complete");
+                scrollProgress.current.classList.remove("scroll-progress-complete");
             }
         }
     };
 
     const listenDeltaScrolled = () => {
         const { hideNavBarScrollSensitivity, isNavbarHidden } = state;
         const deltaScrolled = scrollStatus.deltaScrolled ?? 0;
-        if (( deltaScrolled >= hideNavBarScrollSensitivity ) && !isNavbarHidden && state.navBarDetached) {
+        if (deltaScrolled >= hideNavBarScrollSensitivity && !isNavbarHidden && state.navBarDetached) {
             hideNavBar();
         } else if (deltaScrolled <= -hideNavBarScrollSensitivity && isNavbarHidden) {
             showNavBar();
@@ -82,137 +82,123 @@ const NavBar: React.FC<INavbarProps> = (props) => {
         updateScrolledProgress(scrollStatus.scrolled! / pageHeight);
     };
 
-
-    const addBurgerClickOutEventLister = () => {
+    const addBurgerClickOutEventListener = () => {
         window.addEventListener("click", hideBurgerMenu);
-    }
+    };
 
     const setupNavHoverEffect = () => {
         const navbarLeftTarget = navbarLeft.current!;
         const selectedNavlinkWindowTarget = selectedNavlinkWindow.current!;
 
-        if (isLoaded && navbarLeftTarget && selectedNavlinkWindow) {
+        if (isLoaded && navbarLeftTarget && selectedNavlinkWindowTarget) {
             Array.from(navbarLeftTarget.children).forEach((child, index) => {
                 if (child !== selectedNavlinkWindowTarget) {
                     child.addEventListener("mouseover", () => {
                         const factor = navbarLeftTarget.children.length - index - 1;
-                        const translateXValue = `calc(-${factor}*( min(var(--navbar-item-width), var(--navbar-item-max-width)) + var(--navbar-item-margin)) + var(--navbar-item-margin) )`;
-                        selectedNavlinkWindowTarget.style.setProperty("--dynamic-translate", `${translateXValue}`);
+                        const translateXValue = `calc(-${factor}*(min(var(--navbar-item-width), var(--navbar-item-max-width)) + var(--navbar-item-margin)) + var(--navbar-item-margin))`;
+                        selectedNavlinkWindowTarget.style.setProperty("--dynamic-translate", translateXValue);
                     });
                 }
             });
         }
-    }
+    };
 
     const initializeNavBar = () => {
         listenContinuousScrolled();
         updateScrolledProgress(0);
-        if (window.innerWidth < 900) addBurgerClickOutEventLister();
-    }
+        if (window.innerWidth < 900) addBurgerClickOutEventListener();
+    };
 
     useEffect(() => {
         updateScrollingBehavior();
     }, [scrollStatus.deltaScrolled]);
 
     useEffect(() => {
-        listenContinuousScrolled()
-    }, [scrollStatus.scrolled])
+        listenContinuousScrolled();
+    }, [scrollStatus.scrolled]);
 
     const updateScrollingBehavior = () => {
         if (scrollStatus.deltaScrolled !== 0) listenDeltaScrolled();
-    }
+    };
 
     const attachNavBar = () => {
         navbar.current?.classList.remove("detached");
         burgerPanel.current?.classList.add("nav-burger-panel-move-lower");
-        setState(prev => {
-            return {
-                ...prev,
-                navBarDetached: false
-            };
-        });
-    }
+        setState(prev => ({
+            ...prev,
+            navBarDetached: false
+        }));
+    };
 
     const detachNavBar = () => {
         navbar.current?.classList.add("detached");
         burgerPanel.current?.classList.remove("nav-burger-panel-move-lower");
-        setState(prev => {
-            return {
-                ...prev,
-                navBarDetached: true
-            }
-        });
+        setState(prev => ({
+            ...prev,
+            navBarDetached: true
+        }));
     };
 
     const hideNavBar = () => {
-        // If the navbar is not already hidden, hide it and set the navbar height to 0px
         navbar.current?.classList.add("hidden");
         document.documentElement.style.setProperty('--navbar-height', '0px');
-        setState(prev => {
-            return {
-                ...prev,
-                isNavbarHidden: true
-            }
-        });
+        setState(prev => ({
+            ...prev,
+            isNavbarHidden: true
+        }));
     };
 
     const showNavBar = () => {
         navbar.current?.classList.remove("hidden");
-        // Connascence of value here /Users/blackfish/personal-portfolio/client/src/App.css:5
         document.documentElement.style.setProperty('--navbar-height', `${navBarHeight}px`);
-        setState(prev => {
-            return {
-                ...prev,
-                isNavbarHidden: false
-            }
-        });
+        setState(prev => ({
+            ...prev,
+            isNavbarHidden: false
+        }));
     };
 
     const toggleBurgerMenu = () => {
         burgerPanel.current?.classList.toggle("nav-burger-panel-hide");
     };
 
     const hideBurgerMenu = (e: any) => {
-        if (burgerPanel.current && !burgerPanel.current.contains(e.target as Node) && !burgerButton.current!.contains(e.target as Node)) {
+        if (burgerPanel.current && !burgerPanel.current.contains(e.target as Node) && !burgerButton.current?.contains(e.target as Node)) {
             burgerPanel.current?.classList.add("nav-burger-panel-hide");
         }
     };
 
     const hideDropdownMenu = () => {
         navbarSubmenu.current?.classList.remove("show-navbar-dropdown");
         selectedNavlinkWindow.current?.classList.remove("show-navbar-dropdown");
-    }
+    };
 
     const showDropdownMenu = () => {
         navbarSubmenu.current?.classList.add("show-navbar-dropdown");
         selectedNavlinkWindow.current?.classList.add("show-navbar-dropdown");
-    }
+    };
 
     const renderDropdownMenu = (links: Link[] | undefined): ReactNode | void => {
         if (links !== undefined) {
             showDropdownMenu();
-            setState((prev) => {
-                return {
-                    ...prev,
-                    dropdownMenuLinkDisplay: links.map((item, _) => renderNavLink(item))
-                }
-            });
-            if (state.dropdownMenuLinkDisplay.length === 0) hideDropdownMenu();
+            setState(prev => ({
+                ...prev,
+                dropdownMenuLinkDisplay: links.map(item => renderNavLink(item))
+            }));
+            if (links.length === 0) hideDropdownMenu();
         } else {
             hideDropdownMenu();
         }
-    }
+    };
 
     const renderNavLink = (link: NavbarItem, isSubLink: boolean = true) => {
-        // https://mikebifulco.com/posts/javascript-filter-boolean
         const navLinkContent = [
             link.name,
             link.icon,
             link.sublinks && <AiOutlineDown key="down-icon" />,
             link.isLocked && <CiLock key="lock-icon" />
         ].filter(Boolean);
         const targetPath = link.isLocked ? null : link.to;
-        const onMouseOverAction = isSubLink ? () => {} : () => renderDropdownMenu(links.filter(item => item.name === link.name)[0].sublinks);
+        const onMouseOverAction = isSubLink ? () => {} : () => renderDropdownMenu(links.find(item => item.name === link.name)?.sublinks);
         return (
             <NavLink
                 to={targetPath}
@@ -242,10 +228,10 @@ const NavBar: React.FC<INavbarProps> = (props) => {
                 <NavLink to="/"><h1 className="logo">{websiteName}</h1></NavLink>
             </div>
             <nav ref={navbarLeft} className="navbar-left flex flex-row">
-                {links.map((item, _) => renderNavLink(item, false))}
+                {links.map(item => renderNavLink(item, false))}
                 <LoginButton onMouseOver={renderDropdownMenu} />
                 <section ref={selectedNavlinkWindow} className="selected-navlink-window flex items-center">
-                    <div ref={navbarSubmenu} className="navbar-item__dropdown ">
+                    <div ref={navbarSubmenu} className="navbar-item__dropdown">
                         {state.dropdownMenuLinkDisplay}
                     </div>
                 </section>
@@ -256,7 +242,7 @@ const NavBar: React.FC<INavbarProps> = (props) => {
 
     const navbarBurgerPanel = useMemo(() => (
         <NavBurgerPanel links={links} burgerPanel={burgerPanel} />
-    ), [state.dropdownMenuLinkDisplay]);
+    ), [links]);
 
     useEffect(() => {
         initializeNavBar();
@@ -265,19 +251,19 @@ const NavBar: React.FC<INavbarProps> = (props) => {
         return () => {
             window.removeEventListener("click", hideBurgerMenu);
         };
-    }, [isLoaded])
+    }, [isLoaded]);
 
     useEffect(() => {
         setIsLoaded(true);
-    }, [])
+    }, []);
 
     if (!isLoaded) {
         return (<></>);
     }
 
     return (
         <>
-            <article className="navbar" onMouseLeave={() => hideDropdownMenu()} ref={navbar}>
+            <article className="navbar" onMouseLeave={hideDropdownMenu} ref={navbar}>
                 {navBarMainSection}
                 <aside id="scroll-progress" ref={scrollProgress}>
                     <FaArrowCircleUp />