Add 404.html

guicheffer · Sep 26, 2024 · f1cf98b · f1cf98b
1 parent e603296
commit f1cf98b
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "email": "joao@guicheffer.me"
   },
   "scripts": {
-    "dev": "open http://localhost:3000 && http-serve ./src -p 3000",
+    "dev": "open http://localhost:3000 && http-serve ./src -p 3000 -P ./src/404.html",
     "s3": "",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

diff --git a/src/404.html b/src/404.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#663399">
+    <script src="https://kit.fontawesome.com/8f33886f78.js" crossorigin="anonymous"></script>
+
+    <title>404 - Page Not Found</title>
+
+    <script async="true" src="https://www.googletagmanager.com/gtag/js?id=G-ZD8LXGMM14"></script>
+    <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-ZD8LXGMM14');</script>
+
+    <link rel="icon" type="image/png" href="/assets/images/favicon.png">
+    <link rel="stylesheet" href="/style.css">
+    <script defer src="/script.js"></script>
+</head>
+<body>
+    <div class="container">
+        <aside id="sidebar">
+            <div class="profile-pic">
+                <img src="/assets/images/me-big-main-rounded.png" alt="João Guilherme">
+            </div>
+            <nav>
+                <ul>
+                    <li><a title="about me" href="/">about</a></li>
+                    <li><a title="see my skills" href="/skills">skills</a></li>
+                    <li><a aria-disabled="true" class="disabled" href="#">blog</a></li>
+                </ul>
+            </nav>
+        </aside>
+
+        <main>
+            <header>
+                <button class="menu-toggle" id="menu-toggle">&#9776;</button>
+            </header>
+
+            <h1>Oops! Page Not Found</h1>
+            <p>Sorry, it seems like the page you're looking for doesn't exist.</p>
+            <p>But don't worry, you can always go back to <a href="/">the home page</a> or check out my <a href="/skills">skills</a>.</p>
+
+            <br/>
+
+            <div class="error-illustration">
+                <i class="fas fa-ghost fa-10x" style="color:#663399;"></i>
+            </div>
+
+            <br/>
+            <br/>
+            <hr/>
+            <br/>
+
+            <h2>Here are some helpful links:</h2>
+            <ul class="skills">
+              <li><a href="/">Go to Home</a></li>
+              <li><a href="/skills">See My Skills</a></li>
+              <li><a href="mailto:hi@guicheffer.me">Contact Me</a></li>
+            </ul>
+        </main>
+    </div>
+</body>
+</html>