- What the idea : The idea was to create a progressive multilingual (multi-platform) web application displaying all the information necessary for a global and rapid vision of your Github account and to make it easily customizable for all developers, juniors and / or job seekers. Possibly, this so that he can highlight their profile in front of potential employers and, therefore, increase the number of visitors to their github page.
Github My Profile PWA (V2.0.0)
- What is it :
This is the GithubMyProfile app template for Create React App.
It is an open source multilingual (fr - en - pt) app licensed under the Creative Commons license.
Being a PWA, it is installable under most operating systems as well as under android (Tested myself).
You can now have a quick view of your Github account information, such as:
-
Your personal stats in real time among other statistics of the most used languages on the platform.
-
There is an "About" page and a footer that you can fully customize with your images, links, pdf, etc ...
-
Also, there is a list of 50 of your "created by you" and 50 "forked" repositories.
To use this template when creating a new app it's really easy.
here's how:
🌟🌟Fastest solution
With NPM package : Juste type this in your console (with the name app you want)
npx create-react-app <your-app-name-here> --template github-profile
after that, go to:
🌟The best & fastest solution
🚩 Important, the console must be opened in the folder where you want to install the application 🚩
✅Download* and unzip* my automatic installation script
*the script can be downloaded and unzipped or you wish, you can delete it once the installation is complete ❕
✅open your console, then drag and drop the bash file into the console,
✅finally hit the enter key to start the installation.
✅afterwards, you just have to put the name of your application when asked,
✅then press Enter key to continue installation
👉 Download the zip file here 👈
Installation:
When the installation is done, personalization steps:
The script will create an .env.local file and implement all environment variables automatically as the customization steps progress!
Of course, if you made a typing error for example, you can modify the .env.local file manually.
Github username:
Github avatar picture:
Porfolio logo picture link:
Portfolio name:
Picture of tools & languages used:
Picture of tools & languages used (optional):
Bio text (appear or not):
Developer links section:
Link name & link address:
Cv link (example):
Codepen link (example):
Link 4 (codesandbox for example):
Optionals illustrator link (or other) in this example I leave them empty:
End of personalization steps:
Do npm start in root folder
See the result with all infos:
Put your app name in this line, at <YOUR NAME HERE> and that's all!
# One ligne code (big, but one line only anyway)
mkdir packages && cd packages && git clone https://github.com/rodolphe37/cra-template-github-my-profile.git && cd .. && npx create-react-app <YOUR APP NAME HERE> --template file:./packages/cra-template-github-my-profile && rm -rf packages
after that, go to :
You can use the personalization script:
Or doing manually personalization:
For more information, please refer to:
- "GithubMyProfile application" The official repository of the open source project
- Getting Started – How to create a new app.
- User Guide – How to develop apps bootstrapped with Create React App.
- Tutorial – How to create custom Create React App (CRA) templates
Creative Commons
CC BY-NC-SA
Attribution - No Commercial Use - Sharing under the Same Conditions
See the Explanatory Summary | See the Legal Code
This license allows others to remix, adapt, and build on your work for non-commercial purposes, as long as they credit you and license their new creations on the same terms.