Added a 404 page

3 files changed, 23 insertions, 4 deletions

diff --git a/pages/404.js b/pages/404.js
new file mode 100644
index 0000000..d184449
--- /dev/null
+++ b/pages/404.js
@@ -0,0 +1,15 @@
+import Meta from '../components/meta'
+import Link from 'next/link'
+
+export default function PageError() {
+    return (
+        <>
+            <Meta title="404"/>
+            <div className="text-center font-hack font-bold flex flex-col gap-4 p-6 h-screen w-screen bg-material-gray text-white drop-shadow-lg">
+                <h1 className="text-5xl">404!</h1>
+                <h2 className="text-3xl">Looks like you have entered the void... or maybe you are lost?</h2>
+                <h2 className="text-3xl">Head back <Link href="/"><a className="link">home</a></Link> to not become lost!</h2>
+            </div>
+        </>
+    )
+}
diff --git a/pages/guidelines.js b/pages/guidelines.js
index 26b2350..5a308b7 100644
--- a/pages/guidelines.js
+++ b/pages/guidelines.js
@@ -83,10 +83,10 @@ export default function Guidelines() {
 						<h2 className="text-2xl font-bold">Threads</h2>
 						<p>Threads is a new Discord feature which allows you to make subchannels. We have set a policy to not allow to make threads with little to no value, if you made a thread in which has little to no value, it is considered to be spam and we will remove it. If caught doing it continuously, there will be consequences.</p>
 					</div>
-					<p className="mt-3">We recommend you to follow Discord&apos;s <a href="https://discord.com/terms" className="text-blue-300">Terms of Service</a> and <a href="https://discord.com/guidelines" className="text-blue-300">Community Guidelines</a></p>
+					<p className="mt-3">We recommend you to follow Discord&apos;s <a href="https://discord.com/terms" className="link">Terms of Service</a> and <a href="https://discord.com/guidelines" className="link">Community Guidelines</a></p>
 				</div>
 				<p>Last updated: October 14th, 2022</p>
-				<a href="#top" className="text-gray-300">Back to top</a>
+				<a href="#top" className="link">Back to top</a>
 			</div>
         </div>
     )
diff --git a/pages/index.js b/pages/index.js
index 69fb9be..62e7a26 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -8,6 +8,8 @@ const iconSize = "3x"
 const iconProperties = "hover:text-gray-500 transition-all ease-in-out"
 const navButton = "bg-gray-600 sm:py-4 sm:px-10 py-2 px-5 rounded-lg hover:bg-gray-400 transition ease-in-out"
 
+const isDev = process.env.NODE_ENV === 'development'
+
 export default function Home() {
   return (
     <>
@@ -24,13 +26,15 @@ export default function Home() {
                 <a href="https://instagram.com/alee14498"><FontAwesomeIcon icon={faInstagram} size={iconSize} className={iconProperties} /></a>
                 <a href="https://reddit.com/Alee1449"><FontAwesomeIcon icon={faReddit} size={iconSize} className={iconProperties} /></a>
             </div>
-            {/*<div className="flex-row font-normal space-x-3">
+            {isDev && (
+            <div className="flex-row font-normal space-x-3">
                 <Link href="#"><button className={navButton}>About Me</button></Link>
                 <Link href="#"><button className={navButton}>Projects</button></Link>
                 <Link href="#"><button className={navButton}>Blog</button></Link>
                 <Link href="#"><button className={navButton}>Downloads</button></Link>
                 <Link href="/guidelines"><button className={navButton}>Guidelines</button></Link>
-            </div> */}
+            </div>
+            )}
             <h2 className="text-lg font-normal drop-shadow-lg">Contact me at <a href="mailto:andrew@alee14.me">andrew@alee14.me</a></h2>
         </div>
     </>