Initial

pease-portfolio/src/app/career/skills/page.js

@@ -17,7 +17,7 @@ export default async function Page() {
                 <subsection>
                     My top languages are <span className="font-bold">{languages[0].name} ({languages[0].percent}%)</span>, <span className="font-bold">{languages[1].name} ({languages[1].percent}%)</span>, and <span className="font-bold">{languages[2].name} ({languages[2].percent}%)</span>. For a more comprehensive list of all programming languages I have experience with, please see below.
                     <figure className="md:w-[45vw]"><embed src="https://wakatime.com/share/@LAX18/2ea5a9d3-283b-4fe5-bf7b-8b4169566738.svg"></embed></figure><br/>
-                    This is a somewhat incomplete number as this particular tracker <a className="underline" href="https://wakatime.com/@LAX18">WakaTime</a> has only been active and tracking my coding activity since February 16th, 2024. Some previous languages I have more experience with include <a href="https://tutorials.eeems.ca/ASMin28Days/lesson/toc.html" className="underline" target="_blank">z80 Assembly for TI calculators</a> and <a href="/career/tibasic.pdf" className="underline" target="_blank">TI-BASIC</a>.
+                    This is a somewhat incomplete number as this particular tracker <a className="underline" href="https://wakatime.com/@LAX18">WakaTime</a> has only been active and tracking my coding activity since February 16th, 2023 Some previous languages I have more experience with include <a href="https://tutorials.eeems.ca/ASMin28Days/lesson/toc.html" className="underline" target="_blank">z80 Assembly for TI calculators</a> and <a href="/career/tibasic.pdf" className="underline" target="_blank">TI-BASIC</a>.
                 </subsection>
                 <h2 className="font-bold text-[26px] mt-5">Frameworks</h2>
                 <subsection>

pease-portfolio/src/app/globals.js

@@ -30,12 +30,35 @@ export function Navigation() {
         <div className="mt-5 bg-slate-900 rounded-lg w-full self-center ml-5 mr-5">
           <a href="/" className="pl-5 hover:bg-slate-600 p-2 break-inside-avoid hover:rounded-l-lg">Home</a>
           <a href="/projects" className="hover:bg-slate-600 p-2 break-inside-avoid">Projects</a>
+          <PersonalNav/>
           <CareerNav/>
         </div>
       </div>
   );
 }
 
+function PersonalNav() {
+  return (
+    <span>
+      <Menu>
+        <MenuButton className="pl-2 pr-2 hover:bg-slate-600">Personal</MenuButton>
+        <MenuItems anchor="bottom start" className="bg-slate-900 text-center mt-3 rounded-lg"> 
+          <MenuItem className="p-2">
+            <a className="block data-[focus]:bg-slate-600" href="/personal/about-me">
+              About Me
+            </a>
+          </MenuItem>
+          <MenuItem className="p-2">
+            <a className="block data-[focus]:bg-slate-600" href="/personal/plane-spotting">
+              Plane Spotting
+            </a>
+          </MenuItem>
+        </MenuItems>
+      </Menu>
+    </span>
+  )
+}
+
 function CareerNav() {
   return (
     <span>

pease-portfolio/src/app/page.js

@@ -16,7 +16,7 @@ function AboutMe() {
         <div className="md:mr-10 bg-slate-900 rounded-lg h-[420px] col-span-1 flex justify-center max-lg:ml-5 max-lg:mr-5">
           <div className="self-center">
             <img className="w-56 h-56  rounded-full" src="/images/me.jpg"></img>
-            <div className="pt-5 text-[45px]">About Me</div>
+            <div className="pt-5 text-[45px]"><Link href="/personal/about-me">About Me</Link></div>
             <div className="w-[100%] flex justify-center gap-x-2">
               <Link href="https://www.linkedin.com/in/nicholaspease207/" target="_blank"><LinkedInIcon fontSize="large" sx={{cursor: "pointer"}}/></Link>
               <Link href="https://github.com/npease18" target="_blank"><GitHubIcon fontSize="large" sx={{cursor: "pointer"}}/></Link>

pease-portfolio/src/app/personal/plane-spotting/page.js

@@ -0,0 +1,59 @@
+"use client"
+import { Gallery, Item } from 'react-photoswipe-gallery'
+import 'photoswipe/dist/photoswipe.css'
+
+const PLANES = [{
+    src: "/images/planes/20230402_093722.jpg",
+    width: 4000,
+    height: 1868,
+},
+{
+    src: "/images/planes/20230402_115859.jpg",
+    width: 4000,
+    height: 1868,
+},
+{
+    src: "/images/planes/20230708_134556.jpg",
+    width: 4000,
+    height: 1868,
+},
+{
+    src: "/images/planes/20230701_153414.jpg",
+    width: 4000,
+    height: 1868,
+},
+{
+    src: "/images/planes/20230920_181416.jpg",
+    width: 4000,
+    height: 1868,
+},
+{
+    src: "/images/planes/20231014_151149.jpg",
+    width: 4000,
+    height: 1868,
+},
+{
+    src: "/images/planes/20241201_165213.jpg",
+    width: 4000,
+    height: 1868,
+}]
+
+
+export default function Page() {
+    var images = PLANES.map((plane) => {
+        return <Item key={plane.src} original={plane.src} width={plane.width} height={plane.height}>
+            {({ ref, open }) => (
+                <img ref={ref} onClick={open} src={plane.src} className='inline-block m-5 w-[22%] cursor-pointer'/>
+            )}
+        </Item>
+    })
+    return (
+        <div className="p-5 h-[100%]">
+            <span className="text-[30px]">Plane Spotting</span>
+            <div>One of my hobbies in my free time is plane spotting at the airports near me. Some of these airports include Bangor International Airport (KBGR) and Brunswick Executive Airport (KBXM). Below is a collection of the images I have captures from these two airports.</div>
+            <Gallery>
+                    {images}
+            </Gallery>
+        </div>
+    )
+}