Added Satellite Page' (#2)

Reviewed-on: #2

.gitignore

@@ -132,4 +132,5 @@ dist
 
 # Configuration Files
 pease-portfolio/src/app/projects.json
-/pease-portfolio/.vercel
+/pease-portfolio/.vercel
+.vercel

pease-portfolio/package.json

@@ -23,6 +23,7 @@
     "react-dom": "^18",
     "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"
   },

pease-portfolio/pnpm-lock.yaml

@@ -50,6 +50,9 @@ importers:
       react-iframe:
         specifier: ^1.8.5
         version: 1.8.5(react@18.3.1)
+      react-photoswipe-gallery:
+        specifier: ^3.0.2
+        version: 3.0.2(photoswipe@5.4.4)(prop-types@15.8.1)(react@18.3.1)
       react-youtube:
         specifier: ^10.1.0
         version: 10.1.0(react@18.3.1)
@@ -2863,6 +2866,10 @@ packages:
   pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
 
+  photoswipe@5.4.4:
+    resolution: {integrity: sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==}
+    engines: {node: '>= 0.12.0'}
+
   picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
@@ -3048,6 +3055,13 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-photoswipe-gallery@3.0.2:
+    resolution: {integrity: sha512-TLkpzp2BSUUL/4GPRU5SQWXfJ8xuUBKgS8qUaHyhsT1co6CStr1mVCl4oQrSSFbWxAKhB5fHbr12l1R+TkqFcQ==}
+    peerDependencies:
+      photoswipe: '>= 5.2.2'
+      prop-types: '>= 15.7.0'
+      react: '>= 16.8.0'
+
   react-transition-group@4.4.5:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -7181,6 +7195,8 @@ snapshots:
 
   pend@1.2.0: {}
 
+  photoswipe@5.4.4: {}
+
   picocolors@1.0.0: {}
 
   picocolors@1.0.1: {}
@@ -7364,6 +7380,12 @@ snapshots:
 
   react-is@18.3.1: {}
 
+  react-photoswipe-gallery@3.0.2(photoswipe@5.4.4)(prop-types@15.8.1)(react@18.3.1):
+    dependencies:
+      photoswipe: 5.4.4
+      prop-types: 15.8.1
+      react: 18.3.1
+
   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

pease-portfolio/src/app/about-me/page.js

@@ -0,0 +1,8 @@
+export default function Page(){
+
+    return (
+        <div className="pl-[2%] w-[96%]">
+            <span className="text-[40px] font-bold">About Me</span>
+        </div>
+    )
+}

pease-portfolio/src/app/page.js

@@ -84,5 +84,4 @@ function Home() {
   );
 }
 
-
 export default Home;

pease-portfolio/src/app/projects.json

@@ -39,6 +39,16 @@
         "hasGithub": false,
         "hasCustomPage": "aubuchon"
     },
+    "Weather Satellite Imagery": {
+        "description": "The Weather Satellite Imagery project is a project where I constructed and tested various antennas and software to receive and decode weather satellite imagery from NOAA and Meteor satellites. Various results from these transmissions are availiable online at this website!",
+        "isPublic": true,
+        "hasGitea": false,
+        "hasGithub": true,
+        "hasCustomPage": "weatherimg",
+        "github_user": "LAX18",
+        "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",
@@ -48,13 +58,13 @@
         "hasGithub": false,
         "hasCustomPage": false
     },
-    "Weather Satellite Imagery": {
-        "description": "The Weather Satellite Imagery project is a project where I constructed and tested various antennas and software to receive and decode weather satellite imagery from NOAA and Meteor satellites. Various results from these transmissions are availiable online at this website!",
-        "isPublic": true,
+    "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",
+        "gitea_repo": "ti",
+        "isPublic": false,
         "hasGitea": false,
-        "hasGithub": true,
-        "hasCustomPage": false,
-        "github_user": "LAX18",
-        "github_repo": "Satellite-Imagery-Uploads"
+        "hasGithub": false,
+        "hasCustomPage": false
     }
 }

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

