- Welcome to the behind the scenes of Matthew Schulz's personal website! This site is a single-page application (SPA) built from scratch that showcases Matthew's projects, work experience, and more. The website is hosted on GitHub Pages and can be accessed securly at mkschulz.com.
NOTE: This website is a work in progress and is constantly being updated.
| Type | Name | Related Folder(s) / File(s) | Description |
|---|---|---|---|
| Package Manager | pnpm | package.json pnpm-lock.yaml |
Package manager that facilitates efficient management and installation of dependencies. |
| Build Tool | Vite | vite.config.ts | Build tool that provides fast and efficient development experience. |
| Static Type Checker | TypeScript | tsconfig.json | Static type checker that helps catch type-related bugs early. |
| UI Libraries | React MUI |
src/main.tsx src/components |
UI libraries that provide a rich set of components and utilities. |
| CI/CD | GitHub Actions | .github/workflows | CI/CD tool that automates the build, test, and deployment processes. |
| Code Linter | ESLint | eslint.config.js | Code linter that helps maintain consistent code style. |
| Code Formatter | Prettier | .prettierrc.yaml | Code formatter that helps maintain consistent code style. |
| Commit Linter | commitlint | .commitlintrc.json | Commit linter that checks if commit messages meet a certain format. |
| Git Hooks | husky | .husky | Git hooks that run tasks before/after Git commands. |
CI/CD pipelines are implemented using GitHub Actions. Workflow files are defined in .github/workflows.
| Pipeline | Deployed site | Trigger | Description |
|---|---|---|---|
| github-pages-deploy.yml (Prod) | mkschulz9.github.io | on Push to main branch |
Build and deploy to prod site. |
- The pipeline is triggered on push to the
mainbranch. - The pipeline has two jobs:
buildanddeploy. - The
buildjob installs dependencies, builds the project, and uploads the production-ready build files as an artifact. - The
deployjob downloads the artifact and deploys the production-ready build. - The pipeline uses a GitHub token stored in the repository secrets to deploy the production-ready build to GitHub Pages.
When a Git commit is made, the following happens in the background:
- ESLint and Prettier lint and format the staged code.
- commitlint checks if the commit message meets the Conventional Commits format.