About

app/(site)/components/AboutSection/AboutSection.tsx

@@ -2,6 +2,8 @@ import Reader from "@/components/Reader/Reader";
 import LanguageSection from "./LanguageSection";
 import TechnologiesSection from "./TechnologiesSection";
 import getMarkdownFromFileSystem from "@/actions/file-system/getMarkdownFromFileSystem";
+import { Button } from "@/components/shadcn/ui/button";
+import Link from "next/link";
 
 /**
  * About section component.
@@ -20,8 +22,9 @@ const AboutSection = () => {
    * About me written in markdown.
    * This markdown is converted to HTML and displayed on the page.
    */
-  const blogContent: string | undefined =
-    getMarkdownFromFileSystem(`public/about-me.md`)?.content;
+  const blogContent: string | undefined = getMarkdownFromFileSystem(
+    `public/about/short.md`
+  )?.content;
 
   return (
     <section id="about" className="home-section-wrapper">
@@ -45,7 +48,19 @@ const AboutSection = () => {
             Get to know me!
           </h1>
 
-          <Reader content={blogContent} />
+          <div className="space-y-2">
+            <Reader content={blogContent} />
+            <Link
+              href="/about"
+              className="
+                font-bold
+                hover:underline 
+                hover:text-red-500 hover:dark:text-red-700
+                transition-colors duration-300 ease-in-out"
+            >
+              {`Read More About Me!`}
+            </Link>
+          </div>
         </div>
 
         {/* Right section */}

app/about/page.tsx

@@ -0,0 +1,102 @@
+import type { Metadata } from "next";
+import developerName from "@/constants/developerName";
+import getMarkdownFromFileSystem from "@/actions/file-system/getMarkdownFromFileSystem";
+import { notFound } from "next/navigation";
+import HeadingTwo from "@/components/Text/HeadingTwo";
+import Reader from "@/components/Reader/Reader";
+import Image from "next/image";
+import DetailsTable from "@/components/UI/DetailsTable";
+import Socials from "@/components/Socials/Socials";
+
+const aboutContent: string | undefined =
+  getMarkdownFromFileSystem(`public/about/long.md`)?.content;
+
+export const metadata: Metadata = {
+  title: `${developerName} - About Me`,
+  description: aboutContent,
+};
+
+/**
+ * About page displays information about the developer.
+ * @returns Home page
+ */
+export default function About() {
+  if (!aboutContent) {
+    notFound();
+  }
+
+  return (
+    <main>
+      <div className="text-center">
+        <HeadingTwo title="About Me!" />
+      </div>
+
+      {/* Profile Image */}
+      <div className="block lg:hidden my-5 lg:md-0">
+        <div className="flex justify-center">
+          <Image
+            src="/profile.png"
+            alt="Profile image of the developer"
+            width={150}
+            height={150}
+            className="rounded-full shadow-2xl"
+            quality={60}
+            loading="eager"
+            priority
+          />
+        </div>
+      </div>
+
+      <div
+        className="
+          flex flex-col lg:flex-row
+          space-y-10 md:space-y-5 lg:space-y-0
+          items-stretch justify-center align-top
+          lg:space-x-10 lg:p-4
+          lg:text-left
+        "
+      >
+        {/* Left section */}
+        <div className="lg:w-full">
+          <Reader content={aboutContent} size="lg:prose-lg" />
+        </div>
+
+        {/* Right section */}
+        <div className="lg:w-auto space-y-5 lg:space-y-10">
+          {/* Profile Image */}
+          <Image
+            src="/profile.png"
+            alt="Profile image of the developer"
+            width={250}
+            height={250}
+            className="rounded-full shadow-xl hidden lg:block mt-8"
+            quality={60}
+            loading="eager"
+            priority
+          />
+
+          {/* Social Icons */}
+          <div className="flex justify-center">
+            <Socials iconSize={36} />
+          </div>
+
+          {/* Details */}
+          <DetailsTable
+            details={[
+              { heading: "Name", value: developerName },
+              { heading: "Location", value: "London, UK" },
+              {
+                heading: "University",
+                value: "Royal Holloway, University of London",
+              },
+              { heading: "Degree", value: "BSc Computer Science" },
+              { heading: "Currently Working", value: "Commerzbank" },
+              { heading: "Current Role", value: "DevOps Engineer" },
+            ]}
+            className="grid-cols-2 md:grid-cols-2 lg:grid-cols-1"
+          />
+        </div>
+      </div>
+    </main>
+  );
+}

app/education/[courseKey]/page.tsx

@@ -1,4 +1,3 @@
-import generateUrl from "@/actions/generateUrl";
 import filterMaterialByArchivedStatus from "@/actions/material/filter/filterMaterialByArchivedStatus";
 import groupMaterialsByCategory from "@/actions/material/group/groupMaterialsByCategory";
 import filterSkillsByType from "@/actions/skills/filter/filterSkillsByType";
@@ -11,21 +10,20 @@ import HeadingFour from "@/components/Text/HeadingFour";
 import HeadingThree from "@/components/Text/HeadingThree";
 import HeadingTwo from "@/components/Text/HeadingTwo";
 import Grid from "@/components/UI/Grid";
-import PageDescription from "@/components/UI/PageDescription";
 import { AspectRatio } from "@/components/shadcn/ui/aspect-ratio";
 import developerName from "@/constants/developerName";
 import { EDUCATION_PAGE } from "@/constants/pages";
 import courseDatabaseMap from "@/database/Courses/CourseDatabaseMap";
+import CourseInterface from "@/database/Courses/CourseInterface";
+import ModuleDatabaseKeys from "@/database/Modules/ModuleDatabaseKeys";
 import moduleDatabaseMap, {
   moduleDatabaseKeys,
 } from "@/database/Modules/ModuleDatabaseMap";
-import skillDatabaseMap from "@/database/Skills/SkillDatabaseMap";
+import ModuleInterface from "@/database/Modules/ModuleInterface";
 import SkillDatabaseKeys from "@/database/Skills/SkillDatabaseKeys";
-import ModuleDatabaseKeys from "@/database/Modules/ModuleDatabaseKeys";
+import skillDatabaseMap from "@/database/Skills/SkillDatabaseMap";
 import SkillTypesEnum from "@/enums/Skill/SkillTypesEnum";
 import MaterialGroupInterface from "@/interfaces/material/MaterialGroupInterface";
-import CourseInterface from "@/database/Courses/CourseInterface";
-import ModuleInterface from "@/database/Modules/ModuleInterface";
 import GroupedSkillsCategoriesInterface from "@/interfaces/skills/GroupedSkillsInterface";
 import { Metadata, ResolvingMetadata } from "next";
 import Image from "next/image";

app/more/page.tsx

@@ -0,0 +1,53 @@
+import Grid from "@/components/UI/Grid";
+import PageNavigationItem from "@/components/UI/PageNavigationItem";
+import developerName from "@/constants/developerName";
+import NAV_ITEMS, { HOME_PAGE, MORE_PAGE } from "@/constants/pages";
+import NavigationItemInterface from "@/interfaces/NavigationItemInterface";
+
+/**
+ * Generates the metadata for the page to navigate all pages.
+ * This includes the title and description of the page.
+ * This is used for SEO purposes.
+ *
+ * @param props The props for the page.
+ * @param parent The parent metadata that is being resolved.
+ * @returns The metadata for the page.
+ * @see https://nextjs.org/docs/app/building-your-application/optimizing/metadata
+ */
+export const metadata = {
+  title: `${developerName} - All Pages`,
+  description: MORE_PAGE.description,
+};
+
+type MorePageProps = {
+  params: { courseKey: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+/**
+ * Page displaying all the all the pages the user can navigate to.
+ * Some pages are not shown in the navbar and can only be accessed through this page.
+ *
+ * @returns Page to navigate all pages.
+ */
+const MorePage: React.FC<MorePageProps> = ({ params, searchParams }) => {
+  const ignoredPages: Array<NavigationItemInterface> = [HOME_PAGE, MORE_PAGE];
+
+  return (
+    <main>
+      <section id="pages">
+        <div className="animate-fadeIn animation-delay-2 w-full min-h-[85vh]">
+          <Grid
+            items={NAV_ITEMS.filter((item) => !ignoredPages.includes(item)).map(
+              (item) => (
+                <PageNavigationItem key={item.label} item={item} />
+              )
+            )}
+          />
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default MorePage;

components/Navbar/Navbar.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import { NAVBAR_HEIGHT } from "@/constants/NAVBAR";
 import NAV_ITEMS from "@/constants/pages";
 import { useNavbarStore } from "@/hooks/useNavbarStore";
@@ -8,6 +9,7 @@ import HomeButton from "./HomeButton";
 import NavbarItem from "./NavbarItem";
 import NavbarOverlay from "./NavbarOverlay";
 import ThemeToggle from "./ThemeToggle";
+import NavbarSection from "./NavbarSection";
 
 /**
  * Navbar component shown at the top of the page.
@@ -62,6 +64,8 @@ export default function Navbar() {
         <div className="justify-between md:items-center md:flex mx-auto max-w-[2560px]">
           <div className="flex items-center justify-between py-3 md:py-5 md:block">
             <HomeButton />
+
+            {/* Mobile Only */}
             <div className="md:hidden flex items-center">
               {/* Dark / Light Mode toggle for mobile */}
               <ThemeToggle />
@@ -82,30 +86,9 @@ export default function Navbar() {
               </button>
             </div>
           </div>
-          <div className="hidden md:block">
-            <div
-              className="
-              md:flex
-              items-center justify-center 
-              space-y-7 md:space-x-5 md:space-y-0"
-            >
-              {/* Links  */}
-              {NAV_ITEMS.map((item) => {
-                return (
-                  <div
-                    key={item.label}
-                    className="flex justify-center w-full md:w-auto"
-                  >
-                    <NavbarItem to={item.path}>{item.label}</NavbarItem>
-                  </div>
-                );
-              })}
-              {/* Dark / Light Mode toggle for desktop */}
-              <div className="hidden md:block">
-                <ThemeToggle />
-              </div>
-            </div>
-          </div>
+
+          {/* Desktop Only */}
+          <NavbarSection items={NAV_ITEMS} />
         </div>
       </header>
       <NavbarOverlay

components/Navbar/NavbarItem.tsx

@@ -6,19 +6,19 @@ import { usePathname } from "next/navigation";
 import React from "react";
 
 interface NavbarItemProps {
-  to: string;
+  href: string;
   children: React.ReactNode;
 }
 
 /**
  * Navbar button that navigates to a different page when clicked.
  * It also highlights the button when the user is on the page it links to.
  * The button is also highlighted when the user hovers over it.
- * @param to (string) - The path to navigate to when the navbar item is clicked
- * @param children (ReactNode) - The content to display inside the navbar item
- * @returns (JSX.Element) - A navbar item component
+ * @param to The path to navigate to when the navbar item is clicked
+ * @param children The content to display inside the navbar item
+ * @returns A navbar item component
  */
-const NavbarItem: React.FC<NavbarItemProps> = ({ to, children }) => {
+const NavbarItem: React.FC<NavbarItemProps> = ({ href, children }) => {
   const pathname: string = usePathname();
   const { isOpen: isOverlayOpen, close: closeOverlay } = useNavbarStore();
 
@@ -32,7 +32,7 @@ const NavbarItem: React.FC<NavbarItemProps> = ({ to, children }) => {
     }
   }
 
-  let isActive: boolean = pathname === to;
+  let isActive: boolean = pathname === href;
 
   const navbarItemStyle = `
     block lg:inline-block 
@@ -49,8 +49,10 @@ const NavbarItem: React.FC<NavbarItemProps> = ({ to, children }) => {
   `;
 
   return (
-    <Link href={to} className={navbarItemStyle} onClick={() => handleClick()}>
+    <Link href={href} className={navbarItemStyle} onClick={() => handleClick()}>
       {children}
+
+      {/* Hover Underline */}
       <span
         className="
           w-full h-[3px]   

components/Navbar/NavbarOverlay.tsx

@@ -39,13 +39,15 @@ const NavbarOverlay: React.FC<OverlayProps> = ({ isOpen, toggle, items }) => {
 				"
       >
         {/* Links */}
-        {items.map((item, index) => {
-          return (
-            <div key={index} className="flex justify-center w-full md:w-auto">
-              <NavbarItem to={item.path}>{item.label}</NavbarItem>
-            </div>
-          );
-        })}
+        {items
+          .filter((item) => item.isMain)
+          .map((item, index) => {
+            return (
+              <div key={index} className="flex justify-center w-full md:w-auto">
+                <NavbarItem href={item.path}>{item.label}</NavbarItem>
+              </div>
+            );
+          })}
       </div>
 
       <div className="w-full pb-20">