@@ -0,0 +1,224 @@
+"use client"
+import { Gallery, Item } from 'react-photoswipe-gallery'
+import 'photoswipe/dist/photoswipe.css'
+
+
+export default function Page() {
+    var NOAAComposite = [
+        {
+            src: "/images/weather/composite-1.png",
+            width: 4731,
+            height: 1813,
+        },
+        {
+            src: "/images/weather/composite-2.png",
+            width: 2226,
+            height: 1585,
+        },
+    ]
+    var NOAAImages = [
+        {
+            src: "/images/weather/satpass3.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass4.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass5.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass6.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass7.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass10.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass11.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass13.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass14.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass15.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass16.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass17.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass18.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass19.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass20.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass21.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass22.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass27.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass30.jpg",
+            width: 1040,
+            height: 1619,
+        },
+        {
+            src: "/images/weather/satpass31.jpg",
+            width: 1040,
+            height: 1619,
+        },
+    ]
+    var MeteorImages = [
+    {
+        src: "/images/weather/meteor1.jpg",
+        width: 2695,
+        height: 2632,
+    },
+    {
+        src: "/images/weather/meteor2.jpg",
+        width: 2695,
+        height: 3848,
+    },
+    {
+        src: "/images/weather/meteor3.jpg",
+        width: 2896,
+        height: 4048,
+    },
+    {
+        src: "/images/weather/meteor4.jpg",
+        width: 2896,
+        height: 4048,
+    },
+    {
+        src: "/images/weather/meteor6.jpg",
+        width: 2896,
+        height: 4048,
+    },
+    {
+        src: "/images/weather/meteor7.jpg",
+        width: 2896,
+        height: 4048,
+    },
+    {
+        src: "/images/weather/meteor8.jpg",
+        width: 2896,
+        height: 4048,
+    },
+    {
+        src: "/images/weather/meteor9.jpg",
+        width: 2896,
+        height: 4048,
+    },
+    {
+        src: "/images/weather/meteor10.jpg",
+        width: 2896,
+        height: 4048,
+    },
+    {
+        src: "/images/weather/meteor11.bmp",
+        width: 2896,
+        height: 4048,
+    },]
+
+    const smallItemStyles = {
+        cursor: 'pointer',
+        objectFit: 'cover',
+      }
+   
+    return (
+        <div className="pl-[2%] pr-[2%]">
+            <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.
+            </div>
+            <Gallery>
+                <div className='mb-t mt-5 font-bold text-[36px]'>American &quot;NOAA&quot; Weather Satellite Images</div>
+                <div className='grid grid-cols-5 gap-x-10 gap-y-5'>
+                {NOAAImages.map((image) => {
+                        return (
+                            <Item key={image.src} original={image.src} width={image.width} height={image.height}>
+                                {({ ref, open }) => (
+                                    <img ref={ref} onClick={open} src={image.src} style={smallItemStyles}/>
+                                )}
+                            </Item>   
+                        )
+                    })}
+                </div>
+                <div className='mb-t mt-5 font-bold text-[36px]'>American &quot;NOAA&quot; Weather Satellite Images - Composites</div>
+                <div className='grid grid-cols-2 gap-x-10 gap-y-5'>
+                {NOAAComposite.map((image) => {
+                        return (
+                            <Item key={image.src} original={image.src} width={image.width} height={image.height}>
+                                {({ ref, open }) => (
+                                    <img ref={ref} onClick={open} src={image.src} style={smallItemStyles}/>
+                                )}
+                            </Item>   
+                        )
+                    })}
+                </div>
+                <div className='mb-t mt-5 font-bold text-[36px]'>Russian &quot;Meteor&quot; Weather Satellite Images</div>
+                <div className='grid grid-cols-5 gap-x-10 gap-y-5'>
+                {MeteorImages.map((image) => {
+                        return (
+                            <Item key={image.src} original={image.src} width={image.width} height={image.height}>
+                                {({ ref, open }) => (
+                                    <img ref={ref} onClick={open} src={image.src} style={smallItemStyles}/>
+                                )}
+                            </Item>   
+                        )
+                    })}
+                </div>
+            </Gallery>
+        </div>
+    )
+}

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

@@ -1,6 +1,7 @@
 import Image from "next/image"
 import ProjectsListJSON from "../projects.json"
 
+
 function ProjectHeader() {
   return (
     <div className="mt-5 ml-5">
@@ -21,14 +22,14 @@ function ProjectsList() {
 function Project({name, description, imgURL}) {
   if (imgURL) {
     return (
-      <div className="w-[100%] mt-5">
-        <div className="w-[100%] flex justify-center">
-          <div className="w-[100%] self-center ml-5 mr-5">
-            <div className="bg-slate-900 w-[100%] rounded-lg p-5 grid sm:grid-cols-2 ">
+      <div className="w-[100%] h-[100%] mt-5 text-center">
+        <div className="w-[100%] flex justify-center h-[100%]">
+          <div className="w-[100%] self-center ml-5 mr-5 h-[100%]">
+            <div className="bg-slate-900 w-[100%] rounded-lg p-5 grid sm:grid-rows-2 h-[100%]">
               <div className="place-self-center mb-5 w-[90%] mt-2 mb-2">
                 <img src={"/images/"+imgURL} className="w-[90%]"/>
               </div>
-              <div className="mt-2 mb-2">
+              <div className="mt-2 mb-2 text-center">
                 <a href={"/projects/"+name} className="text-[24px] font-bold">{name}</a><br/>
                 <div>{description}</div>
               </div>
@@ -39,11 +40,11 @@ function Project({name, description, imgURL}) {
     );
   } else {
     return (
-      <div className="w-[100%] mt-5">
-        <div className="w-[100%] flex justify-center">
-          <div className="w-[100%] self-center ml-5 mr-5">
-            <div className="bg-slate-900 w-[100%] rounded-lg p-5">
-              <div className="place-self-center">
+      <div className="w-[100%] h-[100%] mt-5 text-center">
+        <div className="w-[100%] flex justify-center h-[100%] ">
+          <div className="w-[100%] self-center ml-5 mr-5 h-[100%] flex flex-col justify-center items-center ">
+            <div className="bg-slate-900 w-[100%] rounded-lg p-5 h-[100%] flex flex-col justify-center items-center place-items-center">
+              <div className="mt-2 mb-2">
                 <a href={"/projects/"+name} className="text-[24px] font-bold">{name}</a><br/>
                 <div>{description}</div>
               </div>
@@ -59,7 +60,9 @@ function Projects() {
   return (
     <div>
         <ProjectHeader/>
-        <ProjectsList/>
+        <div className="grid max-lg:grid-cols-1 grid-cols-3 gap-y-5 mb-10">
+          <ProjectsList/>
+        </div>
     </div>
   );
 }