done for today (please dont loop)

src/App.tsx

@@ -2,16 +2,22 @@ import React from 'react'
 import Main from './components/main'
 import Navbar from './components/navbar'
 import InfogramBelowMain from './components/infobelowmain'
+import { HashRouter } from './components/HashRouter'
+import Route from './components/HashRouter/Route'
+import AboutPage from './components/AboutPage'
 // import logo from './logo.svg';
 // import './App.css';
 
 function App () {
   return (
-    <div style={{ zIndex: 9999 }}>
+   <HashRouter>
+     <Route path={"#/"} index component={<div style={{ zIndex: 9999 }}>
       <Main />
       <InfogramBelowMain />
       <br />
-    </div>
+    </div>}/>
+    <Route path='#/about' component={<AboutPage />}/>
+   </HashRouter>
   )
 }
 

src/assets/icons/folder_cloud.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+	<g fill="none" stroke-linecap="round" stroke-linejoin="round">
+		<path stroke="#cdd6f4" d="M4.5 4.5H12c.83 0 1.5.67 1.5 1.5v.5m-7.5 7H2A1.5 1.5 0 01.5 12V3.5a1 1 0 011-1h5a1 1 0 011 1v1" />
+		<path stroke="#89dceb" d="M7.5 12.429c0-1.142.834-2.068 1.863-2.068.157-.813.717-1.477 1.47-1.741a2.15 2.15 0 012.177.461c.596.55.865 1.388.708 2.2h.396c.766 0 1.386.72 1.386 1.61 0 .888-.62 1.608-1.386 1.608H9.363c-1.029-.002-1.863-.928-1.863-2.07" />
+	</g>
+</svg>

src/assets/icons/folder_cloud_open.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+	<g fill="none" stroke-linecap="round" stroke-linejoin="round">
+		<path stroke="#cdd6f4" d="m1.87 8 .7-2.74a1 1 0 01.96-.76h10.94a1 1 0 01.97 1.24l-.219.875M6 13.5H2A1.5 1.5 0 01.5 12V3.5a1 1 0 011-1h5a1 1 0 011 1v1" />
+		<path stroke="#89dceb" d="M7.5 12.429c0-1.142.834-2.068 1.863-2.068.157-.813.717-1.477 1.47-1.741a2.15 2.15 0 012.177.461c.596.55.865 1.388.708 2.2h.396c.766 0 1.386.72 1.386 1.61 0 .888-.62 1.608-1.386 1.608H9.363c-1.029-.002-1.863-.928-1.863-2.07" />
+	</g>
+</svg>

src/components/AboutPage/Github.tsx

@@ -0,0 +1,16 @@
+export default function GithubStats() {
+    return <div>
+          <h1 className='project-heading font-bold text-2xl ' style={{ paddingBottom: '20px' }}>
+        Days I <strong className='text-highlight'>Code</strong>
+      </h1>
+      {/* <GitHubCalendar
+        username={config.github_username}
+        blockSize={15}
+        blockMargin={5}
+        color="#c084f5"
+        fontSize={16}
+      /> */}
+      {/* svg from git, updated every 3 hours */}
+      <img src='https://raw.githubusercontent.com/NeonGamerBot-QK/NeonGamerBot-QK/output/github-contribution-grid-snake.svg' />
+    </div>
+}

src/components/AboutPage/SkillSet.tsx

@@ -0,0 +1,6 @@
+import "./skillset.css"
+export default function SkillSet() {
+    return <div  style={{ justifyContent: 'center', paddingBottom: '50px' }} >
+        
+    </div>
+}

src/components/AboutPage/index.tsx

