Repository files navigation

If you want to discuss about something, you can ask on myDiscord Server.

⭐ 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

• The website is completely built onreact-js library ofjavascript and that's why we neednodejs andnpm installed
• While installingnodejs 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 ofnodejs andnpm, 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.
• To download required dependencies to your system, navigate to the directory where the cloned repository resides and execute following command:

  npminstall

• Now the project is ready to use
• You can check it usingnpm 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 andSplash Logo.

Open this file, which is in the main cloned directory, choose any "name" and change "homepage " tohttps://<your-github-username>.github.io. Do not forget thehttps://, otherwise fonts will not load.

You will findsrc/portfolio.js file which contains the complete information about the user. The file looks something like below:

// Home Pageconstgreeting={    ...}// Social MediaconstsocialMediaLinks={    ...}...

You can change the personal information, experience, education, social media, certifications, blog information, contact information etc. insrc/portfolio.js to directly reflect them in portfolio website.

1. This section pulls data fromskills in portfolio.js file.
2. Visit this website:https://icon-sets.iconify.design/
3. Search for the skill you are looking to add.
4. Select the icon of your choice.
5. Copy the text besideSelected Icon and replace it withfontAwesomeClassName of that particular softwareSkill.

1. Add a valid image file into thepublic/skills folder
2. Insert the image name into theimageSrc attribute of the particular softwareSkill
3. Remove thefontAwesomeClassName property or leave it empty because it takes precedence overimageSrc
4. Add custom styling to theimg using thestyle Property

You will findgit_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 aenv.example file, create a new file named.env and copy contents ofenv.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 describedhere. Give all permissions while generating token. Add your github username and the token generated inGITHUB_USERNAME andGITHUB_TOKEN variables in the .env file.

Now, you need to run following command. (Make sure you executednpm 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.

nodegit_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 clickmy portfolio, you can see animating the logo at the beginning. I have designed that logo inFigma 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 usingFigma 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 opensrc/portfolio.js file and at the top of this file you will seesettings component as below:

    // Website related settingsconstsettings={isSplash:true,};

  • ChangeisSplash fromtrue tofalse
  • Now, if you see your website usingnpm 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.

• You need to change the website title and other descriptions inpublic/index.html
• You can define your own favicon inpublic/icons directory. If you don't have a favicon, you can generate favicons fromFavicon Generator andFavicon IO
• You can also edit your website preview (known as description image). Run your site locally, take a screenshot and replace withpublic/icons/desc.png. Note that your screenshot should be 1280x640 for better preview.

• You can take a look atsrc/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 fromblueTheme 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 tochosenTheme
• That's it. You just need to change the theme name and the code will take care of everything else
• Runnpm 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 usingGithub 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:

• Runnpm 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 on github. That's it. It's Done.
• You may need togit init and force push at every new build.

Option 2 (will not work withuser pages):

• Runnpm 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 enableGithub 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.
If you are stuck somewhere and want to observe the deployment process in depth, then please watch below video.

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

• UnDraw

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

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 📖	Sai Teja 💻📖🚧🤔
Anirudh Panda 💻	Md Hidayat Rasool 📖	Siddhant Sadangi 📖	Anoop V 💻	Aakash Singh 💻	Angélica Herrera Alba 💻	David Minkovski 🤔💻
Carmine Di Gruttola 🤔📣	Vyom Rana 💻	Parth Chawande 💻	Armaan 📖	Varun Dhand 💻	VJS Pranavasri 💻	Rahul Kushwaha 💻
Adam Bouhrara 💻

• Some Design and Implementation Ideas are taken fromSaad Pasta's Portfolio Project.
• The Logo of MasterPortfolio is inspired fromprettier-logo forprettier designed by @ianstormtaylor.