ABU SAID

Posted on May 6

Build an awesome GitHub developer portfolio.

#portfolio #developer #github #nextjs

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/said7388/github-portfolio.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:

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/abu-said-bd/

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

Top comments (28)

Anmol Baranwal • May 6

The consistency is good and I love the border effect :)

ABU SAID • May 6

Thanks for the feedback!

Jamie Tanna • May 7

FYI there's no license on the template repo, so folks can't actually use it, legally speaking, as it defaults to All-Rights-Reserved (proprietary) so it's worth putting a license on it!

ABU SAID • May 7

Thanks for the suggestion!

Amrin • May 10

Looks great!
Thanks for sharing with us.

ABU SAID • May 10

Thank you apu 😊

Nana Yaw • May 7

Beautiful ui

ABU SAID • May 8

Thanks for the feedback!

Mujahid Ahmed • May 9

Hi Abu Said, I really love this theme. I tried to implement this in my GitHub profile but I couldn't make it. Can you tell me bit more about it, How can I add that to my GitHub profile?

ABU SAID • May 10

Please follow GitHub ReadMe.

Gordan Cuic • May 8

This is one of the best-looking portfolio sites I have seen. Respect!

ABU SAID • May 10

Thank you brother

Anna Villarreal • May 8

This is nice to look at! I think i might try it.

ABU SAID • May 10

Thank you Anna, you can try it.

Mujahid Ahmed • May 7

That's look cool, I must try. Thanks bro

ABU SAID • May 7

Thank you!

Ruben Dario Escandon Guzman • May 7

Awesome!

ABU SAID • May 7

Thanks for the feedback!

R A M • May 7

Thank you for this template, i can now modified my Portfolio

ABU SAID • May 7

You're very welcome! I'm glad the template was helpful for you in modifying your portfolio. If you have any more questions or need further assistance, feel free to ask. Good luck with your portfolio!