Skip to content

Commit df519c6

Browse files
janleighjanleigh
committed
chore: add 404 page
1 parent 2ad1486 commit df519c6

File tree

7 files changed

+56
-13
lines changed

7 files changed

+56
-13
lines changed

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
1010
<meta name="theme-color" content="#272727" />
1111

12-
<meta property="og:title" content="Jan Leigh Muñoz | Full-Stack Developer"/>
12+
<meta property="og:title" content="Jan Leigh Muñoz ~ Portfolio"/>
1313
<meta property="og:description" content="student and (idiotic) full-stack developer."/>
1414

15-
<title>Jan Leigh Muñoz | Full-Stack Developer</title>
15+
<title>Jan Leigh's Portfolio</title>
1616
</head>
1717
<body>
1818
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/components/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export function Footer() {
22
return (
33
<div id="footer" className="fixed bottom-8 flex w-11/12 justify-center">
44
<div className="mx-auto flex justify-start">
5-
<span className="text-verdant-fg py-4">
5+
<span className="py-4 text-verdant-fg">
66
© 2023 <span className="text-verdant-blue">Jan Leigh Muñoz</span>. All Rights Reserved.
77
</span>
88
</div>

‎src/components/MainContainer.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
export function MainContainer() {
22
return (
3-
<div id="main" className="bg-verdant-bg flex w-screen justify-center">
3+
<div id="main" className="flex w-screen justify-center bg-verdant-bg">
44
<div className="flex items-center justify-center">
55
<div className="mx-12">
66
<img
77
src="https://github.com/janleigh.png"
88
alt="PFP"
9-
className="bg-verdant-bg-light h-60 w-60 rounded-full p-4"
9+
className="h-60 w-60 rounded-full bg-verdant-bg-light p-4"
1010
/>
1111
</div>
1212
<div className="mx-8 items-center justify-center">
13-
<div className="text-verdant-fg text-3xl font-bold">
13+
<div className="text-3xl font-bold text-verdant-fg">
1414
Heya! I'm <span className="text-verdant-blue">Jan Leigh</span>!
1515
</div>
16-
<div className="text-verdant-fg-dark text-base">
16+
<div className="text-base text-verdant-fg-dark">
1717
I am a Filipino first-year college student and a self-taught full-stack developer.
1818
<br />
1919
<br />

‎src/components/Navbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ export function Navbar() {
22
return (
33
<div id="navbar" className="fixed flex w-11/12 justify-center">
44
<div className="mx-auto flex justify-start">
5-
<span className="text-verdant-fg py-4">
5+
<span className="py-4 text-verdant-fg">
66
janleigh<span className="text-verdant-blue">.is-a.dev</span>
77
</span>
88
</div>
9-
<div className="bg-verdant-bg-light mx-auto flex rounded-2xl px-2">
9+
<div className="mx-auto flex rounded-2xl bg-verdant-bg-light px-2">
1010
<div className="flex justify-end">
1111
<div className="flex lowercase">
1212
<a href="https://github.com/janleigh" target="_blank" className="p-4 text-stone-50">

‎src/main.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import ReactDOM from "react-dom";
22
import { HashRouter as Router, Route, Routes } from "react-router-dom";
33

44
import App from "./pages/App";
5+
import NotFound from "./pages/404";
56

67
ReactDOM.render(
78
<Router>
89
<Routes>
910
<Route path="/" element={<App />} />
11+
<Route path="*" element={<NotFound />} />
1012
</Routes>
1113
</Router>,
1214
document.getElementById("root")

‎src/pages/404.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { useState, useEffect } from "react";
2+
3+
export function App() {
4+
const [reason, setReason] = useState("Not Found.");
5+
6+
useEffect(() => {
7+
if (window.innerWidth < 768) {
8+
setReason("Screen too small.");
9+
} else {
10+
setReason("Not Found.");
11+
}
12+
}, []);
13+
14+
return (
15+
<div id="404" className="flex h-screen w-screen justify-center bg-verdant-bg px-8 py-8">
16+
<div className="flex flex-col items-center justify-center">
17+
<span className="text-6xl text-verdant-fg">\(o_o)/</span>
18+
<span className="my-12 text-center text-3xl text-verdant-fg-dark">
19+
404.
20+
<br />
21+
{reason}
22+
</span>
23+
<span className="text-2xl text-verdant-fg-dark">
24+
<a href="/" className="text-verdant-blue">
25+
Back to Home
26+
</a>
27+
</span>
28+
</div>
29+
</div>
30+
);
31+
}
32+
33+
export default App;

‎src/pages/App.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,20 @@ import Footer from "../components/Footer";
22
import MainContainer from "../components/MainContainer";
33
import Navbar from "../components/Navbar";
44

5+
import NotFound from "./404";
6+
57
export function App() {
68
return (
7-
<div id="app" className="bg-verdant-bg flex h-screen w-screen justify-center px-8 py-8">
8-
<Navbar />
9-
<MainContainer />
10-
<Footer />
9+
<div id="app" className="flex h-screen w-screen justify-center bg-verdant-bg px-8 py-8">
10+
{window.innerWidth > 768 ? (
11+
<>
12+
<Navbar />
13+
<MainContainer />
14+
<Footer />
15+
</>
16+
) : (
17+
<NotFound />
18+
)}
1119
</div>
1220
);
1321
}

0 commit comments

Comments
 (0)