Merge pull request #10 from Jordan-Morrison/next.js-re-write

Next.js re write

.github/workflows/nextjs.yml

@@ -0,0 +1,95 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["master"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Static HTML export with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next export
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -1,2 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
 .DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1,2 +1,38 @@
-# Jordan-Morrison.Github.io
-Jordan Morrison's Landing Page
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/atoms/StackList.js

@@ -0,0 +1,19 @@
+import techStacks from '../data/techStacks.json';
+import styles from '@/styles/StackList.module.css';
+
+export default function StackList(props) {
+        let techStack = null;
+        techStack = props.techStack.map(tech => {
+            return techStacks.find((stack) => stack.name == tech);
+        });
+
+    return (
+        <ul className={styles.list}>
+            {techStack && techStack.map(tech =>
+                <li key={tech.name} style={{backgroundColor: tech.backgroundColor}}>
+                    <img src={tech.icon} alt={`The ${tech.name} icon`}/>    
+                    {tech.name}</li>
+            )}
+        </ul>
+    )
+}

components/atoms/slide.js

@@ -0,0 +1,10 @@
+import styles from '@/styles/Slide.module.css';
+
+export default function Slide(props) {
+
+    return (
+        <div className={styles.container}>
+            <img src={props.image.url} alt={props.image.altTxt}/>
+        </div>
+    )
+}

components/data/FUTURE PROJECTS/dataLiteracyAssessment.md

@@ -0,0 +1,10 @@
+---
+title: Data Literacy Assessment
+techStack: []
+index: 999
+images: [
+
+]
+---
+
+Enter description here

components/data/FUTURE PROJECTS/dataPatterns.md

@@ -0,0 +1,10 @@
+---
+title: Data Patterns
+techStack: []
+index: 1002
+images: [
+
+]
+---
+
+Enter description here

components/data/FUTURE PROJECTS/digitalOpenLearning.md

@@ -0,0 +1,10 @@
+---
+title: Digital Open Learning
+techStack: []
+index: 1000
+images: [
+
+]
+---
+
+Enter description here

components/data/FUTURE PROJECTS/geoLoco.md

@@ -0,0 +1,10 @@
+---
+title: GeoLoco
+techStack: []
+index: 999
+images: [
+
+]
+---
+
+Enter description here

components/data/FUTURE PROJECTS/highPeakCreatives.md

@@ -0,0 +1,10 @@
+---
+title: High Peak Creatives
+techStack: []
+index: 999
+images: [
+
+]
+---
+
+Enter description here

components/data/FUTURE PROJECTS/personalizer.md

@@ -0,0 +1,10 @@
+---
+title: Personalizer
+techStack: []
+index: 999
+images: [
+
+]
+---
+
+Enter description here

components/data/FUTURE PROJECTS/reactChildLock.md

@@ -0,0 +1,10 @@
+---
+title: React Child Lock
+techStack: []
+index: 999
+images: [
+
+]
+---
+
+Enter description here

components/data/FUTURE PROJECTS/swipeyJS.md

@@ -0,0 +1,10 @@
+---
+title: Swipey.js
+techStack: []
+index: 999
+images: [
+
+]
+---
+
+Enter description here

components/data/FUTURE PROJECTS/vExpo.md

@@ -0,0 +1,10 @@
+---
+title: vExpo
+techStack: []
+index: 1001
+images: [
+
+]
+---
+
+Enter description here

components/data/projects/adventCalendar.md

@@ -0,0 +1,21 @@
+---
+title: Advent Calendar
+techStack: ["Node.js", "MongoDB", "JavaScript", "HTML", "CSS"]
+index: 40
+images: [
+    {
+        url: /images/projects/adventCalendar/loginScreen.jpg,
+        altTxt: a screenshot of the advent calendar login screen
+    },
+    {
+        url: /images/projects/adventCalendar/adventCalendar.jpg,
+        altTxt: a screenshot showcasing the advent calendar
+    },
+    {
+        url: /images/projects/adventCalendar/christmasDay.jpg,
+        altTxt: a screenshot of Christmas day in the advent calendar app
+    }
+]
+---
+
+This advent calendar was a gift for my family and everyday of December, up until Christmas it would give them a hint as to what their presents were going to be. The calendar was full of animations with snow constantly falling and gift wrap when opening a new day on the calendar. This project also featured a backend with email & password authentication using Firebase. This protected any leaks as only data up and until that day would be sent to the app from the server.

components/data/projects/busrides.md

@@ -0,0 +1,17 @@
+---
+title: Busrides
+techStack: ["Next.js", "React", "Node.js", "JavaScript", "HTML", "CSS", "Adobe XD", "React Native"]
+index: 0
+images: [
+    {
+        url: /images/projects/busrides/home.png,
+        altTxt: a screenshot of the Busrides home page
+    },
+    {
+        url: /images/projects/busrides/authorDetails.png,
+        altTxt: a screenshot of the author details page in Busrides
+    }
+]
+---
+
+Introducing Busrides: As the lead developer and designer, I transformed Busrides into a dynamic micro-learning platform with a name inspired by those fleeting moments on a bus ride to work when one can acquire new knowledge. Originally a modest WordPress site with a handful of users, I embarked on a comprehensive redesign, exploring alternative headless CMS options, and ultimately rebuilding the platform using Next.js and Ghost CMS. Along the way, I introduced engaging events, including an advent calendar filled with daily data insights and an interactive Easter egg hunt that led users across the site. Thanks to these enhancements and the platform's new design, Busrides experienced remarkable growth, attracting over 10,000 users monthly. Recognized for my technical and communication skills, I was offered a full-time, indeterminate position, where I not only met with business owners to translate objectives into code but also excelled in writing clear and accessible documentation, earning praise from non-technical team members. Busrides has evolved into a thriving hub for learning, made possible by this transformative journey.

components/data/projects/gcTortilla.md

@@ -0,0 +1,25 @@
+---
+title: GC-Tortilla
+techStack: [React]
+index: 31
+images: [
+    {
+        url: /images/projects/gcTortilla/defaultSplashScreen.png,
+        altTxt: a screenshot of the default splash screen component in the GC-Tortilla library
+    },
+    {
+        url: /images/projects/gcTortilla/logoSplashScreen.png,
+        altTxt: a screenshot showing a customized version of the splash screen component in GC-Tortilla
+    },
+    {
+        url: /images/projects/gcTortilla/headerAndFooter.png,
+        altTxt: a screenshot showcasing the header and footer components in GC-Tortilla
+    },
+    {
+        url: /images/projects/gcTortilla/npm.png,
+        altTxt: a screenshot of GC-Tortilla on NPM
+    }
+]
+---
+
+[GC-Tortilla](https://www.npmjs.com/package/gc-tortilla) is a React library designed to help speed up the development of Government of Canada applications by providing pre-approved branded components. All elements in the components are fully customizable so they can be used by different teams with their own branding as needed. With GC-Tortilla you get a Splash Screen, Header Brand Bar and a Footer all of which are brand ready. The splash screen is unique in that it will use LocalStorage so that once the user set's their initial language preference they will not be forced to re-visit the splash screen every time they access the app. You can utilize all components pre-packaged together by importing GC-Tortilla or you have the option to import GCSplashScreen, GCHeader and GCFooter separately to use them on their own. This library is hosted on NPM and showcases my ability to write clear & concise documentation.