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/or preview/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 class GithubApi change static 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).

• Pankaj Patel
• Billy Huynh