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)
The consistency is good and I love the border effect :)
Thanks for the feedback!
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!Thanks for the suggestion!
Looks great!
Thanks for sharing with us.
Thank you apu 😊
Beautiful ui
Thanks for the feedback!
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?
Please follow GitHub ReadMe.
This is nice to look at! I think i might try it.
Thank you Anna, you can try it.
This is one of the best-looking portfolio sites I have seen. Respect!
Thank you brother
Thank you for this template, i can now modified my Portfolio
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!
That's look cool, I must try. Thanks bro
Thank you!
Awesome!
Thanks for the feedback!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.