Added copyright date, development message, tweaks on 404

2 files changed, 32 insertions, 22 deletions

diff --git a/pages/404.js b/pages/404.js
index d184449..9c98161 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -5,10 +5,10 @@ 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">
+            <div className="text-center font-hack font-bold flex flex-col justify-center 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>
+                <h2 className="text-3xl">Head back <Link href="/"><a className="link">home</a></Link> to not become lost</h2>
             </div>
         </>
     )
diff --git a/pages/index.js b/pages/index.js
index 62e7a26..f3370e0 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -14,29 +14,39 @@ export default function Home() {
   return (
     <>
         <Meta title="Home" description="Andrew's Personal Website" />
-        <div className="text-center font-hack font-bold flex flex-col gap-4 items-center justify-center h-screen w-screen bg-material-gray text-white drop-shadow-lg">
-            <Image src="/Alee.svg" alt="Alee Logo" width={210} height={210} />
-            <h1 className="text-4xl drop-shadow-lg">Andrew Lee</h1>
-            <h2 className="sm:text-xl text-lg drop-shadow-lg">Computer Geek, Programmer, Content Creator</h2>
-            <div className="flex-row space-x-12">
-                <a href="https://github.com/Alee14"><FontAwesomeIcon icon={faGithub} size={iconSize} className={iconProperties} /></a>
-                <a href="https://discord.gg/EFhRDqG"><FontAwesomeIcon icon={faDiscord} size={iconSize} className={iconProperties} /></a>
-                <a href="https://www.youtube.com/c/AndrewLeeCAN"><FontAwesomeIcon icon={faYoutube} size={iconSize} className={iconProperties} /></a>
-                <a href="https://twitter.com/Alee14498"><FontAwesomeIcon icon={faTwitter} size={iconSize} className={iconProperties} /></a>
-                <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="bg-material-gray font-hack text-white">
             {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 className="py-4 px-5 bg-gray-600 text-white font-bold rounded-lg"><p>You are using the development version of this site! Certain features are hidden from the public...</p></div>
+                )}
+            <div className="text-center flex flex-col gap-4 justify-center h-screen w-screen drop-shadow-lg">
+                <Image src="/Alee.svg" alt="Alee Logo" width={210} height={210} />
+                <h1 className="text-4xl drop-shadow-lg font-bold">Andrew Lee</h1>
+                <h2 className="sm:text-xl text-lg drop-shadow-lg font-bold">Computer Geek, Programmer, Content Creator</h2>
+                <div className="flex-row space-x-12 p-2">
+                    <a href="https://github.com/Alee14" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faGithub} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://discord.gg/EFhRDqG" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faDiscord} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://www.youtube.com/c/AndrewLeeCAN" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faYoutube} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://twitter.com/Alee14498" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faTwitter} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://instagram.com/alee14498" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faInstagram} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://reddit.com/Alee1449" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faReddit} size={iconSize} className={iconProperties} /></a>
+                </div>
+                {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>
+                )}
+                <h2 className="text-lg font-normal drop-shadow-lg">Contact me at <a href="mailto:andrew@alee14.me">andrew@alee14.me</a></h2>
+            </div>
+            <div className="text-center justify-center font-bold pb-5 flex flex-col space-y-3">
+                <p>&copy; Copyright 2018-2022 Andrew Lee</p>
+                <p>Created using NextJS, and Tailwind CSS. Hosted on Netlify.</p>
             </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>
+
     </>
   )
 }