@@ -0,0 +1,52 @@
+import { mdiBullet } from "@mdi/js";
+import Icon from "@mdi/react";
+
+export default function AboutPage() {
+    return <div className={'hero min-h-screen'}>
+   <div className="container">
+    <h1 className="font-bold text-3xl">
+Some info about <span className='text-highlight'>me</span>
+    </h1>
+    <div>
+    <blockquote className='blockquote mb-0'>
+          <p style={{ textAlign: 'justify' }}>
+            Hi Everyone, I am{' '}
+            <span className='text-highlight  '>Saahil dutta, </span>
+            from <span className='text-highlight '> USA </span>
+            <br />I am a 9th grader in KCD.
+            <br />
+            <br />
+            Apart from coding, some other activities that I love to do!
+          </p>
+          <ul>
+            <li className='about-activity'>
+              <Icon path={mdiBullet} className='inline-block'size={1} /> Playing Games
+            </li>
+            <li className='about-activity'>
+            <Icon path={mdiBullet} className='inline-block' size={1} /> Eating different types of food
+            </li>
+            {/* <li className="about-activity">
+              <ImPointRight className="inline-block"/> Traveling
+            </li> */}
+            <li className='about-activity'>
+            <Icon path={mdiBullet} className='inline-block' size={1} /> Swimming
+            </li>
+          </ul>
+      
+<blockquote className="ml-10 text-xl italic font-semibold text-gray-900 dark:text-white" style={{ color: "var(--text)"}}>
+    <svg className="w-8 h-8 text-gray-400 dark:text-gray-600 mb-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 14">
+        <path d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z"/>
+    </svg>
+    <p className='ml-5 hover:text-fuchsia-600 ease-linear duration-700 text-fuchsia-500 first-letter:font-2xl'>
+            "It has become appallingly obvious that our technology has exceeded
+            our humanity."{' '}
+          </p>
+          <footer className='ml-8 blockquote-footer ' style={{ color: "var(--subtext0)"}}>
+            - Albert Einstein
+          </footer>
+</blockquote>
+        </blockquote>
+    </div>
+   </div>
+    </div>
+}

src/components/AboutPage/skillset.css

@@ -0,0 +1,31 @@
+.tech-icons {
+    font-size: 4.5em !important;
+    margin: 15px !important;
+    padding: 10px !important;
+    opacity: 0.93 !important;
+    border: 1.7px solid rgba(200, 137, 230, 0.637) !important;
+    vertical-align: middle !important;
+    text-align: center !important;
+    border-radius: 5px !important;
+    display: table !important;
+    box-shadow: 4px 5px 4px 3px rgba(89, 4, 168, 0.137) !important;
+    overflow: hidden !important;
+    transition: all 0.4s ease 0s !important;
+  }
+  
+  @media (max-width: 767px) {
+    .tech-icons {
+      margin: 10px !important;
+    }
+  }
+  
+  .tech-icons:hover {
+    transform: scale(1.05) !important;
+    overflow: hidden !important;
+    border: 2.2px solid rgba(197, 115, 230, 0.883) !important;
+  }
+  .tech-icon-images {
+    padding: 20px !important;
+    line-height: 1.6 !important;
+  }
+  

src/components/HashRouter/Route.tsx

@@ -0,0 +1,8 @@
+export default function Route({ path, component, index }:{
+    path: string,
+    component: any,
+    index?: Boolean
+}) {
+
+    return <></>;
+}

src/components/HashRouter/index.tsx

@@ -0,0 +1,15 @@
+// writing my own hashRouter 
+
+export function HashRouter({ children }: any) {
+    console.log(children)
+    if(!Array.isArray(children)) children = [children]
+    debugger;
+  const child = children.find((child:any) => {
+console.log('script', child.props, window.location.hash, child.props.route == window.location.hash, (window.location.hash.length < 2 && child.props.index))    
+  return  child.props.path == window.location.hash || (window.location.hash.length < 2 && child.props.index)
+})
+  console.log('child', child)
+    if(child) return child.props.component;
+  return null;
+}
+export * from "./Route"

src/components/navbar/index.tsx

@@ -1,9 +1,12 @@
 import "./nav.css"
