Added Navbar and Footer

next.config.js

@@ -4,7 +4,10 @@ const nextConfig = {
   output: 'export',
   poweredByHeader: false,
   reactStrictMode: true,
-  swcMinify: true
+  swcMinify: true,
+  images: { 
+    unoptimized: true
+  }
 }
 
 module.exports = nextConfig

src/app/about/page.tsx

@@ -1,6 +1,8 @@
 import Link from 'next/link'
 import 'animate.css'
 import { Box } from '@mui/system';
+import Navbar from '../../components/Navbar';
+import Footer from '../../components/Footer';
 
 let page = "About"
 
@@ -11,6 +13,7 @@ export const metadata = {
 export default function About() {
   return (
       <main>
+        <Navbar />
         <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" minHeight="90vh">
           <Box display="flex" flexDirection="row">
             <h1 className='title animate__animated animate__backInDown'>
@@ -24,8 +27,12 @@ export default function About() {
             <h2 className='subtitle animate__animated animate__fadeInUp animate__delay-2s'>
               Hi, I&#39;m AndrewDragon
             </h2>
+            <p className='maintext'>
+              I&#39;m a Content Creator and Developer. I&#39;m passionate about creating content and sharing my knowledge with the world. Most of my projects can be found on <Link className='highlightedLink' href="https://www.dragonaere.com/">Dragonaere Enterprises</Link>. I also have a <Link className='highlightedLink' href="https://www.youtube.com/c/AndrewDragon">YouTube Channel</Link> where I post videos about my projects and other things I&#39;m passionate about. If you want to find me on any other platform, take a look at <Link className='highlightedLink' href="/links">My Socials</Link>.
+            </p>
           </Box>
         </Box>
+        <Footer />
       </main>
   )
 }

src/app/globals.css

@@ -6,6 +6,11 @@ body {
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
+.maintext {
+  padding: 0 20%;
+  font-size: 1.1rem;
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -24,6 +29,21 @@ a {
   text-align: center;
 }
 
+.navbar {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 100vw;
+  width: 100%;;
+}
+
+.navbar-image {
+  display: flex;
+  flex-direction: row;
+}
+
 .head {
   display: flex;
   flex-direction: row;
@@ -64,7 +84,7 @@ a {
 
 .linksbox {
   display: grid;
-  grid-template-columns: repeat(2, 320px);
+  grid-template-columns: repeat(2, 360px);
   grid-template-rows: 1fr;
   justify-content: center;
   align-items: center;
@@ -77,6 +97,10 @@ a {
   text-align: center;
 }
 
+.highlightedLink {
+  color: #F46904;
+}
+
 .links a {
   padding: 1.5rem 5rem;
   display: inline-block;
@@ -86,6 +110,18 @@ a {
   color: #F46904;
 }
 
+.footer {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  height: 32px;
+  width: 100%;
+  font-size: 1rem;
+}
+
 @media (max-width: 600px) {
   .grid {
     width: 100%;

src/app/links/page.tsx

@@ -2,6 +2,8 @@ import Link from 'next/link'
 import type { Route } from 'next';
 import 'animate.css'
 import { Box } from '@mui/system';
+import Navbar from '../../components/Navbar';
+import Footer from '../../components/Footer';
 
 let page = "Links"
 
@@ -12,6 +14,7 @@ export const metadata = {
 export default function Links() {
   return (
     <main>
+      <Navbar />
       <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" minHeight="90vh">
         <Box display="flex" flexDirection="row">
           <h1 className='title animate__animated animate__backInDown'>
@@ -69,6 +72,7 @@ export default function Links() {
           </Box>
         </Box>
       </Box>
+      <Footer />
     </main>
   )
 }

src/app/page.tsx

@@ -1,10 +1,13 @@
 import Link from 'next/link'
 import { Box } from '@mui/system';
 import 'animate.css'
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
 
 export default function Home() {
   return (
     <main>
+      <Navbar />
       <Box className='main'>
         <Box className='head'>
           <h1 className='title animate__animated animate__backInDown'>
@@ -32,6 +35,7 @@ export default function Home() {
           </Box>
         </Box>
       </Box>
+      <Footer />
     </main>
   )
 }

src/components/Footer.tsx

@@ -0,0 +1,9 @@
+// import Image from 'next/image'
+
+export default function Footer() {
+  return (
+    <footer className="footer">
+      <p>© 2024 Dragonaere Enterprises</p>
+    </footer>
+  )
+}

src/components/Navbar.tsx

@@ -0,0 +1,12 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default async function Navbar() {
+  return (
+    <nav className="navbar">
+      <Link href="/">
+        <Image className='navbar-image' src="https://images.static.dragonaere.com/logos/transparent/orange.png" alt={'Dragonaere Logo'} width={64} height={64} />
+      </Link>
+    </nav>
+  )
+}