Fix Name

src/App.tsx

@@ -1,10 +1,8 @@
 import React from "react";
-
 import { About, Footer, Header, Skills, Testimonial, Work } from "./container";
 import { Navbar } from "./components";
 import "./App.scss";
 
-// App
 const App: React.FC = () => {
   return (
     <div className="app">

src/components/Navbar/Navbar.scss

@@ -19,14 +19,13 @@
   justify-content: flex-start;
   align-items: center;
 
-  img {
-    width: 90px;
-    height: 20px;
-
-    @media screen and (min-width: 2000px) {
-      width: 180px;
-      height: 40px;
-    }
+  a {
+    color: var(--secondary-color);
+    text-decoration: none;
+    font-size: 1.5rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    font-family: var(--font-base);
   }
 }
 

src/components/Navbar/Navbar.tsx

@@ -27,7 +27,7 @@ const Navbar = () => {
     <nav className="app__navbar">
       <div className="app__navbar-logo">
         {/* Logo */}
-        <a href={`#${links.navbar_links[0]}`} title="Micael">
+        <a href={`#${links.navbar_links[0]}`} title="Vichea Nath">
           Vichea Nath
         </a>
       </div>

src/hooks/useWindowSize.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+export const useWindowSize = () => {
+  // Initialize state with undefined width/height so server and client renders match
+  const [windowSize, setWindowSize] = useState<{
+    width: number | undefined;
+    height: number | undefined;
+  }>({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return windowSize;
+};