Merge pull request 'Add Plane Blog' (#5) from npease-plane-blog into main

Reviewed-on: #5

pease-portfolio/package.json

@@ -9,31 +9,31 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@headlessui/react": "^2.1.2",
-    "@mui/icons-material": "^5.15.20",
-    "@mui/material": "^5.15.20",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@headlessui/react": "^2.2.0",
+    "@mui/icons-material": "^5.16.9",
+    "@mui/material": "^5.16.9",
     "keen-slider": "^6.8.6",
     "moment": "^2.30.1",
-    "next": "^14.2.5",
-    "pnpm": "^9.7.1",
-    "react": "^18",
+    "next": "^14.2.20",
+    "pnpm": "^9.15.0",
+    "react": "^18.3.1",
     "react-chrono": "^2.6.1",
     "react-code-blocks": "^0.1.6",
-    "react-dom": "^18",
+    "react-dom": "^18.3.1",
     "react-file-viewer": "^1.2.1",
     "react-iframe": "^1.8.5",
     "react-photoswipe-gallery": "^3.0.2",
     "react-youtube": "^10.1.0",
-    "vercel": "^37.6.1"
+    "vercel": "^37.14.0"
   },
   "homepage": "https://nicholaspease.com",
   "devDependencies": {
-    "autoprefixer": "^10.0.1",
-    "eslint": "^8",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.1.0",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0"
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16"
   }
 }

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

@@ -1,15 +1,96 @@
 import moment from 'moment';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
 
+var headers = [{
+  src: "/images/planes/20230920_181416.jpg",
+  width: 4000,
+  height: 1868,
+  model: "AN124",
+  manufacturer: "Antonov",
+  date: "09/20/2023",
+  location: "KBGR",
+  reg: "UR-82072"
+},
+{
+  src: "/images/planes/20241207_151807.jpg",
+  width: 4000,
+  height: 1419,
+  model: "A300-600ST",
+  manufacturer: "Airbus",
+  date: "12/07/2024",
+  location: "KBGR",
+  reg: "F-GSTC"
+},
+{
+  src: "/images/planes/20230926_144016.jpg",
+  width: 4000,
+  height: 1868,
+  model: "206",
+  manufacturer: "Cessna",
+  date: "09/26/2023",
+  location: "KBGR",
+  reg: "01970"
+},
+{
+    src: "/images/planes/20230926_135151.jpg",
+    width: 4000,
+    height: 1868,
+    model: "UH-60",
+    manufacturer: "Sikorsky",
+    date: "09/26/2023",
+    location: "KBGR",
+    reg: "6039"
+},
+{
+  src: "/images/planes/20230625_175812.jpg",
+  width: 1868,
+  height: 1051,
+  model: "A10 / F35",
+  manufacturer: "Various",
+  date: "06/25/2023",
+  location: "KBGR",
+  reg: "Various"
+},
+{
+  src: "/images/planes/20230728_161709.jpg",
+  width: 4000,
+  height: 1514,
+  model: "MV-22",
+  manufacturer: "Boeing",
+  date: "07/28/2023",
+  location: "KBXM",
+  reg: "N/A"
+},
+{
+    src: "/images/planes/20230625_180016.jpg",
+    width: 4000,
+    height: 1868,
+    model: "C-130",
+    manufacturer: "Lockheed",
+    date: "06/25/2023",
+    location: "KBGR",
+    reg: "65849"
+}]
+
 export function Header() {
+  var image = headers[Math.floor(Math.random() * (headers.length))]
   return (
-          <header className="pt-5 w-1/1 flex justify-center">
-            <div className="shadow-lg w-[98%] bg-slate-900 flex rounded-lg h-64 max-lg:ml-5 max-lg:mr-5">
-              <div className="self-end pb-5">
+    <header className="w-[96%] h-[400px] ml-[2%] mr-[2%] mb-5 pt-5 w-1/1 flex justify-center">
+      
+      <div className='w-[98%] ml-[2%] mr-[2%] h-[400px] z-0 absolute brightness-[75%] flex items-center'>
+        <img className="w-full h-[400px] object-cover rounded-lg" src={image.src}/>
+      </div>
+
+      <div className="shadow-lg w-[98%] ml-[2%] mr-[2%] fixed absolute rounded-lg h-[400px] flex">
+        <div className="self-end pb-5 w-full">
           <div className="pl-5 self-end text-[50px]">Nicholas Pease</div>
           <div className="pl-5 self-end text-[15px]">My portfolio and project place.</div>
         </div>
+        <div className='place-self-end w-fit mr-5 mb-5'>
+          <a href="/personal/plane-spotting" className='max-md:hidden text-nowrap'>{image.manufacturer} {image.model} [{image.date}]</a>
         </div>
+      </div>
+
     </header>
   );
 }
