Final commit for branch

4 files changed, 34 insertions, 21 deletions

diff --git a/components/nav.js b/components/nav.js
new file mode 100644
index 0000000..7c951d6
--- /dev/null
+++ b/components/nav.js
@@ -0,0 +1,16 @@
+import Link from "next/link";
+
+const Navigation = () => {
+    return (
+        <div className="flex-row font-normal space-x-3 p-2">
+            <Link href="/about"><button className="button">About Me</button></Link>
+            <Link href="#"><button className="button">Projects</button></Link>
+            <Link href="#"><button className="button">Videos</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>
+    )
+}
+
+export default Navigation;
diff --git a/pages/about.js b/pages/about.js
index 283cfb9..85c459d 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,14 +1,16 @@
 import Meta from '../components/meta'
 import Image from "next/image";
+import Navigation from '../components/nav'
 
 export default function About() {
     return (
-        <div>
+        <div className="font-hack bg-material-gray text-white">
             <Meta title="About Me" description="About Andrew Lee"/>
-            <div className="font-hack bg-material-gray text-white px-5 py-6 flex flex-row">
+            <Navigation/>
+            <div className="px-5 py-6 flex flex-row">
                 <div className="bg-gray-600 px-10 py-5">
                     <div className="font-bold">
-                        <Image src="/Alee.png" alt="Alee Logo" width={128} height={128} />
+                        <Image src="/Alee.png" className="rounded-full object-center" alt="Alee Logo" width={128} height={128} />
                         <h1 className="text-center text-xl">Andrew Lee</h1>
                         <h2>Age: 18</h2>
                         <h2>Location: Montreal, Canada</h2>
diff --git a/pages/guidelines.js b/pages/guidelines.js
index 61bed3d..e81e2b1 100644
--- a/pages/guidelines.js
+++ b/pages/guidelines.js
@@ -1,13 +1,15 @@
 import Meta from '../components/meta'
+import Navigation from "../components/nav";
 import Image from "next/image";
 
 const policyList = "list-disc list-inside"
 
 export default function Guidelines() {
     return (
-        <div>
+        <div className="font-hack bg-material-gray text-white">
             <Meta title="Guidelines" description="Guidelines for Andrew Lee Projects Communities/Services"/>
-            <div className="font-hack bg-material-gray text-white px-5 py-6 space-y-5 flex flex-col">
+			<Navigation />
+            <div className="px-5 py-6 space-y-5 flex flex-col">
 				<div id="top"/>
 				<div className="flex flex-col text-center justify-center items-center space-y-2">
 					<Image src="/Alee.png" alt="Alee Logo" className="rounded-full" width={150} height={150} />
diff --git a/pages/index.js b/pages/index.js
index 2638535..b4c801d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,5 @@
 import Meta from '../components/meta'
-import Link from 'next/link'
+import Navigation from '../components/nav'
 import Computer from '../components/computer'
 import Image from "next/image";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -22,25 +22,18 @@ export default function Home() {
                 <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://www.linkedin.com/in/AndrewLeeCAN" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faLinkedin} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://github.alee14.me" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faGithub} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://linkedin.alee14.me" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faLinkedin} size={iconSize} className={iconProperties} /></a>
                     <a href="https://paypal.me/alee14498" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faPaypal} 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/@AndrewLeeCAN" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faYoutube} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://discord.alee14.me" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faDiscord} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://youtube.alee14.me" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faYoutube} size={iconSize} className={iconProperties} /></a>
                     <a href="https://mstdn.ca/@alee" target="_blank" rel="noopener noreferrer me"><FontAwesomeIcon icon={faMastodon} 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/u/Alee1449" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faReddit} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://twitter.alee14.me" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faTwitter} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://instagram.alee14.me" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faInstagram} size={iconSize} className={iconProperties} /></a>
+                    <a href="https://reddit.alee14.me" target="_blank" rel="noopener noreferrer"><FontAwesomeIcon icon={faReddit} size={iconSize} className={iconProperties} /></a>
                 </div>
                 {isDev && (
-                    <div className="flex-row font-normal space-x-3 p-2">
-                        <Link href="/about"><button className="button">About Me</button></Link>
-                        <Link href="#"><button className="button">Projects</button></Link>
-                        <Link href="#"><button className="button">Videos</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>
+                    <Navigation/>
                 )}
                 <h2 className="text-lg font-normal drop-shadow-lg">Contact me at <a href="mailto:andrew@alee14.me">andrew@alee14.me</a> for anything.</h2>
             </div>