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.

Here is the live preview: Live preview url

STEP 01:

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

git clone https://github.com/swarupinfotech/github-dashboard.git
cd github-dashboard

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: 'swarupinfotech',
  devUsername: "swarupinfotech1",
  github: 'https://github.com/swarupinfotech',
  facebook: 'https://www.facebook.com/profile.php?id=100069856215966',
  linkedIn: 'https://www.linkedin.com/in/sarup-m-1a1372288/',
  twitter: 'https://x.com/SwarupInfotech',
  stackOverflow: 'https://stackoverflow.com/users/22920700/swarup-infotech',
  leetcode: "https://leetcode.com/u/lL3NvWLd4u/",
  resume: "#",
  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:

NEXT_PUBLIC_GTM = ""

STEP 04:

Now the GitHub portfolio website is ready for the run. You can run it using npm or yarn

npm run dev
# or
yarn dev

If you like this GitHub portfolio project you can consider giving it a star on the GitHub Repository.

You can connect with me on Linkedin: https://www.linkedin.com/in/sarup-m-1a1372288/

Disclaimer: In this repository, I have used some open-source APIs. All credits go to the owners of those repositories.