</img>
If you want to discuss about something, you can ask on my Discord Server.
:star: Star us on GitHub β it helps!
βοΈ Summary and About me
βοΈ Skills
βοΈ Open Source Projects Connected with Github
βοΈ Experience
βοΈ Certifications π
βοΈ Blogs
βοΈ Education
βοΈ Contact me
To view a live example, click here
react-js
library of javascript
and thatβs why we need nodejs
and npm
installednodejs
and npm
, try to install versions which are equal or greater than the versions mentioned in badges abovenodejs
and npm
, clone the repository into your local system using below command:
git clone https://github.com/ashutosh1919/masterPortfolio.git
This will clone the whole repository in your system.
npm install
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.
skills
in portfolio.js file.fontAwesomeClassName
of that particular softwareSkill.public/skills
folderimageSrc
attribute of the particular softwareSkillfontAwesomeClassName
property or leave it empty because it takes precedence over imageSrc
img
using the style
PropertyYou will find git_data_fetcher.mjs
file in the main directory of the repository. This file is used to fetch the data (Pull requests, Issues, Organizations, Pinned projects etc.) from your github.
In the project you will see a env.example
file, create a new file named .env
and copy contents of env.example
into it. In that file, you will see the following environment variables
GITHUB_TOKEN = your_token;
GITHUB_USERNAME = your_username;
You can get a github token as described here. Give all permissions while generating token. Add your github username and the token generated in GITHUB_USERNAME
and GITHUB_TOKEN
variables in the .env file.
Now, you need to run following command. (Make sure you executed npm install
before this)
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.mjs
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:
Figma
or Adobe XD
or Adobe Illustrator
or Inkscape
. If you want to animate it, you can refer to ./src/components/Loader
directory which contains js
and css
files which animates the logoIf you donβt want Splash screen or you donβt know how to design logo, then this option is for you
src/portfolio.js
file and at the top of this file you will see settings
component as below:
// Website related settings
const settings = {
isSplash: true,
};
isSplash
from true
to false
npm start
, it will directly open home
rather than animating logo splash
screen./src/components/Loader
and then revert isSplash
to true
in src/portfolio.js
.public/index.html
public/icons
directory. If you donβt have a favicon, you can generate favicons from Favicon Generator and Favicon IOpublic/icons/desc.png
. Note that your screenshot should be 1280x640 for better preview.src/theme.js
file where all available themes are mentioned with their respective color codesexport const chosenTheme = blueTheme;
blueTheme
to whatever theme you want to set your website tochosenTheme
npm start
to check if everything is ok.<your-github-username>.github.io
. Please donβt give it any other name.Option 1:
npm run build
to generate the production build folder.git init
and push the generated code to the master
branch of your new repository on github. Thatβs it. Itβs Done.git init
and force push at every new build.Option 2 (will not work with user pages):
npm run deploy
to build and create a branch called gh-pages
. It will push the build
files to that branch.Github Pages
in settings of the repository and select gh-pages
branch.Now, your website is successfully deployed and you can visit it at <your-github-username>.github.io
.
If you are stuck somewhere and want to observe the deployment process in depth, then please watch below video.
This project is licensed under the MIT License - see the LICENSE.md file for details.
If you can help us with these. Please donβt hesitate to open an pull request or issue.