+import Icon from '@mdi/react';
+import CustomIcon from "../static/Icons"
+import { mdiAccountCircle, mdiAccountBox } from '@mdi/js';
 function NavLinks() {
 return <>
-<li><a>About</a></li>
-        <li><a>Projects</a></li>
-<li><a>Contact</a></li>
+<li><a href="#/about"><Icon path={mdiAccountCircle} size={1} color={"var(--mauve)"}/> About</a></li>
+        <li><a href="#/projects"><CustomIcon icon={window.location.hash === "#/projects" ? "CloudFolderOpen" : "CloudFolder" }/> Projects</a></li>
+<li><a href="#/contact"><Icon path={mdiAccountBox} size={1} color={"var(--mauve)"}/> Contact</a></li>
 </>
 }
 export default function Navbar() {
@@ -17,7 +20,7 @@ export default function Navbar() {
        <NavLinks />
       </ul>
       </div>
-      <a className="btn btn-ghost text-xl">saahild.com</a>
+      <a className="btn btn-ghost text-xl" href="#">saahild.com</a>
     
       <div className="navbar-center hidden lg:flex">
       <ul className="menu menu-horizontal px-1 nav-links">

src/components/static/Icons.tsx

@@ -4,13 +4,17 @@ import reactjs from "../../assets/icons/reactjs.svg"
 import nodejs from "../../assets/icons/nodejs.svg"
 import typescript from "../../assets/icons/typescript.svg"
 import javascript from "../../assets/icons/javascript.svg"
+import CloudFolder from "../../assets/icons/folder_cloud.svg"
+import CloudFolderOpen from "../../assets/icons/folder_cloud_open.svg"
 const icons:any = {
     "css": cssIcon,
     "html": htmlIcon,
     "reactjs": reactjs,
     "nodejs":    nodejs,
     "typescript": typescript,
-    javascript
+    javascript,
+    CloudFolder,
+    CloudFolderOpen
 }
 export default function Icon({ icon, className }: { icon: string, className?: string }) {
     return <img  src={icons[icon]} className={"inline-flex hover:scale-125 duration-500 linear " + (className ?? "")} />

src/index.tsx

@@ -8,12 +8,14 @@ import Background from './bg/main';
 import { injectOneko } from './scripts/oneko';
 import Navbar from './components/navbar';
 import { runTitle } from './scripts/title';
+import { startEvent } from './scripts/hashevent';
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 document.title = "Saahild.com"
 injectOneko();
 runTitle()
+startEvent()
 document.title = 'React App';
 root.render(
   <React.StrictMode>

src/scripts/hashevent.ts

@@ -0,0 +1,25 @@
+let interId:any = null
+function hashEvent() {
+window.location.reload() // ;-;
+}
+export function startEvent() {
+    if ("onhashchange" in window) {
+        window.addEventListener('hashchange', hashEvent)
+   }
+   else {
+    //@ts-ignore
+       var prevHash = window.location.hash;
+       //@ts-ignore
+    interId = window.setInterval(function () {
+          if (window.location.hash != prevHash) {
+         hashEvent()
+          }
+       }, 100);
+   }
+
+}
+
+export function stopEvent() {
+    if(interId) clearInterval(interId)
+        window.removeEventListener('hashchange', hashEvent)
+}

src/scripts/title.ts

@@ -1,5 +1,7 @@
 let title0: null | string = null
 let interId: any = null
+const isDev = process.env.NODE_ENV !== 'production'
+
 export function runTitle() {
     if(interId) clearInterval(interId)
    interId =  setInterval(() => {
@@ -12,7 +14,7 @@ export function runTitle() {
           window.document.documentElement.style.filter = ""
         } else {
           document.title = 'Come Back :('
-          window.document.documentElement.style.filter = "blur(30px)"
+if(!isDev)          window.document.documentElement.style.filter = "blur(30px)"
         }
       }, 200)