added custom 404 page

basic 404 page
skyth3r · Dec 26, 2022 · 1dd845a · 1dd845a
1 parent 7674429
commit 1dd845a
Show file tree

Hide file tree

Showing 2 changed files with 295 additions and 0 deletions.
diff --git a/layouts/404.html b/layouts/404.html
@@ -0,0 +1,16 @@
+{{ define "main" }}
+
+<main class="h-screen overflow-y-auto">
+  <div class="px-6 py-20 w-full lg:w-[580px] mx-auto prose dark:prose-invert h-fit prose-img:mx-auto">
+    <br><br>    
+    <h1>404 - Page not found! 😱</h1>
+
+    <p>
+        It looks like you're lost. No worries!
+        <br>
+        <a href="/">Go back to the home page</a>.
+    </p>
+  </div>
+</main>
+
+{{ end }}
diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en" itemscope itemtype="http://schema.org/WebPage">
+<head>
+  <meta charset="utf-8" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <link rel="icon" href="/favicon.ico">
+
+  <title>
+    404 Page not found - Akash Goswami
+  </title>
+
+  <meta name="description" content="Akash Goswami&#39;s personal website" /><meta name="generator" content="Hugo 0.107.0">
+
+  <link rel="stylesheet" href="https://Skyth3r.github.io/css/main.css" />
+
+
+
+
+  <meta property="og:title" content="404 Page not found" />
+<meta property="og:description" content="Akash Goswami&#39;s personal website" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="https://Skyth3r.github.io/404.html" /><meta property="og:image" content="https://raw.githubusercontent.com/skyth3r/skyth3r.github.io/master/assets/akashgoswami.png"/>
+
+
+
+  <meta name="twitter:card" content="summary_large_image"/>
+<meta name="twitter:image" content="https://raw.githubusercontent.com/skyth3r/skyth3r.github.io/master/assets/akashgoswami.png"/>
+
+<meta name="twitter:title" content="404 Page not found"/>
+<meta name="twitter:description" content="Akash Goswami&#39;s personal website"/>
+
+
+  <meta itemprop="name" content="404 Page not found">
+<meta itemprop="description" content="Akash Goswami&#39;s personal website">
+
+  <meta itemprop="name" content="404 Page not found">
+<meta itemprop="description" content="Akash Goswami&#39;s personal website">
+</head><body class="flex relative h-full min-h-screen"><aside
+  class="will-change-transform transform transition-transform -translate-x-full absolute top-0 left-0 md:relative md:translate-x-0 w-3/4 md:w-60 h-full min-h-screen p-3 bg-slate-50 dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 flex flex-col gap-2.5 z-20 sidebar">
+  <p class="font-bold mb-5 flex items-center gap-2">
+    <button aria-label="Close sidebar"
+      class="md:hidden menu-trigger-close p-1 rounded text-slate-800 dark:text-slate-50 hover:bg-slate-200 dark:hover:bg-slate-700"><svg class="h-6 w-6" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+  fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <line x1="18" y1="6" x2="6" y2="18" />
+  <line x1="6" y1="6" x2="18" y2="18" />
+</svg></button>
+    <a href="https://Skyth3r.github.io" class="px-2">
+      <span>Akash Goswami</span>
+    </a>
+    <button aria-label="Toggle dark mode"
+      class="dark-mode-toggle p-2 rounded border dark:border-slate-700 hover:bg-slate-200 dark:hover:bg-slate-700"><svg class="h-4 w-4" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+  fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <circle cx="12" cy="12" r="4" />
+  <path d="M3 12h1M12 3v1M20 12h1M12 20v1M5.6 5.6l.7 .7M18.4 5.6l-.7 .7M17.7 17.7l.7 .7M6.3 17.7l-.7 .7" />
+</svg></button>
+  </p>
+
+
+  <ul class="list-none flex flex-col gap-1">
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm flex items-center justify-between  hover:bg-slate-200 dark:hover:bg-slate-700 "
+        href="/" >
+        <span>Home</span>
+
+      </a>
+    </li>
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm flex items-center justify-between  text-slate-400 font-semibold pb-0 pl-1 border-b cursor-default pointer-events-none "
+        href="#" >
+        <span>Content</span>
+
+      </a>
+    </li>
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm flex items-center justify-between  hover:bg-slate-200 dark:hover:bg-slate-700 "
+        href="/articles" >
+        <span>Articles</span>
+
+      </a>
+    </li>
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm flex items-center justify-between  hover:bg-slate-200 dark:hover:bg-slate-700 "
+        href="/tools" >
+        <span>Tools</span>
+
+      </a>
+    </li>
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm flex items-center justify-between  text-slate-400 font-semibold pb-0 pl-1 border-b cursor-default pointer-events-none "
+        href="#" >
+        <span>Links</span>
+
+      </a>
+    </li>
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm flex items-center justify-between  hover:bg-slate-200 dark:hover:bg-slate-700 "
+        href="https://typefully.com/akashgoswami_"  target="_blank"
+        rel="noopener" >
+        <span>Typefully</span>
+
+        <span><svg class="h-4 w-4" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+  fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+  <line x1="10" y1="14" x2="20" y2="4" />
+  <polyline points="15 4 20 4 20 9" />
+</svg></span>
+
+      </a>
+    </li>
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm flex items-center justify-between  hover:bg-slate-200 dark:hover:bg-slate-700 "
+        href="https://www.polywork.com/akash"  target="_blank"
+        rel="noopener" >
+        <span>Polywork</span>
+
+        <span><svg class="h-4 w-4" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+  fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+  <line x1="10" y1="14" x2="20" y2="4" />
+  <polyline points="15 4 20 4 20 9" />
+</svg></span>
+
+      </a>
+    </li>
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm flex items-center justify-between  hover:bg-slate-200 dark:hover:bg-slate-700 "
+        href="https://www.getrevue.co/profile/akashandmoney"  target="_blank"
+        rel="noopener" >
+        <span>Subscribe to Akash &amp; Money</span>
+
+        <span><svg class="h-4 w-4" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+  fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+  <line x1="10" y1="14" x2="20" y2="4" />
+  <polyline points="15 4 20 4 20 9" />
+</svg></span>
+
+      </a>
+    </li>
+
+  </ul>
+
+  <div class="flex-1"></div>
+
+
+
+  <ul class="list-none flex flex-wrap justify-center gap-1 pt-2 border-t border-slate-200 dark:border-slate-600">
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm block text-slate-800 dark:text-slate-50  hover:bg-slate-200 dark:hover:bg-slate-700 "
+        href="https://twitter.com/akashgoswami_" target="_blank" rel="noopener noreferrer">
+        <span class="sr-only">Twitter</span>
+
+        <span><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+  stroke-linecap="round" stroke-linejoin="round">
+  <path
+    d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
+</svg></span>
+
+      </a>
+    </li>
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm block text-slate-800 dark:text-slate-50  hover:bg-slate-200 dark:hover:bg-slate-700 "
+        href="https://github.com/Skyth3r" target="_blank" rel="noopener noreferrer">
+        <span class="sr-only">GitHub</span>
+
+        <span><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+  stroke-linecap="round" stroke-linejoin="round">
+  <path
+    d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
+</svg></span>
+
+      </a>
+    </li>
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm block text-slate-800 dark:text-slate-50  hover:bg-slate-200 dark:hover:bg-slate-700 "
+        href="https://mastodon.world/@akashgoswami" target="_blank" rel="noopener noreferrer">
+        <span class="sr-only">Mastodon</span>
+
+        <span><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+  stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21.6,13.9c-0.3,1.5-2.6,3.2-5.3,3.5c-1.4,0.2-2.8,0.3-4.3,0.3C9.6,17.5,7.7,17,7.7,17c0,0.2,0,0.5,0,0.7 c0.3,2.4,2.4,2.5,4.3,2.6c2,0.1,3.7-0.5,3.7-0.5l0.1,1.8c0,0-1.4,0.7-3.8,0.9c-1.3,0.1-3,0-4.9-0.5c-4.2-1.1-4.9-5.6-5-10.1 C2,10.4,2,9.1,2,8c0-4.7,3-6,3-6C6.6,1.3,9.2,1,12,1H12c2.7,0,5.4,0.3,6.9,1c0,0,3,1.4,3,6C22,8,22,11.5,21.6,13.9"/>
+  <path d="M6.7,13.7c0,0,0-4.3,0-5.4c0-1.6,1.1-2.5,2.7-2.5c1.8,0,2.6,1.5,2.6,3c0,0.9,0,2.6,0,2.6"/>
+  <path d="M17.3,13.7c0,0,0-4.3,0-5.4c0-1.6-1.1-2.5-2.7-2.5c-1.8,0-2.6,1.5-2.6,3c0,0.9,0,2.6,0,2.6"/>
+</svg></span>
+
+      </a>
+    </li>
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm block text-slate-800 dark:text-slate-50  hover:bg-slate-200 dark:hover:bg-slate-700 "
+        href="mailto:akash@akashgoswami.com" target="_blank" rel="noopener noreferrer">
+        <span class="sr-only">Email</span>
+
+        <span><svg class="h-4 w-4" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+  fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <rect x="3" y="5" width="18" height="14" rx="2" />
+  <polyline points="3 7 12 13 21 7" />
+</svg></span>
+
+      </a>
+    </li>
+
+    <li>
+      <a class="px-2 py-1.5 rounded-md text-sm block text-slate-800 dark:text-slate-50  hover:bg-slate-200 dark:hover:bg-slate-700 "
+        href="/articles/index.xml" target="_blank" rel="noopener noreferrer">
+        <span class="sr-only">RSS</span>
+
+        <span><svg class="h-4 w-4" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+  fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <circle cx="5" cy="19" r="1" />
+  <path d="M4 4a16 16 0 0 1 16 16" />
+  <path d="M4 11a9 9 0 0 1 9 9" />
+</svg></span>
+
+      </a>
+    </li>
+
+  </ul>
+</aside>
+
+<div
+  class="fixed bg-slate-700 bg-opacity-5 transition duration-200 ease-in-out inset-0 z-10 pointer-events-auto md:hidden left-0 top-0 w-full h-full hidden menu-overlay">
+</div>
+
+<button aria-label="Toggle Sidebar"
+  class="md:hidden absolute top-3 left-3 z-10 menu-trigger p-1 rounded text-slate-800 dark:text-slate-50 hover:bg-slate-100"><svg class="h-6 w-6" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+  fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" />
+  <line x1="4" y1="6" x2="20" y2="6" />
+  <line x1="4" y1="12" x2="20" y2="12" />
+  <line x1="4" y1="18" x2="16" y2="18" />
+</svg></button>
+<div class="flex-1">
+
+<main class="h-screen overflow-y-auto">
+  <div class="px-6 py-20 w-full lg:w-[580px] mx-auto prose dark:prose-invert h-fit prose-img:mx-auto">
+    <br><br>    
+    <h1>404 - Page not found! 😱</h1>
+
+    <p>
+        It looks like you're lost. No worries!
+        <br>
+        <a href="/">Go back to the home page</a>.
+    </p>
+  </div>
+</main>
+
+
+  </div>
+<script type="text/javascript" src="/main.js" defer></script>
+
+
+<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
+  <script>
+  	new Snowflakes();
+	</script>
+</body>
+
+</html>