Added more info in the footer

4 files changed, 23 insertions, 17 deletions

diff --git a/package.json b/package.json
index e5ba324..24b9883 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build && next export",
-    "start": "next start",
+    "start": "next build && next start",
     "lint": "next lint"
   },
   "dependencies": {
diff --git a/pages/index.js b/pages/index.js
index f3370e0..604f9bd 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,8 +5,7 @@ import Image from "next/image";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faYoutube, faTwitter, faDiscord, faGithub, faReddit, faInstagram } from '@fortawesome/free-brands-svg-icons'
 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 iconProperties = "hover:text-gray-700 transition-all ease-in-out"
 
 const isDev = process.env.NODE_ENV === 'development'
 
@@ -14,15 +13,15 @@ export default function Home() {
   return (
     <>
         <Meta title="Home" description="Andrew's Personal Website" />
-        <div className="bg-material-gray font-hack text-white">
+        <div className="bg-material-gray font-hack text-white overflow-hidden">
             {isDev && (
-                <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="py-4 px-5 bg-gray-600 font-bold rounded-lg border-2 border-white"><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">
+            <div className="text-center flex flex-col gap-4 justify-center h-screen w-screen">
                 <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">
+                <h1 className="text-4xl font-bold">Andrew Lee</h1>
+                <h2 className="sm:text-xl text-lg font-bold">Computer Geek, Programmer, Content Creator</h2>
+                <div className="sm:scale-100 scale-75 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>
@@ -31,19 +30,21 @@ export default function Home() {
                     <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 className="flex-row font-normal space-x-3 p-2">
+                        <Link href="#"><button className="button">About Me</button></Link>
+                        <Link href="#"><button className="button">Projects</button></Link>
+                        <Link href="#"><button className="button">Blog</button></Link>
+                        <Link href="#"><button className="button">Downloads</button></Link>
+                        <Link href="/guidelines"><button className="button">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>
+                <p>Created using <a href="https://nextjs.org" className="link" target="_blank" rel="noopener noreferrer">Next.js</a>, and <a href="https://tailwindcss.com" className="link" target="_blank" rel="noopener noreferrer">Tailwind CSS</a>. Hosted on <a href="https://www.netlify.com" className="link" target="_blank" rel="noopener noreferrer">Netlify</a>.</p>
+	  	<p>This website is licensed under the <a href="https://www.gnu.org/licenses/gpl-3.0.en.html" className="link">GNU General Public License v3</a></p>
+	  	<p className="link"><a href="https://github.com/Alee14/personal-website">The source code of this website is publicly available.</a></p>
             </div>
         </div>
 
diff --git a/styles/globals.css b/styles/globals.css
index 62b5694..1a800d7 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -28,6 +28,10 @@
 
 @layer components {
     .link {
-        @apply text-blue-600 hover:text-blue-300
+        @apply text-blue-500 hover:text-blue-300 active:text-blue-100
+    }
+
+    .button {
+        @apply bg-btn-gray sm:py-4 sm:px-10 py-2 px-5 rounded-lg hover:bg-gray-700 transition ease-in-out hover:border-2 hover:border-white active:bg-gray-300 hover:scale-95 active:scale-75 shadow-lg
     }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index ea8fdce..70c4b45 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,7 @@ module.exports = {
     extend: {
       colors: {
         'material-gray': '#212121',
+        'btn-gray': '#575757',
       }
     },
   },