โญ Star us on GitHub โ it helps!
โ๏ธ Summary and About me
โ๏ธ Skills
โ๏ธ Interests
โ๏ธ Projects Connected with Github
โ๏ธ Experience
โ๏ธ Certifications ๐
โ๏ธ Accomplishments ๐
โ๏ธ Blogs
โ๏ธ Education
โ๏ธ Contact me
To view a live example, click here
- The website is completely built on
react-js
library ofjavascript
and that's why we neednodejs
andnpm
installed. - While installing
nodejs
andnpm
, try to install versions which are equal or greater than the versions mentioned in badges above. - In case you want to help developing it or simply saving it, you can fork the repository just by clicking the button on the top-right corner of this page.
- After the successful installation of
nodejs
andnpm
, clone the repository into your local system using below command:-
git clone https://github.com/NasigariJitesh/StudentPortfolio.git
- This will clone the whole repository in your system.
-
- To download required dependencies to your system, navigate to the directory where the cloned repository resides and execute following command:
-
npm install
-
- Now, the project is ready to use.
- You can check it using
npm start
, it will open the website locally on your browser.
In this project, there are basically 4 things that you need to change to customize this to anyone else's portfolio: package.json, Personal Information, Github Information and Splash Logo.
Open this file, which is in the main cloned directory, choose any "name" and change "homepage " to https://<your-github-username>.github.io
. Do not forget the https://
, otherwise fonts will not load.
You will find src/portfolio.js
file which contains the complete information about the user. The file looks something like below:
// Home Page
const greeting = {
...
}
// Social Media
const socialMediaLinks = {
...
}
...
You can change the personal information, experience, education, social media, certifications, blog information, contact information etc. in src/portfolio.js
to directly reflect them in portfolio website.
You will find git_data_fetcher.js
file in the main directory of the repository. This file is used to fetch the data (Organizations, Pinned projects etc.) from your github.
If you open the file, you will see below component at the top of the file. You need to change only that component.
const openSource = {
githubConvertedToken: "Your Github Token Here.",
githubUserName: "Your Github Username Here.",
};
You can get a github token as described here. Give all permissions while generating token. Also add your githubUserName
in the correct field inside git_data_fetcher.js
.
Now, you need to run following command.
Warning: Treat your tokens like passwords and keep them secret. When working with the API, use tokens as environment variables instead of hardcoding them into your programs.
node git_data_fetcher.js
This will fetch all the data from your github and it will automatically replace my data with yours. Whenever you want to update the github related information on the website you need to run this command.
Note here that if you click my portfolio, you can see animating the logo at the beginning. I have designed that logo in Figma
and then animated it using css.
Therefore, this part of portfolio is not customizable. But don't worry we have a solution to this problem. You have below two alternatives:
-
If you want to design your own logo, then you can design it using
Figma
orAdobe XD
orAdobe Illustrator
orInkscape
. If you want to animate it, you can refer to./src/components/Loader
directory which containsjs
andcss
files which animates the logo. -
If you don't want Splash screen or you don't know how to design logo, then this option is for you.
- You can open
src/portfolio.js
file and at the top of this file you will seesettings
component as below: -
// Website related settings const settings = { isSplash: true, };
- Change
isSplash
fromtrue
tofalse
. - Now, if you see your website using
npm start
, it will directly openhome
rather than animating logosplash
screen. - If you design your logo in future, then edit the files in
./src/components/Loader
and then revertisSplash
totrue
insrc/portfolio.js
.
Run
npm start
to check if everything is ok. - You can open
- Once you are done with your setup and have successfully completed all steps above, you need to put your website online!
- To deploy your website, you have two options. First you need to create a github repository with the name
<your-github-username>.github.io
. Please don't give it any other name. - Now, you need to generate a production build and deploy the website.
Option 1:
- Run
npm run build
to generate the production build folder. - Enter the build folder,
git init
and push the generated code to themaster
branch of your new repository. That's it. Done. You may need togit init
and force push at every new build.
Option 2 (will not work with user pages):
- Run
npm run deploy
to build and create a branch calledgh-pages
. It will push thebuild
files to that branch. - The last step in deploying is to enable
Github Pages
in settings of the repository and selectgh-pages
branch.
Now, your website is successfully deployed and you can visit it at <your-github-username>.github.io
.
This project is licensed under the MIT License - see the LICENSE.md file for details.
- Some Design and Implementation Ideas are taken from Saad Pasta's Portfolio Project and Ashutosh Hathidara's Portfolio Project