apoorvmaurya.github.io

</img>

Software Developer Master Portfolio πŸ”₯

A clean, beautiful, responsive, and 100% customizable portfolio
template for Software Developers!

HitCounts NodeJS NPM Made With React Join Slack Channel For Support code style: prettier
Netlify Status Build Status License Maintenance Website License Price

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

</img>

:star: Star us on GitHub β€” it helps!

Sections πŸ“š

βœ”οΈ Summary and About me
βœ”οΈ Skills
βœ”οΈ Open Source Projects Connected with Github
βœ”οΈ Experience
βœ”οΈ Certifications πŸ†
βœ”οΈ Blogs
βœ”οΈ Education
βœ”οΈ Contact me

To view a live example, click here

Clone and Use πŸ“‹

Customize it to make your own portfolio ✏️

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.

package.json

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.

Personal Information

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.

How to change the icons on homepage under what i do section?

  1. This section pulls data from skills 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 beside Selected Icon and replace it with fontAwesomeClassName of that particular softwareSkill.

How to use custom images instead of Iconify Icons?

  1. Add a valid image file into the public/skills folder
  2. Insert the image name into the imageSrc attribute of the particular softwareSkill
  3. Remove the fontAwesomeClassName property or leave it empty because it takes precedence over imageSrc
  4. Add custom styling to the img using the style Property

Github Information

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.

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:

Other

Choose Theme 🌈

Deployment πŸ“¦

Option 1:

Option 2 (will not work with user pages):

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.

</img>

Technologies used πŸ› οΈ

illustrations πŸ₯

License πŸ“„

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

Contributing πŸ’‘

If you can help us with these. Please don’t hesitate to open an pull request or issue.

Contributors ✨

Ashutosh Hathidara
Ashutosh Hathidara

πŸ’» πŸ“– 🎨 🚧 πŸ€”
Daniel Marostica
Daniel Marostica

πŸ“– 🎨
Dinesh Nadimpalli
Dinesh Nadimpalli

πŸ’»
Jivthesh M R
Jivthesh M R

πŸ“–
Jatin Chauhan
Jatin Chauhan

πŸ’»
Jainam Desai
Jainam Desai

πŸ’» πŸ’¬
Miftaul Mannan
Miftaul Mannan

πŸ’»
Ashutosh Mishra
Ashutosh Mishra

πŸ’»
Tamojit
Tamojit

πŸ“– πŸ’» 🎨
Prabin Karki
Prabin Karki

πŸ’»
Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

πŸ“–
paul
paul

πŸ’»
Sandip Dhang
Sandip Dhang

πŸ’»
Jawad Moustadif
Jawad Moustadif

πŸ’»
Priyansh Khandelwal
Priyansh Khandelwal

πŸ’» 🎨
Abdessalam Bahafid
Abdessalam Bahafid

πŸ’»
Dhruv Krishna Vaid
Dhruv Krishna Vaid

πŸ’» πŸ“– πŸ€” πŸ’¬
KasRoudra
KasRoudra

πŸ’»
Albert Einstein
Albert Einstein

πŸ“–
Suraj Pratap
Suraj Pratap

πŸ“–
Sai Teja
Sai Teja

πŸ’» πŸ“– 🚧 πŸ€”
Anirudh Panda
Anirudh Panda

πŸ’»
Md Hidayat Rasool
Md Hidayat Rasool

πŸ“–
Siddhant Sadangi
Siddhant Sadangi

πŸ“–
Anoop V
Anoop V

πŸ’»
Aakash Singh
Aakash Singh

πŸ’»
AngΓ©lica Herrera Alba
AngΓ©lica Herrera Alba

πŸ’»
David Minkovski
David Minkovski

πŸ€” πŸ’»
Carmine Di Gruttola
Carmine Di Gruttola

πŸ€” πŸ“£
Vyom Rana
Vyom Rana

πŸ’»

References πŸ‘πŸ»