AutoHub Portfolio(Automatic GitHub Portfolio) uses GitHub API to scrape your public repositories and present their data using conventions. You can always add additional projects, such as private repositories, manually. This project aims to create a quick portfolio without the need for a backend server, reducing expenses for new developers and serving as an example. For frontend contact form I used formspree. Currently project uses i18next for translations.
Highly recommend using something like ScreenToGif to create GIFs of the the project!
- Node.js (v20.10.0 or later)
- NPM or Yarn installed
Repositories cards are created following these conventions. Each color with arrow represents information flow.
Repositories pages follows mostly similiar information flow and includes description(if it exists).
All possible stack variantions can be found in src/enums/FrameworksEnum.tsx
. It includes not only frameworks
.
All possible languages variantions can be found in src/enums/LanguagesEnum.tsx
. It includes not only Programming
languages.
All possible sizes variantions can be found in src/enums/ProjectSizesEnum.tsx
.
Languages strings can be found in src/assets/translations
.
GitHub API has rate limits. For not registered users maximum is 60 calls per hour. AutoHub Portfolio uses FetchCacher to store fetched data and if limit is reached or error occurs it presents stored data instead.
- _ Version 0.0.1 contains some of my personal information that I do not mind sharing. The project was a bit rushed to be published, and in the following versions, the data will be minimized. _
[✔] 1.1 Add images/gifs to existing projects
- Create new
preview/images
folder and/orpreview/gifs
folder in existing repositories and fill them with content.
[✔] 2.1 Change GitHub User to scrape data from
- Locate
src/utils/api/GithubAPI
and in classGithubApi
changestatic name = "Your GitHub User Name"
.
[✔] 2.2 Install dependencies
- Run
npm install
in the root directory to install the required packages.
[✔] 2.3 Build the project
- Use
npm run build
to build project.
[✔] 3.1 Put project in GitHub as a Repository
- Create public repository on GitHub and push code to it or initialize repository remotly through git.
[✔] 3.2 Make GitHub page
- Make GitHub page. Recommend this tutorial for people who do not know how to deploy Vite React App.
[✔] 3.3 Fix Routes for GitHub Page
- In
package.json
edit these lines
"scripts": {
"dev": "vite --base=/AutoHub-Portfolio",
"build": "tsc && vite build --base=/AutoHub-Portfolio",
instead of "/AutoHub-Portfolio" use your own repository name
- In
vite.config.ts
edit base path
base: "/AutoHub-Portfolio/",
to your own repository name
- Project uses unsplash(MIT).