@@ -30,12 +111,30 @@ 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/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,191 @@
+"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,
+    date: "01/01/01",
+    model: "747-412",
+    manufacturer: "Boeing",
+    location: "KBGR",
+    reg: "N756CA"
+},
+{
+    src: "/images/planes/20230402_115859.jpg",
+    width: 4000,
+    height: 1868,
+    date: "04/02/2023",
+    model: "767-300",
+    manufacturer: "Boeing",
+    location: "KBGR",
+    reg: "N706KW"
+},
+{
+    src: "/images/planes/20230708_134556.jpg",
+    width: 4000,
+    height: 1868,
+    model: "737-800",
+    manufacturer: "Boeing",
+    date: "07/08/2023",
+    location: "KBGR",
+    reg: "N915NN"
+},
+{
+    src: "/images/planes/20230701_153414.jpg",
+    width: 4000,
+    height: 1868,
+    model: "AN124",
+    manufacturer: "Antonov",
+    date: "06/25/2023",
+    location: "KBGR",
+    reg: "UR-82008"
+},
+{
+    src: "/images/planes/20230920_181416.jpg",
+    width: 4000,
+    height: 1868,
+    model: "AN124",
+    manufacturer: "Antonov",
+    date: "09/20/2023",
+    location: "KBGR",
+    reg: "UR-82072"
+},
+{
+    src: "/images/planes/20230920_181428.jpg",
+    width: 4000,
+    height: 1868,
+    model: "AN124",
+    manufacturer: "Antonov",
+    date: "09/20/2023",
+    location: "KBGR",
+    reg: "UR-82072"
+},
+{
+    src: "/images/planes/20230920_181432.jpg",
+    width: 4000,
+    height: 1868,
+    model: "AN124",
+    manufacturer: "Antonov",
+    date: "09/20/2023",
+    location: "KBGR",
+    reg: "UR-82072"
+},
+{
+    src: "/images/planes/20230926_144016.jpg",
+    width: 4000,
+    height: 1868,
+    model: "206",
+    manufacturer: "Cessna",
+    date: "09/26/2023",
+    location: "KBGR",
+    reg: "01970"
+},
+{
+    src: "/images/planes/20231014_151149.jpg",
+    width: 4000,
+    height: 1868,
+},
+{
+    src: "/images/planes/20241201_165213.jpg",
+    width: 4000,
+    height: 1868,
+    model: "A300-600ST",
+    manufacturer: "Airbus",
+    date: "12/01/2024",
+    location: "KBGR",
+    reg: "F-GSTC"
+},
+{
+    src: "/images/planes/20241207_151807.jpg",
+    width: 4000,
+    height: 1419,
+    model: "A300-600ST",
+    manufacturer: "Airbus",
+    date: "12/07/2024",
+    location: "KBGR",
+    reg: "F-GSTC"
+},
+{
+    src: "/images/planes/20230625_175812.jpg",
+    width: 1868,
+    height: 1051,
+    model: "A10 / F35",
+    manufacturer: "Various",
+    date: "06/25/2023",
+    location: "KBGR",
+    reg: "Various"
+},
+{
+    src: "/images/planes/20230603_120656.jpg",
+    width: 4000,
+    height: 1868,
+    model: "E145",
+    manufacturer: "Embraer",
+    date: "06/03/2023",
+    location: "KBGR",
+    reg: "SE-DZA"
+},
+{
+    src: "/images/planes/20230926_135151.jpg",
+    width: 4000,
+    height: 1868,
+    model: "UH-60",
+    manufacturer: "Sikorsky",
+    date: "09/26/2023",
+    location: "KBGR",
+    reg: "6039"
+},
+{
+    src: "/images/planes/20230728_161709.jpg",
+    width: 4000,
+    height: 1514,
+    model: "MV-22",
+    manufacturer: "Boeing",
+    date: "07/28/2023",
+    location: "KBXM",
+    reg: "N/A"
+},
+{
+    src: "/images/planes/20230728_160853.jpg",
+    width: 4000,
+    height: 1868,
+    model: "VC-25",
+    manufacturer: "Boeing",
+    date: "07/28/2023",
+    location: "KBXM",
+    reg: "29000"
+},
+{
+    src: "/images/planes/20230625_180016.jpg",
+    width: 4000,
+    height: 1868,
+    model: "C-130",
+    manufacturer: "Lockheed",
+    date: "06/25/2023",
+    location: "KBGR",
+    reg: "65849"
+}]
+
+
+export default function Page() {
+    var images = PLANES.map((plane) => {
+        var caption = plane.date != undefined? `<span class="text-[20px] relative bottom-[30px] bg-slate-900 rounded-xl p-5">${plane.manufacturer} ${plane.model} (<a href="https://www.flightaware.com/live/flight/${plane.reg}" target="_blank">${plane.reg}</a>) - ${plane.location} (${plane.date})</span>`: '<span class="text-[20px] relative bottom-[30px] bg-slate-900 rounded-xl p-5">No Data Found</span>'
+        return <Item key={plane.src} original={plane.src} width={plane.width} height={plane.height} caption={caption}>
+            {({ 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%]">
+        <title>Plane Spotting | nicholaspease.com</title>
+            <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 withCaption>
+                    {images}
+            </Gallery>
+        </div>
+    )
+}

pease-portfolio/src/components/terminal.js

@@ -45,6 +45,7 @@ function isValidKey(event) {
 export function Terminal() {
     const [text, setText] = useState("")
     const [history, setHistory] = useState([<Command command="uname -a" key={0}/>,<Command command="timedatectl"  key={1}/>,<Command command="compgen -c" key={2}/>])
+
     const handleKeyDown = event => {
         event.preventDefault()
         if (event.code == "Backspace") {setText(text.slice(0, -1))}
@@ -65,8 +66,17 @@ export function Terminal() {
         else if (event.code == "Minus") {setText(text + "-")}
         else if (isValidKey(event)) {setText(text + event.key)}
     };
+
+    const mouseEnter = event => {
+        document.getElementById("terminal-focus").focus()
+    }
+
+    const mouseLeave = event => {
+        window.focus()
+    }
     return (
-        <div className="cursor-pointer outline-0 max-h-[420px] w-[100%] overflow-hidden max-lg:ml-5 max-lg:mr-5  flex flex-col-reverse p-1" onKeyDown={handleKeyDown} tabIndex={0}>
+        <div className="h-[420px] cursor-pointer outline-0" id="terminal-focus" onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} tabIndex={0} onKeyDown={handleKeyDown}>
+            <div className="max-h-[420px] w-[100%] overflow-hidden max-lg:ml-5 max-lg:mr-5 flex flex-col-reverse p-1">
                 <pre className="bash text-wrap">
                     {history}
                     <div>
@@ -74,5 +84,7 @@ export function Terminal() {
                     </div>
                 </pre>
             </div>
+        </div>
+        
     )
 }