Build an awesome GitHub developer portfolio.

#portfolio #webdev #javascript #beginners

In the software development world, it's crucial to effectively present your work alongside the code you write. A portfolio website is an excellent way for developers to showcase their skills, projects, and contributions. One innovative way to enhance your portfolio is by integrating GitHub statistics, which can provide real-time insights into your coding activity and contributions.

To assist other developers in achieving this, I have created a new website from scratch that highlights your GitHub works. The website is built using NextJS and Tailwind CSS, and it fetches all data from your GitHub profile and work.

This article will guide you through the setup process step by step, and it will also provide you with the GitHub link.

STEP 01:
Clone the Repository using GitHub link and change the directory to the github-portfolio.

git clone https://github.com/barrujamisrg/PORTOFOLIO.git
cd github-portfolio

STEP 02:
Now install all packages using npm or yarn.

npm install
# or
yarn

After installation, all packages, Now change all data on data/user-data.js according to you. For example:

 export const userData = {
  githubUser: 'said7388',
  devUsername: "said7388",
  github: 'https://github.com/said7388',
  facebook: 'https://www.facebook.com/abusaid.riyaz/',
  linkedIn: 'https://www.linkedin.com/in/abu-said-bd/',
  twitter: 'https://twitter.com/said7388',
  stackOverflow: 'https://stackoverflow.com/users/16840768/abu-said',
  leetcode: "https://leetcode.com/said3812/",
  resume: "https://drive.google.com/file/d/1eyutpKFFhJ9X-qpQGKhUNnVRkB5Wer00/view?usp=sharing",
  skills: ['React', 'NextJS', 'Redux', 'Express', 'NestJS', 'MySql', 'MongoDB', 'Postgres', 'Docker', 'AWS'],
  timezone: '+6'
};

STEP 03:
If you want to use Google Analytics, Please create a new .env file from the .env.example file and provide the value. The .env file will be the following: