done till about

public/bg.js

@@ -12,4 +12,19 @@ VANTA.GLOBE({
     color: 0x5ce50d,
     size: 0.90,
     backgroundColor: 0x0
-  })
+  })
+
+const handleResize = () => {
+  const horizontalHashes = document.querySelectorAll(".horizontal-hashes")
+  horizontalHashes.forEach(e => e.innerText =  "# ".repeat(window.innerWidth / 34))
+
+  const verticalHashes = document.querySelectorAll(".vertical-hashes")
+  verticalHashes.forEach(e => {
+    e.innerHTML = `<p>#</p>`.repeat(window.innerHeight/40)
+  })
+
+}
+
+// window.onload = handleResize;
+window.addEventListener("resize", handleResize);
+

src/app/components/HashedBorder.module.css

@@ -52,7 +52,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: space-around;
     color: var(--text); 
     font-size: 30px;
 }

src/app/components/HashedBorder.tsx

@@ -4,29 +4,33 @@ import React from "react";
 import styles from "./HashedBorder.module.css";
 
 const HashedBorder = ({ children }: { children: React.ReactNode }) => {
-  const [dimension, setDimension] = useState({ w: 0, h: 0 });
+  const [size, setSize] = useState({ w: 0, h: 0 });
   useEffect(() => {
     const w = window.innerWidth;
     const h = window.innerHeight;
 
-    setDimension({ w, h });
+    setSize({ w, h });
   }, []);
 
-  const HorizontalHash = "# ".repeat(dimension.w / 30);
+  const HorizontalHash = "# ".repeat(size.w / 34);
 
   const VerticalHash = () => {
     const elements = [];
-    for (let i = 0; i < dimension.h/35; i++) {
+    for (let i = 0; i < size.h / 42; i++) {
       elements.push(<p key={i}>{"#"}</p>);
     }
     return <>{elements}</>;
   };
 
   return (
     <div className={styles.container}>
-      <div className={styles.boundaryLeft}><VerticalHash /></div>
-      <div className={styles.boundaryRight}><VerticalHash /></div>
-      <div className={styles.boundaryTop}>{HorizontalHash}</div>
+      <div className={`${styles.boundaryLeft} vertical-hashes`}>
+        <VerticalHash />
+      </div>
+      <div className={styles.boundaryRight}>
+        <VerticalHash />
+      </div>
+      <div className={`${styles.boundaryTop} horizontal-hashes`}>{HorizontalHash}</div>
       <div className={styles.boundaryBottom}>{HorizontalHash}</div>
       <div className={styles.content}>{children}</div>
     </div>

src/app/components/Loader.tsx

@@ -6,7 +6,7 @@ const Loader = ({ children }: { children: React.ReactNode }) => {
     const [loading, setLoading] = useState<boolean>(true);
 
     useEffect(() => {
-        setTimeout(() => setLoading(false),2500)
+        setTimeout(() => setLoading(false), 300)
     }, [])
 
     if (loading) {

src/app/components/Navbar.tsx

@@ -9,14 +9,29 @@ interface TabData {
   content: React.ReactNode;
 }
 
+const AboutTab = () => {
+  return (
+    <div style={{ fontSize: "15px", textAlign: "center" }}>
+      <br />
+      <pre>
+        <code>{`███████╗██╗  ██╗ █████╗ ██╗  ██╗\n██╔════╝██║  ██║██╔══██╗╚██╗██╔╝\n█████╗  ███████║███████║ ╚███╔╝ \n██╔══╝  ██╔══██║██╔══██║ ██╔██╗ \n███████╗██║  ██║██║  ██║██╔╝ ██╗\n╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝`}</code>
+      </pre>
+
+      <br />
+      <br />
+
+      <p>EHAX is the official ethical hacking and cybersecurity society of DTU and its their official website</p>
+    </div>
+  )
+}
 const Navbar = () => {
   // const [page, setPage] = useState("home");
   const [tabs, setTabs] = useState<TabData[]>([
     // { id: 1, title: "About", content: (<>Hello everyone</>)},
     // { id: 2, title: "Contact", content: (<></>) },
   ]);
 
-  const tabContent = [<p key="0">home</p>, <p key="1">about</p>, <p key="2">team</p>, <p key="3">contact</p>];
+  const tabContent = [<p key="0">home</p>, <AboutTab key="1" />, <p key="2">team</p>, <p key="3">contact</p>];
 
   const setCurrTab = (page: string, id: number) => {
     // setPage(page);