Bring Main to Current (#3)

Reviewed-on: #3
Co-authored-by: Nicholas Pease <me@nicholaspease.com>
Co-committed-by: Nicholas Pease <me@nicholaspease.com>

pease-portfolio/package.json

@@ -20,6 +20,7 @@
     "pnpm": "^9.7.1",
     "react": "^18",
     "react-chrono": "^2.6.1",
+    "react-code-blocks": "^0.1.6",
     "react-dom": "^18",
     "react-file-viewer": "^1.2.1",
     "react-iframe": "^1.8.5",

pease-portfolio/pnpm-lock.yaml

@@ -41,6 +41,9 @@ importers:
       react-chrono:
         specifier: ^2.6.1
         version: 2.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-code-blocks:
+        specifier: ^0.1.6
+        version: 0.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-dom:
         specifier: ^18
         version: 18.3.1(react@18.3.1)
@@ -555,6 +558,9 @@ packages:
   '@tsconfig/node16@1.0.4':
     resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
 
+  '@types/hast@2.3.10':
+    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -579,6 +585,9 @@ packages:
   '@types/stylis@4.2.5':
     resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==}
 
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
   '@typescript-eslint/parser@6.21.0':
     resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -1049,6 +1058,15 @@ packages:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
 
+  character-entities-legacy@1.1.4:
+    resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
+
+  character-entities@1.2.4:
+    resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
+
+  character-reference-invalid@1.1.4:
+    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
+
   chokidar@2.1.8:
     resolution: {integrity: sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==}
 
@@ -1130,6 +1148,9 @@ packages:
     resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
     hasBin: true
 
+  comma-separated-tokens@1.0.8:
+    resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
+
   comma-separated-values@3.6.4:
     resolution: {integrity: sha512-B0mjBHUfu4JqzYM5NurRTBl2QuNqQ9/O62EUfL4+bo2KN81fGsFOFOHbHn5SP65n3lmFPzGLkdg8wfuLKk9HOQ==}
 
@@ -1748,6 +1769,9 @@ packages:
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
+  fault@1.0.4:
+    resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
+
   fd-slicer@1.1.0:
     resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
 
@@ -1798,6 +1822,10 @@ packages:
     resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
     engines: {node: '>=14'}
 
+  format@0.2.2:
+    resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
+    engines: {node: '>=0.4.x'}
+
   frac@1.1.2:
     resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
     engines: {node: '>=0.8'}
@@ -1997,6 +2025,15 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-parse-selector@2.2.5:
+    resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
+
+  hastscript@6.0.0:
+    resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
+
+  highlight.js@10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+
   hmac-drbg@1.0.1:
     resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==}
 
@@ -2073,6 +2110,12 @@ packages:
     resolution: {integrity: sha512-YBUanLI8Yoihw923YeFUS5fs0fF2f5TSFTNiYAAzhhDscDa3lEqYuz1pDOEP5KvX94I9ey3vsqjJcLVFVU+3QA==}
     engines: {node: '>= 0.10'}
 
+  is-alphabetical@1.0.4:
+    resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
+
+  is-alphanumerical@1.0.4:
+    resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
+
   is-arguments@1.1.1:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
@@ -2129,6 +2172,9 @@ packages:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
     engines: {node: '>= 0.4'}
 
+  is-decimal@1.0.4:
+    resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+
   is-descriptor@0.1.7:
     resolution: {integrity: sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==}
     engines: {node: '>= 0.4'}
@@ -2172,6 +2218,9 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-hexadecimal@1.0.4:
+    resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -2434,6 +2483,9 @@ packages:
   lop@0.4.2:
     resolution: {integrity: sha512-RefILVDQ4DKoRZsJ4Pj22TxE3omDO47yFpkIBoDKzkqPRISs5U1cnAdg/5583YPkWPaLIYHOKRMQSvjFsO26cw==}
 
+  lowlight@1.20.0:
+    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -2788,6 +2840,9 @@ packages:
     resolution: {integrity: sha512-CTM5kuWR3sx9IFamcl5ErfPl6ea/N8IYwiJ+vpeB2g+1iknv7zBl5uPwbMbRVznRVbrNY6lGuDoE5b30grmbqg==}
     engines: {node: '>= 0.10'}
 
+  parse-entities@2.0.0:
+    resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
+
   parse-json@2.2.0:
     resolution: {integrity: sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==}
     engines: {node: '>=0.10.0'}
@@ -2971,6 +3026,14 @@ packages:
     engines: {node: '>=0.8'}
     hasBin: true
 
+  prismjs@1.27.0:
+    resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
+    engines: {node: '>=6'}
+
+  prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
@@ -2984,6 +3047,9 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  property-information@5.6.0:
+    resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
+
   prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
 
