feat: update package.json for deployment and add husky pre-commit hook

fix: refactor header component to use Link from react-router-dom

feat: enhance ProjectsPage with dynamic project rendering and filtering

feat: add NotFoundPage for handling 404 errors in router

chore: configure Vite for deployment and source maps

chore: add environment variables for GitHub token and login

chore: set up husky pre-commit hook to run checks

test: add Jest configuration and initial test cases

test: create mock file for asset imports in tests

test: implement sample tests for basic functionality

test: add tests for HomePage component with dark/light mode

test: set up testing library for better assertions

Author: Vaporjawn

.github/workflows/build.js.yml

@@ -5,25 +5,25 @@ name: Build
 
 on:
   push:
-    branches: ['main']
+    branches: ['main', 'V3']
   pull_request:
-    branches: ['main']
+    branches: ['main', 'V3']
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
       - run: npm ci
-      - run: npm run build --if-present
+      - run: npm run build

.github/workflows/install.js.yml

@@ -5,23 +5,23 @@ name: Installation
 
 on:
   push:
-    branches: ['main']
+    branches: ['main', 'V3']
   pull_request:
-    branches: ['main']
+    branches: ['main', 'V3']
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'

.github/workflows/lint.js.yml

@@ -5,23 +5,23 @@ name: Linting
 
 on:
   push:
-    branches: ['main']
+    branches: ['main', 'V3']
   pull_request:
-    branches: ['main']
+    branches: ['main', 'V3']
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'

.github/workflows/tests.js.yml

@@ -5,23 +5,23 @@ name: Tests
 
 on:
   push:
-    branches: ['main']
+    branches: ['main', 'V3']
   pull_request:
-    branches: ['main']
+    branches: ['main', 'V3']
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [16.x, 18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run check

.vscode/settings.json

@@ -2,21 +2,20 @@
     "workbench.colorCustomizations": {
         "activityBar.activeBackground": "#4d004a",
         "activityBar.background": "#4d004a",
-        "activityBar.foreground": "#e7e7e7",
-        "activityBar.inactiveForeground": "#e7e7e799",
-        "activityBarBadge.background": "#5c6000",
-        "activityBarBadge.foreground": "#e7e7e7",
-        "commandCenter.border": "#e7e7e799",
         "sash.hoverBorder": "#4d004a",
         "statusBar.background": "#1a0019",
-        "statusBar.foreground": "#e7e7e7",
         "statusBarItem.hoverBackground": "#4d004a",
         "statusBarItem.remoteBackground": "#1a0019",
-        "statusBarItem.remoteForeground": "#e7e7e7",
         "titleBar.activeBackground": "#1a0019",
-        "titleBar.activeForeground": "#e7e7e7",
         "titleBar.inactiveBackground": "#1a001999",
-        "titleBar.inactiveForeground": "#e7e7e799"
+        "editorGroup.border": "#4d004a",
+        "panel.border": "#4d004a",
+        "sideBar.border": "#4d004a",
+        "statusBar.border": "#1a0019",
+        "statusBar.debuggingBackground": "#001a01",
+        "statusBar.debuggingBorder": "#001a01",
+        "tab.activeBorder": "#4d004a",
+        "titleBar.border": "#1a0019"
     },
     "peacock.color": "#1a0019"
 }

README.md

@@ -14,51 +14,85 @@ In the project directory, you can run:
 
 ### `npm start`
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+Runs the app in development mode using Vite.\
+Open [http://localhost:5173](http://localhost:5173) to view it in your browser.
 
 The page will reload when you make changes.\
 You may also see any lint errors in the console.
 
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
 ### `npm run build`
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Builds the app for production to the `dist` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance using Vite.
 
 The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
-### `npm run deploy`
+### `npm run preview`
 
-Deploy your react application to GitHub Pages. This deploys a build to a branch called `gh-pages`.
-That should directly deploy to the production version of the website.
-[Extra Info Here](https://www.c-sharpcorner.com/article/how-to-deploy-react-application-on-github-pages/)
+Locally preview the production build.\
+Serves the content from the `dist` folder.
 
-### `npm run eject`
+### `npm test`
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+Launches Jest test runner.\
+Run `npm run test:watch` for interactive watch mode.\
+Run `npm run test:cov` for coverage reports.
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### `npm run lint`
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc.) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+Runs ESLint to check for code quality and style issues.\
+Automatically fixes issues where possible.
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+### `npm run format`
 
-## Learn More
+Runs Prettier to format code consistently.
+
+### `npm run deploy`
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+Deploy your React application to GitHub Pages.\
+This builds the app and deploys it to the `gh-pages` branch.
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+### `npm run check`
 
-### Making a Progressive Web App
+Runs the full quality check pipeline: build, format, lint, and test with coverage.
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+## Development Setup
 
-### Advanced Configuration
+1. **Clone the repository**
+   ```bash
+   git clone https://github.com/Vaporjawn/Vaporjawn.github.io.git
+   cd Vaporjawn.github.io
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   ```
+
+3. **Start development server**
+   ```bash
+   npm start
+   ```
+
+4. **Run tests**
+   ```bash
+   npm test
+   ```
+
+## Tech Stack
+
+- **Framework**: React 18 with TypeScript
+- **Build Tool**: Vite
+- **UI Libraries**: Material-UI (MUI), FontAwesome
+- **Routing**: React Router DOM
+- **Testing**: Jest + React Testing Library
+- **Linting**: ESLint + Prettier
+- **Deployment**: GitHub Pages
+
+## Learn More
 
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+- [Vite Documentation](https://vitejs.dev/)
+- [React Documentation](https://reactjs.org/)
+- [TypeScript Documentation](https://www.typescriptlang.org/)
+- [Material-UI Documentation](https://mui.com/)

jest.config.js

@@ -0,0 +1,40 @@
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  moduleNameMapping: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/src/__mocks__/fileMock.js',
+  },
+  transform: {
+    '^.+\\.(ts|tsx)$': ['ts-jest', {
+      useESM: true,
+    }],
+  },
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  globals: {
+    'ts-jest': {
+      useESM: true,
+    },
+  },
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.(ts|tsx)',
+    '<rootDir>/src/**/*.(test|spec).(ts|tsx)',
+  ],
+  collectCoverageFrom: [
+    'src/**/*.(ts|tsx)',
+    '!src/**/*.d.ts',
+    '!src/main.tsx',
+    '!src/vite-env.d.ts',
+  ],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov', 'html'],
+  coverageThreshold: {
+    global: {
+      branches: 80,
+      functions: 80,
+      lines: 80,
+      statements: -10,
+    },
+  },
+};