DEV Community

Cover image for Create a fantastic GitHub developer portfolio with next js.
Dharmendra Kumar
Dharmendra Kumar

Posted on • Updated on

Create a fantastic GitHub developer portfolio with next js.

Introduction

Struggling to create a professional-looking portfolio website? Look no further! With this GitHub Portfolio template, you can easily create a personalized portfolio using just your GitHub username. Whether you're a developer or a freelancer, this user-friendly and customizable solution is perfect for showcasing your work.

Demo

demo image

You can view the live preview of the portfolio here.

Installation

Before you get started, make sure you have Git and Node installed on your computer:

Verify that you have the latest versions of Git and Node by running the following commands in your terminal:

node --version
git --version
Enter fullscreen mode Exit fullscreen mode

Getting Started

  1. Fork and Clone the Repository:

    • Fork the repository by clicking the "Fork" button at the top right of the page.
    • Open your terminal and clone the forked repository:
     git clone https://github.com/dharam-gfx/github-portfolio.git
     cd github-portfolio
    
  2. Install Packages:

    • Install the required packages from the root directory:
     npm install
     # or
     yarn install
    
  • Start the development server:

     npm run dev
     # or
     yarn dev
    
  • Open http://localhost:3000 in your browser to see the result.

  1. Customize User Data:

    • Edit the data/user-data.js file to personalize your information. For example:
     export const userData = {
       githubUser: "dharam-gfx",
       devUsername: "dharam-gfx",
       github: "https://github.com/dharam-gfx",
       facebook: "https://facebook.com/dharam01.official",
       linkedIn: "https://www.linkedin.com/in/dharmendra-kumar-a588a4119/",
       twitter: "https://twitter.com/dharam_gfx",
       stackOverflow: "https://stackoverflow.com/users/24954262/dharmendra-kumar",
       leetcode: "https://leetcode.com/u/dharam-gfx/",
       resume: "#",
       skills: [
         "React",
         "NextJS",
         "Redux",
         "Express",
         "NestJS",
         "MySql",
         "MongoDB",
         "Vue",
         "Adobe Photoshop",
         "Premiere Pro",
       ],
       timezone: "+6",
     };
    
  2. Optional: Google Analytics

    • If you want to use Google Analytics, create a new .env file from .env.example and provide the value:
     NEXT_PUBLIC_GTM = ""
    

Packages Used

The following packages were used in this project:

  • next
  • @next/third-parties
  • axios
  • react-icons
  • react-github-calendar
  • sass
  • tailwindcss

Disclaimer

This repository uses open-source APIs. All credits go to the original owners of those repositories.

Top comments (0)