404 page

src/App.tsx

@@ -8,6 +8,7 @@ import AboutPage from './components/AboutPage'
 import SkillSet from './components/AboutPage/SkillSet'
 import GithubStats from './components/AboutPage/Github'
 import Projects from './components/Projects'
+import Page404 from './components/static/404'
 // import logo from './logo.svg';
 // import './App.css';
 
@@ -25,6 +26,7 @@ function App () {
         <GithubStats />
         </>} />
         <Route path='#/projects' component={<Projects />} />
+        <Route path='*' component={<Page404 />} />
     </HashRouter>
   )
 }

src/components/HashRouter/Route.tsx

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

src/components/HashRouter/index.tsx

@@ -6,9 +6,9 @@ export function HashRouter({ children }: any) {
     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)
+  return  child.props.path == window.location.hash || (window.location.hash.length < 2 && child.props.index) || child.props.path == "*"
 })
-  console.log('child', child)
+ // console.log('child', child)
     if(child) return child.props.component;
   return null;
 }

src/components/static/404.css

@@ -0,0 +1,20 @@
+.animate-404 {
+    animation: App-logo-spin infinite 20s linear;
+}
+@keyframes App-logo-spin {
+
+    from {
+  
+      transform: rotate(0deg);
+  /* transform: translate3d(0px,0px,0px); */
+    }
+  
+    to {
+  
+      transform: rotate(360deg);
+  /* transform: translate3d(10px, 10px, 10px); */
+
+  
+    }
+  
+  }

src/components/static/404.tsx

@@ -0,0 +1,26 @@
+import Icon from "./Icons"
+import { javascriptReact } from "./icons_list"
+import "./404.css"
+import ReactParallaxTilt from "react-parallax-tilt"
+export default function Page404() {
+return <div className="hero min-h-screen">
+<div className="hero-content text-center">
+  <div className="max-w-md">
+<ReactParallaxTilt>
+  <Icon icon={javascriptReact} className='w-60 p-2 animate-404' noScale />
+</ReactParallaxTilt>
+    <h1 className="text-5xl font-bold text-highlight" >404?</h1>
+    <p className="py-6">Seems you are on the wrong page.</p>
+    <div>
+    <button className="btn mauve mr-2" style={{ background: "var(--surface0)"}} onClick={() => {
+        window.history.back()
+    }}>Go back</button>
+    <button className="btn mauve" style={{ background: "var(--surface0)"}} onClick={() => {
+        window.location.hash = "#"
+    }}>Go Home</button>
+    </div>
+
+  </div>
+</div>
+</div>
+}

src/components/static/Icons.tsx

@@ -14,6 +14,6 @@ const icons:any = {
     CloudFolderOpen: Icons.folder_cloud_open,
     ...Icons
 }
-export default function Icon({ icon, inject, className,width,height }: { icon: string, className?: string,width?:number,height?:number, inject?:boolean }) {
-    return inject ? <svg xmlns="http://www.w3.org/2000/svg" fill="var(--mauve)" className={"inline-flex hover:scale-125 duration-500 linear " + (className ?? "")}> <path d={icon}></path></svg>: <img  src={icons[icon] ? icons[icon] : icon} className={"inline-flex hover:scale-125 duration-500 linear " + (className ?? "")} width={width} height={height} />
+export default function Icon({ icon, inject, className,width,height,noScale }: { icon: string, className?: string,width?:number,height?:number, inject?:boolean, noScale?:boolean }) {
+    return inject ? <svg xmlns="http://www.w3.org/2000/svg" fill="var(--mauve)" className={"inline-flex hover:scale-125 duration-500 linear " + (className ?? "")}> <path d={icon}></path></svg>: <img  src={icons[icon] ? icons[icon] : icon} className={`inline-flex ${!noScale ? "hover:scale-125" : ""} duration-500 linear ` + (className ?? "")} width={width} height={height} />
 }