✔️ Summary and About me
✔️ Skills
✔️ Experience
✔️ Certifications 🏆
✔️ Education
✔️ Contact me

To view a live example, click here

• The website is completely built on react-js library of javascript and that's why we need nodejs and npm installed.
• While installing nodejs and npm, 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 and npm, clone the repository into your local system using below command:

  •  git clone https://github.com/natephysics/masterPortfolio.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.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. 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.mjs. 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.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: I've modified the original template to include an extra field for embedded YouTube videos. After fetching the repository information, modify the .src/shared/opensource/projects.json file to include "video": "https://www.youtube.com/embed/<YT Video Code>?control=0&showinfo=00" for each repository.

There is an option to have an animated logo at the beginning. I have it disabled but if you click the original portfolio from ashutosh1919, you can see an example of it in action. It was designed that logo in Figma and then animated it using css. Therefore, this part of portfolio is not customizable. If you want to include an animated logo, you have below two alternatives:

• If you want to design your own logo, then you can design it using 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 logo.

• If you want Splash screen, then here is how to enable it.

  • You can open src/portfolio.js file and at the top of this file you will see settings component as below:

  • // Website related settings
    const settings = {
      isSplash: false,
    };

  • Change isSplash from false to true.
  • Now, if you see your website using npm start, it will directly open home rather than animating logo splash screen.
  • If you design your logo in future, then edit the files in ./src/components/Loader.

• You need to change the website title and other descriptions in public/index.html

• You can define your own favicon in public/icons directory. If you don't have a favicon, you can generate favicons from Favicon Generator and Favicon IO

• Also you can edit your website preview known as description image. Run your site locally, take a screenshot and replace with public/icons/desc.png. Note that your screenshot should be 1280x640 for better preview

• You can take a look at src/theme.js file where all available themes are mentioned with their respective color codes.

• At the bottom of this file you will see the below code:

  • export const chosenTheme = blueTheme;
  • You need to change the name from blueTheme to whatever theme you want to set your website to.
  • You can define new theme similarly as other themes and you can assign name of that new defined theme to chosenTheme.

• That's it. You just need to change the theme name and the code will take care of everything else.

  Run npm start to check if everything is ok.

• Once you are done with your setup and have successfully completed all steps above, you need to put your website online!
• I highly recommend using Github Pages to achieve this the EASIEST WAY.
• 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 the master branch of your new repository on github. That's it. It's Done.

• You may need to git 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 called gh-pages. It will push the build files to that branch.

• The last step in deploying is to enable 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 made by ashutosh1919.

• React
• graphql
• apollo-boost
• baseui
• react-reveal
• styled-components

• UnDraw

This project is licensed under the MIT License - see the LICENSE.md file for details.

I'm not actively maintaining this repository outside of my occasional updates. If you want to contribute to the project, please check out the original repository masterPortfolio. I have made changes to the functionality of the website and if you want to see that functionality integrated into the original project, reach out and I can submit a pull request.

Ashutosh Hathidara 💻 📖 🎨 🚧 🤔	Daniel Marostica 📖 🎨	Dinesh Nadimpalli 💻	Jivthesh M R 📖	Jatin Chauhan 💻	Jainam Desai 💻 💬	Miftaul Mannan 💻
Ashutosh Mishra 💻	Tamojit 📖	Prabin Karki 💻	Praveen Kumar Purushothaman 📖	paul 💻	Sandip Dhang 💻	Jawad Moustadif 💻
Priyansh Khandelwal 💻 🎨	Abdessalam Bahafid 💻	Dhruv Krishna Vaid 💻 📖 🤔 💬	KasRoudra 💻	Albert Einstein 📖	Suraj Pratap 📖

• Some Design and Implementation Ideas are taken from Saad Pasta's Portfolio Project.
• The Logo of MasterPortfolio is inspired from prettier-logo for prettier designed by @ianstormtaylor.