@@ -3027,6 +3093,12 @@ packages:
       react: ^18.1.0
       react-dom: ^18.1.0
 
+  react-code-blocks@0.1.6:
+    resolution: {integrity: sha512-ENNuxG07yO+OuX1ChRje3ieefPRz6yrIpHmebQlaFQgzcAHbUfVeTINpOpoI9bSRSObeYo/OdHsporeToZ7fcg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: '>=16'
+
   react-data-grid@5.0.5:
     resolution: {integrity: sha512-OR4LDoOpN4yj3NexaxYFS2OEIYFUk2V5lascPTHgtTMwwkb163tEPqQSertkv2YAJu+YBzIm8epW8+UMip1LPw==}
     peerDependencies:
@@ -3062,6 +3134,11 @@ packages:
       prop-types: '>= 15.7.0'
       react: '>= 16.8.0'
 
+  react-syntax-highlighter@15.5.0:
+    resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
+    peerDependencies:
+      react: '>= 0.14.0'
+
   react-transition-group@4.4.5:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -3118,6 +3195,9 @@ packages:
     resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
     engines: {node: '>= 0.4'}
 
+  refractor@3.6.0:
+    resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
+
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
@@ -3338,6 +3418,9 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  space-separated-tokens@1.1.5:
+    resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
+
   spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
 
@@ -4439,6 +4522,10 @@ snapshots:
 
   '@tsconfig/node16@1.0.4': {}
 
+  '@types/hast@2.3.10':
+    dependencies:
+      '@types/unist': 2.0.11
+
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
@@ -4460,6 +4547,8 @@ snapshots:
 
   '@types/stylis@4.2.5': {}
 
+  '@types/unist@2.0.11': {}
+
   '@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5)':
     dependencies:
       '@typescript-eslint/scope-manager': 6.21.0
@@ -5101,6 +5190,12 @@ snapshots:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  character-entities-legacy@1.1.4: {}
+
+  character-entities@1.2.4: {}
+
+  character-reference-invalid@1.1.4: {}
+
   chokidar@2.1.8(supports-color@3.2.3):
     dependencies:
       anymatch: 2.0.0(supports-color@3.2.3)
@@ -5213,6 +5308,8 @@ snapshots:
 
   color-support@1.1.3: {}
 
+  comma-separated-tokens@1.0.8: {}
+
   comma-separated-values@3.6.4: {}
 
   commander@2.11.0: {}
@@ -5721,7 +5818,7 @@ snapshots:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0)
       eslint-plugin-react: 7.35.0(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -5752,7 +5849,7 @@ snapshots:
       is-bun-module: 1.1.0
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
@@ -5770,7 +5867,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
@@ -5997,6 +6094,10 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
+  fault@1.0.4:
+    dependencies:
+      format: 0.2.2
+
   fd-slicer@1.1.0:
     dependencies:
       pend: 1.2.0
@@ -6053,6 +6154,8 @@ snapshots:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
+  format@0.2.2: {}
+
   frac@1.1.2: {}
 
   fraction.js@4.3.7: {}
@@ -6281,6 +6384,18 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-parse-selector@2.2.5: {}
+
+  hastscript@6.0.0:
+    dependencies:
+      '@types/hast': 2.3.10
+      comma-separated-tokens: 1.0.8
+      hast-util-parse-selector: 2.2.5
+      property-information: 5.6.0
+      space-separated-tokens: 1.1.5
+
+  highlight.js@10.7.3: {}
+
   hmac-drbg@1.0.1:
     dependencies:
       hash.js: 1.1.7
@@ -6358,6 +6473,13 @@ snapshots:
       hasown: 2.0.2
     optional: true
 
+  is-alphabetical@1.0.4: {}
+
+  is-alphanumerical@1.0.4:
+    dependencies:
+      is-alphabetical: 1.0.4
+      is-decimal: 1.0.4
+
   is-arguments@1.1.1:
     dependencies:
       call-bind: 1.0.7
@@ -6417,6 +6539,8 @@ snapshots:
     dependencies:
       has-tostringtag: 1.0.2
 
+  is-decimal@1.0.4: {}
+
   is-descriptor@0.1.7:
     dependencies:
       is-accessor-descriptor: 1.0.1
@@ -6462,6 +6586,8 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-hexadecimal@1.0.4: {}
+
   is-map@2.0.3: {}
 
   is-negative-zero@2.0.3: {}
@@ -6714,6 +6840,11 @@ snapshots:
       option: 0.2.4
       underscore: 1.13.7
 
+  lowlight@1.20.0:
+    dependencies:
+      fault: 1.0.4
+      highlight.js: 10.7.3
+
   lru-cache@10.4.3: {}
 
   lru-cache@6.0.0:
@@ -7117,6 +7248,15 @@ snapshots:
       pbkdf2: 3.1.2
       safe-buffer: 5.2.1
 
+  parse-entities@2.0.0:
+    dependencies:
+      character-entities: 1.2.4
+      character-entities-legacy: 1.1.4
+      character-reference-invalid: 1.1.4
+      is-alphanumerical: 1.0.4
+      is-decimal: 1.0.4
+      is-hexadecimal: 1.0.4
+
   parse-json@2.2.0:
     dependencies:
       error-ex: 1.3.2
@@ -7278,6 +7418,10 @@ snapshots:
 
   printj@1.1.2: {}
 
+  prismjs@1.27.0: {}
+
+  prismjs@1.29.0: {}
+
   process-nextick-args@2.0.1: {}
 
   process@0.11.10: {}
@@ -7290,6 +7434,10 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  property-information@5.6.0:
+    dependencies:
+      xtend: 4.0.2
+
   prr@1.0.1: {}
 
   public-encrypt@4.0.3:
@@ -7345,6 +7493,16 @@ snapshots:
       use-debounce: 10.0.3(react@18.3.1)
       xss: 1.0.15
 
+  react-code-blocks@0.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.25.6
+      react: 18.3.1
+      react-syntax-highlighter: 15.5.0(react@18.3.1)
+      styled-components: 6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tslib: 2.7.0
+    transitivePeerDependencies:
+      - react-dom
+
   react-data-grid@5.0.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -7386,6 +7544,15 @@ snapshots:
       prop-types: 15.8.1
       react: 18.3.1
 
+  react-syntax-highlighter@15.5.0(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.25.6
+      highlight.js: 10.7.3
+      lowlight: 1.20.0
+      prismjs: 1.29.0
+      react: 18.3.1
+      refractor: 3.6.0
+
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.25.6
@@ -7472,6 +7639,12 @@ snapshots:
       globalthis: 1.0.4
       which-builtin-type: 1.1.4
 
+  refractor@3.6.0:
+    dependencies:
+      hastscript: 6.0.0
+      parse-entities: 2.0.0
+      prismjs: 1.27.0
+
   regenerator-runtime@0.14.1: {}
 
   regex-not@1.0.2:
@@ -7694,6 +7867,8 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  space-separated-tokens@1.1.5: {}
+
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1

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

@@ -4,6 +4,7 @@ import Iframe from 'react-iframe'
 export default function Resume() {
     return (
         <div className='p-5 h-[100%]'>
+            <title>Resume | nicholaspease.com</title>
             <Iframe url="/career/Resume.pdf" styles={{height: "11in",width: "100%"}}/>
         </div>
     )

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

@@ -1,3 +1,10 @@
+export async function generateMetadata() {
+    return {
+        title: 'Skills | nicholaspease.com'
+    }
+  }
+  
+
 export default async function Page() {
     var languagesData = await fetch("https://wakatime.com/share/@LAX18/1d8ca4cf-2eec-49dc-b5a3-98900456e06e.json")
     var languages = await languagesData.json()
@@ -9,7 +16,7 @@ export default async function Page() {
                 <h2 className="font-bold text-[26px]">Programming Languages</h2>
                 <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/171a76f8-babe-4433-ac6f-1fe5438a50bb.svg"></embed></figure><br/>
+                    <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>.
                 </subsection>
                 <h2 className="font-bold text-[26px] mt-5">Frameworks</h2>

pease-portfolio/src/app/page.js

@@ -2,8 +2,16 @@ import Projects from "./projects.json"
 import moment from "moment"
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import GitHubIcon from '@mui/icons-material/GitHub';
+import EmailIcon from '@mui/icons-material/Email';
 import Link from "next/link"
 
+export async function generateMetadata() {
+  return {
+      title: 'Home | nicholaspease.com'
+  }
+}
+
+
 function AboutMe() {
   return (
     <div className="pl-[1%] w-[98%]">
@@ -14,7 +22,8 @@ function AboutMe() {
             <div className="pt-5 text-[45px]">About Me</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/LAX18" target="_blank"><GitHubIcon fontSize="large" sx={{cursor: "pointer"}}/></Link>
+              <Link href="https://github.com/npease18" target="_blank"><GitHubIcon fontSize="large" sx={{cursor: "pointer"}}/></Link>
+              <Link href="mailto:web-contact@nicholaspease.com" target="_blank"><EmailIcon fontSize="large" sx={{cursor: "pointer"}}/></Link>
             </div>
           </div>
         </div>

pease-portfolio/src/app/previous_versions/page.js

@@ -1,6 +1,13 @@
 import PriorVersions from "./versions.json"
 import moment from 'moment';
 
+export async function generateMetadata() {
+    return {
+        title: 'Previous Versions | nicholaspease.com'
+    }
+  }
+  
+
 function PriorWebsiteVersion({version}) {
     var version = PriorVersions[version]
     var start = moment(version.start)

pease-portfolio/src/app/projects.json

@@ -45,19 +45,10 @@
         "hasGitea": false,
         "hasGithub": true,
         "hasCustomPage": "weatherimg",
-        "github_user": "LAX18",
+        "github_user": "npease18",
         "github_repo": "Satellite-Imagery-Uploads",
         "img": "satimg.jpg"
     },
-    "Personal Portfolio": {
-        "description": "My personal portfolio is my first React and next.js project that also serves to showcase my personal projects and other career development accomplishments. This is hosted on my personal server and stands as a lesson in both web development as well as backend design.",
-        "gitea_user": "npease",
-        "gitea_repo": "portfolio",
-        "isPublic": false,
-        "hasGitea": true,
-        "hasGithub": false,
-        "hasCustomPage": false
-    },
     "Calculator Programming": {
         "description": "My first introduction to programming was by way of the Texas Instruments series of calculators. These taught me fundamentals in programming with languages such as TI-BASIC, ICE, and Assembly.",
         "gitea_user": "npease",
@@ -65,6 +56,6 @@
         "isPublic": false,
         "hasGitea": false,
         "hasGithub": false,
-        "hasCustomPage": false
+        "hasCustomPage": "calc"
     }
 }

pease-portfolio/src/app/projects/[slug]/page.js

@@ -1,6 +1,19 @@
 import Projects from "../../projects.json"
 import { redirect } from "next/navigation";
 
+export async function generateMetadata({params}) {
+    var name = params.slug.replaceAll("%20", " ")
+    if (name in Projects) {
+        return {
+            title: `${name} | nicholaspease.com`
+        }
+    } else {
+        return {
+            title: "Project Does Not Exist | nicholaspease.com"
+        }
+    }
+}
+
 function Page({params}) {
     var name = params.slug.replaceAll("%20", " ")
     if (name in Projects) {

pease-portfolio/src/app/projects/custom/aa1/page.js

@@ -176,6 +176,7 @@ function ImageCarousel() {
 export default function Home() {
     return (
         <div>
+            <title>Avaition Assistant V1 | nicholaspease.com</title>
             <main className="grid max-md:grid-cols-1 md:grid-cols-3">
                 <div className="">
                     <img src="/project_files/aa/photos/aa_side.png" className="md:relative md:left-[20%] md:w-[80%]"/>

pease-portfolio/src/app/projects/custom/aa2/page.js

@@ -13,6 +13,8 @@ export const Chrono = dynamic(() => import('react-chrono').then(lib => lib.Chron
   ssr: false,
 })
 
+
+
 import { FileList } from "@/components/filelist"
 
 var fileList = [
@@ -65,6 +67,7 @@ function ImageCarousel() {
       )
     return (
         <div className='ml-2 mr-5 mt-5 p-3'>
+            <title>Avaition Assistant V2 | nicholaspease.com</title>
             <div ref={sliderRef} className="keen-slider">
                 <div className={`keen-slider__slide ${loaded ? 'block' : 'hidden'}`}>
                     <p className="flex justify-center">

pease-portfolio/src/app/projects/custom/aubuchon/page.js

@@ -6,16 +6,20 @@ import SearchIcon from '@mui/icons-material/Search';
 import SignpostIcon from '@mui/icons-material/Signpost';
 import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
 import FormatColorFillIcon from '@mui/icons-material/FormatColorFill';
+import { CodeBlock, irBlack } from 'react-code-blocks';
+
+import sheetsTool from './source.js';
 
 import { useState } from 'react';
 
 export default function Page() {
   return (
     <div className="grid grid-cols-1">
+        <title>Aubuchon Register Tools | nicholaspease.com</title>
         <section className="flex justify-center items-center">
             <img src="/images/aublogo_color.svg" className="w-[40%]"/>
         </section>
-        <section className="flex justify-center items-center mt-5 font-bold text-[32px]">
+        <section className="flex justify-center items-center mt-5 font-bold max-md:text-[24px] md:text-[32px]">
             Aubuchon Hardware Additional Register Tools
         </section>
         <section className="flex justify-center items-center mt-5">
@@ -30,48 +34,78 @@ export default function Page() {
             The Suite of Tools Includes:
         </section>
         <ToolExpander/>
+        <section className='grid grid-cols-1 text-center justify-center items-center mt-10 w-[70%] relative left-[15%]'>
+            <span className='font-bold max-md:text-[24px] md:text-[32px]'>Google Sheets Tool</span>
+           <span> As an additional tool, I have developed a Google Sheets Add-On that allows the user to interface with the Aubuchon Inventory API to query information regarding inventory, product pricing and other information. It can be used to automate a wide variety of spreadsheets including inventory pick lists and many more. A redacted version of this tool is below</span>
+           <div className='text-left mt-5 bg-slate-900 rounded-lg p-5'>
+              <CodeBlock text={sheetsTool} language={"js"} showLineNumbers={true} theme={irBlack} customStyle={{backgroundColor: '#0f172a'}}/>
+           </div>
+        </section>
     </div>
   );
 }
 
 function ToolExpander() {
     const [tool, setTool] = useState("register")
+    var toolsMobile = []
+    for(var tool1 in tools) {
+        toolsMobile.push(
+            <div className='mb-5'>
+                <div className='grid place-items-center text-center'>
+                    <div className="button-expand w-[150px]">
+                        {tools[tool1].icon}<br/>
+                        {tools[tool1].title}
+                    </div>
+                </div>
+                
+                <div className='mt-5 bg-slate-900 rounded-lg p-5 w-[80%] relative left-[10%] min-h-[140px]'>
+                    <div className='font-bold'>{tools[tool1].title}</div>
+                    {tools[tool1].description}
+                </div>
+            </div>
+        )
+    }
     return (
         <main>
-            <section className='grid grid-cols-7 gap-x-5 justify-items-center text-center w-[80%] relative left-[10%]'>
+            <subsection className="max-lg:hidden">
-                <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("register")}>
+                <section className='grid grid-cols-7 gap-x-5 justify-items-center text-center w-[80%] relative left-[10%]'>
-                    <MenuBookIcon className="text-[90px]" fontSize="220px"/><br/>
+                    <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("register")}>
-                    Generate Register Book
+                        <MenuBookIcon className="text-[90px]" fontSize="220px"/><br/>
-                </div>
+                        Generate Register Book
-                <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("pallet")}>
+                    </div>
-                    <CallToActionIcon className="text-[90px]" fontSize="220px"/><br/>
+                    <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("pallet")}>
-                    Generate Pallet Signs
+                        <CallToActionIcon className="text-[90px]" fontSize="220px"/><br/>
-                </div>
+                        Generate Pallet Signs
-                <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("list")}>
+                    </div>
-                    <ViewListIcon className="text-[90px]" fontSize="220px"/><br/>
+                    <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("list")}>
-                    Generate List from SKU/UPC
+                        <ViewListIcon className="text-[90px]" fontSize="220px"/><br/>
-                </div>
+                        Generate List from SKU/UPC
-                <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("counter")}>
+                    </div>
-                    <FormatListNumberedIcon className="text-[90px]" fontSize="220px"/><br/>
+                    <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("counter")}>
-                    SKU Counter
+                        <FormatListNumberedIcon className="text-[90px]" fontSize="220px"/><br/>
-                </div>
+                        SKU Counter
-                <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("sign")}>
+                    </div>
-                    <SignpostIcon className="text-[90px]" fontSize="220px"/><br/>
+                    <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("sign")}>
-                    Create-A-Sign 2
+                        <SignpostIcon className="text-[90px]" fontSize="220px"/><br/>
-                </div>
+                        Create-A-Sign 2
-                <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("investigation")}>
+                    </div>
-                    <SearchIcon className="text-[90px]" fontSize="220px"/><br/>
+                    <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("investigation")}>
-                    SKU Investigation
+                        <SearchIcon className="text-[90px]" fontSize="220px"/><br/>
-                </div>
+                        SKU Investigation
-                <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("colorx")}>
+                    </div>
-                    <FormatColorFillIcon className="text-[90px]" fontSize="220px"/><br/>
+                    <div className="button-expand w-[150px]" onMouseOverCapture={() => setTool("colorx")}>
-                    ColorX Calculator
+                        <FormatColorFillIcon className="text-[90px]" fontSize="220px"/><br/>
-                </div>
+                        ColorX Calculator
-            </section>
+                    </div>
-            {tool && <div className='mt-5 bg-slate-900 rounded-lg p-5 w-[80%] relative left-[10%] min-h-[140px]'>
+                </section>
-                <div className='font-bold'>{tools[tool].title}</div>
+                {tool && <div className='mt-5 bg-slate-900 rounded-lg p-5 w-[80%] relative left-[10%] min-h-[140px]'>
-                {tools[tool].description}
+                    <div className='font-bold'>{tools[tool].title}</div>
-            </div>}
+                    {tools[tool].description}
+                </div>}
+            </subsection>
+            <subsection className="lg:hidden">
+                {toolsMobile}
+            </subsection>
         </main>
         
     )
@@ -79,30 +113,37 @@ function ToolExpander() {
 
 var tools = {
     register: {
+        icon: (<MenuBookIcon className="text-[90px]" fontSize="220px"/>),
         title: "Generate Register Book",
         description: "This tool takes a Microsoft Excel workbook and formats the data in a manner consistent among uses. This allows the store to generate identical books, with minimal duplication of efforts and materials, while optimizing for time. This tools also allows the store to utilize barcode's in the book, without relying on cashiers to type all of the codes by hand.",
     },
     pallet: {
+        icon: <CallToActionIcon className="text-[90px]" fontSize="220px"/>,
         title: "Generate Pallet Signs",
         description: "This tool takes a Microsoft Excel workbook and reads through all the user selected categories. It then queries the central Aubuchon Inventory API to assemble individualized pallet signs with most up to date pricing and additional data.",
     },
     list: {
+        icon: <ViewListIcon className="text-[90px]" fontSize="220px"/>,
         title: "Generate List from SKU/UPC",
         description: "This tool takes a bulk list of UPC's / SKUs and queries the Aubuchon Inventory API to assemble a list of items with the most up to date pricing and additional data. This tool is used to generate lists for the store to use in their daily operations. Potential applications involve inventorying, general list-making, and other correspondences.",
     },
     counter: {
+        icon: <FormatListNumberedIcon className="text-[90px]" fontSize="220px"/>,
         title: "SKU Counter",
         description: "This tool takes a bulk list of UPC's / SKUs and queries the Aubuchon Inventory API to count the number of items in the list. This tool is used to generate counts for the store to use in their daily operations. Potential applications involve inventorying, cycle counting, box inventorying, and other applications where counting a large number of scannable items is not practical.",
     },
     sign: {
+        icon: <SignpostIcon className="text-[90px]" fontSize="220px"/>,
         title: "Create-A-Sign 2",
         description: "This is a better version of the Aubuchon Hardware 'Create-A-Sign' program. This tool includes options to bulk generate signs, modify the pricing data should it be inaccurate, among other additions.",
     },
     investigation: {
+        icon: <SearchIcon className="text-[90px]" fontSize="220px"/>,
         title: "SKU Investigation",
         description: "This tool investigates potentially mistyped SKUs for user errors on the POS systems. It then sorts those similar SKUs according to their 'suspiciousness' and allows the user to investigate the potential errors. This tool is best used for negatives and other issue SKUs",
     },
     colorx: {
+        icon: <FormatColorFillIcon className="text-[90px]" fontSize="220px"/>,
         title: "ColorX Calculator",
         description: "This tool is used to calculate the paint differential between two given Benjamin Moore ColorX paint color formulas. It works by converting both formulas into common units, and outputting a simple to dispense formula to turn the old color, into the desired color.",
     }

pease-portfolio/src/app/projects/custom/aubuchon/source.js

@@ -0,0 +1,40 @@
+export default `function AUBDATALOOKUP(input, type) {
+  if (input && type) {
+    var url = API_URL;
+    var text = UrlFetchApp.fetch(url).getContentText();
+    var json = JSON.parse(text)
+    switch (type.toLowerCase()) {
+      case "description":
+        return json.product[0].webDesc
+        break;
+      case "qty":
+        return json.product[0].onHandAmt
+        break;
+      case "price":
+        return json.product[0].promoPrice != ""? "*"+json.product[0].promoPrice: json.product[0].retailPrice
+        break;
+      case "location":
+        return json.product[0].section + " S:" + json.product[0].Slot
+        break;
+      case "sku":
+        return json.product[0].sku
+        break;
+      default:
+        for (var UPC in json.Table1) {
+          UPC = json.Table1[UPC]
+          if (UPC.Primary) return UPC.altUPC
+        }
+        break;
+    }
+  } else if (input) {
+    var url = API_URL;
+    var text = UrlFetchApp.fetch(url).getContentText();
+    var json = JSON.parse(text)
+    for (var UPC in json.Table1) {
+          UPC = json.Table1[UPC]
+          if (UPC.Primary) return UPC.altUPC
+    }
+  } else {
+    return "AUBUCHON PRODUCT DATA TOOL\\n[SKU TO LOOKUP], [TYPE OF DATA]\\nVALID TYPES: UPC, DESCRIPTION, QTY, PRICE, LOCATION"
+  }
+}`

pease-portfolio/src/app/projects/custom/calc/page.js

@@ -0,0 +1,123 @@
+"use client"
+import { SourceCodeExplorer } from '../../../../components/sourcecodeviewer.js';
+
+const PROGRAMS = {
+    'asteroids': {
+        title: 'Asteroids CE',
+        description: 'This game places you as the operator of a space craft as you attempt to shoot down ALL of the asteroids hurtling towards you. If you miss one, you lose a point. If you hit one, you gain a point.',
+        image: 'https://www.cemetech.net/media/archives/screenshots/2020/04/1691_legacy-0-003596_6Birw4C.gif',
+        link: 'https://www.cemetech.net/downloads/files/1691/x1691',
+        language: 'TI-BASIC (CE Edition)',
+        publishDate: "November 28th, 2017"
+    },
+    'asteroidsICE': {
+        title: 'Asteroids ICE',
+        description: 'This game places you as the pilot of a spacecraft tasked with the task of destroying incomming asteroids. For every asteroid that you hit you gain a point, for every asteroid that you miss, you lose a point.',
+        image: 'https://www.cemetech.net/media/archives/screenshots/2020/04/1692_legacy-0-003606_SEBbkNC.gif',
+        link: 'https://www.cemetech.net/downloads/files/1692/x1692',
+        language: 'TI 84 ICE',
+        publishDate: "December 4th, 2017"
+    },
+    'taxfind2017': {
+        title: 'Taxfind 2017 CE',
+        description: 'This program calculates a user-selectable applied tax on the input amount.',
+        image: 'https://www.cemetech.net/media/archives/screenshots/2020/04/1701_legacy-0-003605_F5fGRs7.gif',
+        link: 'https://www.cemetech.net/downloads/files/1701/x1701',
+        language: 'TI-BASIC (CE Edition)',
+        publishDate: "December 5th, 2017"
+    },
+    'stocksim': {
+        title: 'StockSim',
+        description: 'StockSim is a simulation game based on the American stock market. Players can buy and sell stocks while monitoring several charts. Players have to determine the best times to sell, whilst monitoring best times to buy other stocks. Players can select from EASY and HARD modes and can save/continue their games.',
+        image: 'https://www.cemetech.net/media/archives/screenshots/2020/04/1759_legacy-0-003810_51kJ9KB.gif',
+        link: 'https://www.cemetech.net/downloads/files/1759/x1759',
+        language: 'TI 84 ICE',
+        publishDate: "May 5th, 2018"
+    },
+    'fakecalc': {
+        title: 'Fake Calc',
+        description: 'This is a program that makes the calculator display incorrect results for calculations inputted. Use this to prank your friends. I do not take responsibility for those who abuse this and mess up others tests.',
+        image: 'https://www.cemetech.net/media/archives/screenshots/2020/04/1833_legacy-0-004048_LB5ngyI.gif',
+        link: 'https://www.cemetech.net/downloads/files/1833/x1833',
+        language: 'TI-BASIC (83+ Edition)',
+        publishDate: "January 9th, 2019"
+    }
+}
+
+const calcFiles = {
+    "Asteroids CE": {
+        title: 'Asteroids CE',
+        files: ['ASTROID3','ASHINST']
+    },
+    "Asteroids ICE": {
+        title: 'Asteroids ICE',
+        files: ['ASTEROID','ASTINST']
+    },
+}
+
+const NOS = {
+        title: 'NOS (Nick Operating System)',
+        description: "NOS (or Nick's Operational Shell) will be a simple shell with a GUI similar to the Kindle Fire Home Screen. To scroll through the programs, you use the left and right keys. Possible features would be pinning programs to the beginning of the carousel and using the A-Z keys to navigate similarly to Cesium.",
+        image: '/images/NOS.png',
+        link: 'https://github.com/npease18/NOS',
+        language: 'TI 84 ICE',
+        publishDate: "Unpublished"
+}
+
+
+function Program({program}) {
+    return (
+        <div className='bg-slate-900 rounded-xl p-5 text-center'>
+            <div className="flex justify-center items-center">
+                <img className="w-[320px] h-[240px]" src={program.image}/>
+            </div><br/>
+            <a href={program.link} target="_blank" className='font-bold text-center text-[26px]'>{program.title}</a>
+            <div>
+                {program.description}
+            </div>
+            <div className='mt-5'>
+                Language: {program.language}<br/>
+                Publish Date: {program.publishDate}
+            </div>
+        </div>
+    )
+}
+
+function Programs() {
+    var arr = []
+    for (const program in PROGRAMS) {
+        arr.push(<Program program={PROGRAMS[program]}/>)
+    }
+    return arr
+}
+
+
+
+export default function Home() {
+    return (
+    <div className="pl-6 pr-6">
+        <title>Calculator Programming | nicholaspease.com</title>
+        <div className="grid grid-cols-1">
+            <section>
+                <div>
+                    <span className='text-[36px] font-bold'>Calculator Programming</span><br/>
+                    Calculator programming is where I got my initial start in software development and taught me the fundamentals of programming. I started with a TI-83+ calculator that I purchased from a thrift store. Below you can find many of the software programs I have written for the TI series of calculators. While I was developing programs for the TI series of calculators starting around 2014, I did not publish them online until around 2018, where I found the online community Cemetech. Below are some of the published products I produced.
+                </div>
+            </section>
+           <section className='grid mt-5 gap-x-5 gap-y-5 lg:grid-cols-3 grid-flow-row'>
+                <Programs/>
+           </section>
+           <section className="mt-5">
+           Below are some unfinished projects that I have worked on. These were never published but may have had some beta programs released.
+           <div className="grid mt-5 lg:grid-cols-3">
+               <Program program={NOS}/>
+           </div>
+           </section>
+           {/*<section className='pl-5 pr-5 mt-5'>
+               <span className='text-[36px] font-bold'>Source Code</span><br/>
+               Please use the below source code viewer to examine the source code of the programs above. The source code is written in raw file formats for transfer to the calculators, and requires a premade viewer here.
+               <SourceCodeExplorer data={calcFiles}/>
+           </section>*/}
+        </div>
+    </div>)
+}

pease-portfolio/src/app/projects/custom/chatmaps/page.js

@@ -216,6 +216,7 @@ function ImageCarousel() {
 export default function Home() {
     return (
     <div className="pl-6">
+        <title>ChatMaps | nicholaspease.com</title>
         <div className="grid grid-cols-1">
             <section className="flex justify-center items-center">
                 <img src="/images/chatmaps.png" className=""/>

pease-portfolio/src/app/projects/custom/weatherimg/page.js

@@ -2,7 +2,6 @@
 import { Gallery, Item } from 'react-photoswipe-gallery'
 import 'photoswipe/dist/photoswipe.css'
 
-
 export default function Page() {
     var NOAAComposite = [
         {
@@ -177,6 +176,7 @@ export default function Page() {
    
     return (
         <div className="pl-[2%] pr-[2%]">
+            <title>Weather Satellite Imagery | nicholaspease.com</title>
             <div>
                 <span className='text-[36px] font-bold'>Weather Satellite Imagery Capture and Processing</span><br/>
                 During March to May of 2020, I spent extensive time learning to receive and process various types of VHF satellite imagery provided by a handful of government satellites. Primarily, imagery can be download via two series of satellites, NOAA and Roscosmos &quot;Meteor&quot; satellites. Both transmit in the VHF frequency band, with NOAA transmitting via automated picture transmission (APT) format, and Meteor transmitting via low-resolution picture transmission (LRPT) format. The images are received via a VHF antenna, and decoded using a software-defined radio (SDR) and a decoding software. The images are then processed using a variety of software tools to enhance the image quality and remove noise. The images are then composited together to create a full image of the Earth. The images are then used to monitor weather patterns and storm systems.

pease-portfolio/src/app/projects/page.js

@@ -2,6 +2,12 @@ import Image from "next/image"
 import ProjectsListJSON from "../projects.json"
 
 
+export async function generateMetadata() {
+  return {
+      title: 'Projects | nicholaspease.com'
+  }
+}
+
 function ProjectHeader() {
   return (
     <div className="mt-5 ml-5">

pease-portfolio/src/components/sourcecodeviewer.js

@@ -0,0 +1,27 @@
+import { CodeBlock, dracula } from 'react-code-blocks';
+import {useState} from 'react'
+
+export function SourceCodeExplorer({data}) {
+    const [tab, setTab] = useState('Asteroids CE')
+    
+    var TABS = []
+    for (const file in data) {
+        TABS.push(<TAB name={file} click={(a) => {setTab(a)}}/>)
+    }
+    return (
+        <div className="bg-slate-900 mt-5 rounded-lg">
+            <nav className="pl-5">
+                {TABS}
+            </nav>
+            <viewer></viewer>
+        </div>
+    )
+}
+
+function TAB({name, click}) {
+    return (
+        <div className="inline-block bg-slate-900 text-white p-2 font-bold cursor-pointer hover:bg-slate-600 w-fit mr-5" onClick={() => {click(name)}}>
+            {name}
+        </div>
+    )
+}