DEV Community

Cover image for Build an awesome GitHub developer portfolio.
ABU SAID
ABU SAID

Posted on

Build an awesome GitHub developer portfolio.

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

Image description

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


Enter fullscreen mode Exit fullscreen mode

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



npm install
# or
yarn


Enter fullscreen mode Exit fullscreen mode

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'
};


Enter fullscreen mode Exit fullscreen mode

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 = ""


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

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

effect

Collapse
 
said7388 profile image
ABU SAID

Thanks for the feedback!

Collapse
 
jamietanna profile image
Jamie Tanna

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!

Collapse
 
said7388 profile image
ABU SAID

Thanks for the suggestion!

Collapse
 
coderamrin profile image
Amrin

Looks great!
Thanks for sharing with us.

Collapse
 
said7388 profile image
ABU SAID

Thank you apu 😊

Collapse
 
essien1990 profile image
Nana Yaw

Beautiful ui

Collapse
 
said7388 profile image
ABU SAID

Thanks for the feedback!

Collapse
 
akmojahid profile image
Mujahid Ahmed

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?

Collapse
 
said7388 profile image
ABU SAID

Please follow GitHub ReadMe.

Collapse
 
annavi11arrea1 profile image
Anna Villarreal

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

Collapse
 
said7388 profile image
ABU SAID

Thank you Anna, you can try it.

Collapse
 
gordan_cuic profile image
Gordan Cuic

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

Collapse
 
said7388 profile image
ABU SAID

Thank you brother

Collapse
 
ramonortegajr profile image
R A M

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

Collapse
 
said7388 profile image
ABU SAID

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!

Collapse
 
akmojahid profile image
Mujahid Ahmed

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

Collapse
 
said7388 profile image
ABU SAID

Thank you!

Collapse
 
rubenesda profile image
Ruben Dario Escandon Guzman

Awesome!

Collapse
 
said7388 profile image
ABU SAID

Thanks for the feedback!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.