This portfolio site is designed to showcase my work and provide a way to contact me.
It uses React on top of the Gatsby framework for static site generation. At build time, it fetches repository data from the GitHub API to display a selection of my public repositories.
The UI is styled with Tailwind CSS and daisyUI. TypeScript is used for type checking, and Biome.js is used for linting and formatting. gatsby-plugin-component-to-image is used to dynamically generate social images from React components.
- Node.js
- Yarn 4
- A GitHub personal access token (PAT) that can be used to access the GitHub API. This token should have public (read-only) access to all repositories as it is used to fetch repository data for the projects section.
- Clone the repo with
https://github.com/jerboa88/jerboa88.github.io.git. Alternatively, you can download the repository as a zip file and extract it. - Enter the project root with
cd jerboa88.github.io. - Use
yarn installto install the app and all of its dependencies.
The GH_TOKEN environment variable must be set to your GitHub PAT in order to fetch repository data, otherwise the build will fail. An easy way to do this is to create an .env.development or .env.production file in the project root like so:
# .env.development
GH_TOKEN=your_github_pat_hereThe site is configured to fetch repository data from the jerboa88 GitHub account by default, so if you want to fetch data for a different user, you will need to replace all instances of jerboa88 in the code with your own username.
Most of the site's configuration options are set in src/common/constants.tsx and src/config/*.tsx.
More sensitive configuration values like the author's phone number and email address can be set via environment variables like so:
# .env.development
AUTHOR_PHONE='(555) 555-5555'
AUTHOR_EMAIL='[email protected]'Currently, these values are only used for the contact section of the resume.
We can build the site with the Gatsby CLI. All of the necessary commands are declared in package.json for convenience.
Use yarn develop to run the app in development mode. This will start the development server at localhost:8000 (by default). The project will automatically be rebuilt when changes are made.
Use yarn build to generate a production build of the app, then use yarn serve to serve it. The site can be viewed at localhost:9000 (by default).
yarn clean can be used to clear the local Gatsby cache if you encounter any issues with stale data/dependencies.
yarn typecheck can be used to perform type checking using TypeScript.
yarn lint and yarn format can be used to apply linting and formatting fixes to the codebase using Biome.js.
See the Gatsby CLI docs for additional commands and options. To run an arbitrary command, prefix it with yarn (ex. yarn gatsby repl).
This project is not open to code contributions, but feedback and bug reports are always welcome.
x.1 releases mark the final update for a given design, while x.0 releases are reserved for major redesigns. Changes between the first and last release of a design are not explicitly versioned.
This project is licensed under the MIT License. See LICENSE for details. This project includes various resources which carry their own copyright notices and license terms. See LICENSE-THIRD-PARTY.md for more details.