chore: add 404 page

janleigh · Dec 8, 2023 · df519c6 · df519c6
1 parent 2ad1486
commit df519c6
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -9,10 +9,10 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
 		<meta name="theme-color" content="#272727" />
 
-		<meta property="og:title" content="Jan Leigh Muñoz | Full-Stack Developer"/>
+		<meta property="og:title" content="Jan Leigh Muñoz ~ Portfolio"/>
 		<meta property="og:description" content="student and (idiotic) full-stack developer."/>
 
-		<title>Jan Leigh Muñoz | Full-Stack Developer</title>
+		<title>Jan Leigh's Portfolio</title>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -2,7 +2,7 @@ export function Footer() {
 	return (
 		<div id="footer" className="fixed bottom-8 flex w-11/12 justify-center">
 			<div className="mx-auto flex justify-start">
-				<span className="text-verdant-fg py-4">
+				<span className="py-4 text-verdant-fg">
 					© 2023 <span className="text-verdant-blue">Jan Leigh Muñoz</span>. All Rights Reserved.
 				</span>
 			</div>

diff --git a/src/components/MainContainer.tsx b/src/components/MainContainer.tsx
@@ -1,19 +1,19 @@
 export function MainContainer() {
 	return (
-		<div id="main" className="bg-verdant-bg flex w-screen justify-center">
+		<div id="main" className="flex w-screen justify-center bg-verdant-bg">
 			<div className="flex items-center justify-center">
 				<div className="mx-12">
 					<img
 						src="https://github.com/janleigh.png"
 						alt="PFP"
-						className="bg-verdant-bg-light h-60 w-60 rounded-full p-4"
+						className="h-60 w-60 rounded-full bg-verdant-bg-light p-4"
 					/>
 				</div>
 				<div className="mx-8 items-center justify-center">
-					<div className="text-verdant-fg text-3xl font-bold">
+					<div className="text-3xl font-bold text-verdant-fg">
 						Heya! I'm <span className="text-verdant-blue">Jan Leigh</span>!
 					</div>
-					<div className="text-verdant-fg-dark text-base">
+					<div className="text-base text-verdant-fg-dark">
 						I am a Filipino first-year college student and a self-taught full-stack developer.
 						<br />
 						<br />

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -2,11 +2,11 @@ export function Navbar() {
 	return (
 		<div id="navbar" className="fixed flex w-11/12 justify-center">
 			<div className="mx-auto flex justify-start">
-				<span className="text-verdant-fg py-4">
+				<span className="py-4 text-verdant-fg">
 					janleigh<span className="text-verdant-blue">.is-a.dev</span>
 				</span>
 			</div>
-			<div className="bg-verdant-bg-light mx-auto flex rounded-2xl px-2">
+			<div className="mx-auto flex rounded-2xl bg-verdant-bg-light px-2">
 				<div className="flex justify-end">
 					<div className="flex lowercase">
 						<a href="https://github.com/janleigh" target="_blank" className="p-4 text-stone-50">

diff --git a/src/main.tsx b/src/main.tsx
@@ -2,11 +2,13 @@ import ReactDOM from "react-dom";
 import { HashRouter as Router, Route, Routes } from "react-router-dom";
 
 import App from "./pages/App";
+import NotFound from "./pages/404";
 
 ReactDOM.render(
 	<Router>
 		<Routes>
 			<Route path="/" element={<App />} />
+			<Route path="*" element={<NotFound />} />
 		</Routes>
 	</Router>,
 	document.getElementById("root")

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+export function App() {
+	const [reason, setReason] = useState("Not Found.");
+
+	useEffect(() => {
+		if (window.innerWidth < 768) {
+			setReason("Screen too small.");
+		} else {
+			setReason("Not Found.");
+		}
+	}, []);
+
+	return (
+		<div id="404" className="flex h-screen w-screen justify-center bg-verdant-bg px-8 py-8">
+			<div className="flex flex-col items-center justify-center">
+				<span className="text-6xl text-verdant-fg">\(o_o)/</span>
+				<span className="my-12 text-center text-3xl text-verdant-fg-dark">
+					404.
+					<br />
+					{reason}
+				</span>
+				<span className="text-2xl text-verdant-fg-dark">
+					<a href="/" className="text-verdant-blue">
+						Back to Home
+					</a>
+				</span>
+			</div>
+		</div>
+	);
+}
+
+export default App;
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -2,12 +2,20 @@ import Footer from "../components/Footer";
 import MainContainer from "../components/MainContainer";
 import Navbar from "../components/Navbar";
 
+import NotFound from "./404";
+
 export function App() {
 	return (
-		<div id="app" className="bg-verdant-bg flex h-screen w-screen justify-center px-8 py-8">
-			<Navbar />
-			<MainContainer />
-			<Footer />
+		<div id="app" className="flex h-screen w-screen justify-center bg-verdant-bg px-8 py-8">
+			{window.innerWidth > 768 ? (
+				<>
+					<Navbar />
+					<MainContainer />
+					<Footer />
+				</>
+			) : (
+				<NotFound />
+			)}
 		</div>
 	);
 }