From 5ed198fac6ff2059af37080ce45fd257dc1867c2 Mon Sep 17 00:00:00 2001
From: Vichea <nathvichea1@gmail.com>
Date: Sun, 18 Aug 2024 11:01:09 -0500
Subject: [PATCH] Fix Name

---
 src/App.tsx                       |  2 --
 src/components/Navbar/Navbar.scss | 15 +++++++-------
 src/components/Navbar/Navbar.tsx  |  2 +-
 src/hooks/useWindowSize.ts        | 34 +++++++++++++++++++++++++++++++
 4 files changed, 42 insertions(+), 11 deletions(-)
 create mode 100644 src/hooks/useWindowSize.ts

diff --git a/src/App.tsx b/src/App.tsx
index 0fedd94..d0f6eb3 100644
--- a/src/App.tsx
+++ b/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">
diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss
index 52ce967..46a7491 100644
--- a/src/components/Navbar/Navbar.scss
+++ b/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);
   }
 }
 
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index a155445..c542d0c 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/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>
diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts
new file mode 100644
index 0000000..249d419
--- /dev/null
+++ b/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;
+};