DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Create Personal Portfolio Using Github Api with Blog
Ariful Alam
Ariful Alam

Posted on • Updated on

Create Personal Portfolio Using Github Api with Blog

For a developer, a personal portfolio plays an important role to showcase his/her works, reach to potential clients or land a job. But making it requires a tremendous amount of works and time. Also maintaining it manually with the latest project is a pain.

What if you could create your portfolio in 5 minutes just by providing your Github username and even host it without any cost? Do you want to display your skills, job history, education history, or even dev.to posts to your website? Then you are in right place.

Preview

Introducing GitProfile to kickstart your personal portfolio with Github Api and blog.

GitHub logo arifszn / gitprofile

πŸš€ Create an automatic portfolio based on GitHub profile.

GitProfile

Easy to use automatic portfolio builder for every GitHub user!

Preview
Shadow

What if you could create your portfolio in 5 minutes just by providing your GitHub username and even host it without any cost? Do you want to display your skills, job history, education, or blog posts on your portfolio? Introducing GitProfile.

GitProfile is an easy to use portfolio builder where you can create a portfolio page automatically by just providing your GitHub username. It is built using React.js on top of Vite.js. But it's not necessary to have knowledge on these to get you started. You can make your own copy with zero coding experience.

Features:

βœ“ Easy to Setup
βœ“ 30 Themes
βœ“ Google Analytics
βœ“ Hotjar
βœ“ SEO
βœ“ Avatar and Bio
βœ“ Social Links
βœ“ Skills
βœ“ Experience
βœ“ Education
βœ“ Projects
βœ“ Blog Posts

To view a live example, click here.

Or try…

GitProfile is an easy-to-customize personal dev portfolio template that is created with React.js. When you manage the code in a GitHub repository, it will automatically render a webpage with the owner's profile information, including a photo, bio, and repositories. Also, it includes space to highlight your details, job history, education history, skills, and recent blog posts.

It's all possible using GitHub API (for automatically populating your website with content) and Article-api (for fetching recent blog posts).

βœ“ 21 Themes
βœ“ Google Analytics
βœ“ Meta Tags
βœ“ Avatar and Bio
βœ“ Social Links
βœ“ Skills
βœ“ Experience
βœ“ Education
βœ“ Projects
βœ“ Blog Posts

To view a live example, click here.

πŸ›  Installation & Set Up

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

You'll need Git and Node.js (which comes with npm) installed on your computer.

  1. Fork the repo so you have your own project to customize. A "fork" is a copy of a repository.

  2. Once you've found a home for your forked repository, clone it.

  3. Change into your new directory.

cd gitprofile
Enter fullscreen mode Exit fullscreen mode

Install dependencies

npm install
Enter fullscreen mode Exit fullscreen mode

Start the development server

npm start
Enter fullscreen mode Exit fullscreen mode

🎨 Customization

All the magic happens in the file src/config. Open it and modify it according to your preference.

These are the default values:

config.js
// config.js
module.exports = {
  github: {
    username: 'arifszn', // Your GitHub org/user name. (Required)
    sortBy: 'stars', // stars | updated
    limit: 8, // How many projects to display.
    exclude: {
      forks: false, // Forked projects will not be displayed if set to true.
      projects: [] // These projects will not be displayed. example: ['my-project1', 'my-project2']
    }
  },
  social: {
    linkedin: '',
    twitter: '',
    facebook: '',
    dribbble: '',
    behance: '',
    medium: '',
    devto: '',
    website: '',
    email: ''
  },
  skills: [
    'JavaScript',
    'React.js',
  ],
  experiences: [
    {
      company: 'Company name 1',
      position: 'Software Engineer',
      from: 'July 2019',
      to: 'Present'
    },
    {
      company: 'Company name 2',
      position: 'Jr. Software Engineer',
      from: 'January 2019',
      to: ' June 2019'
    }
  ],
  education: [
    {
      institution: 'Institution name 1',
      degree: 'Bachelor of Science',
      from: '2015',
      to: '2019'
    },
    {
      institution: 'Institution name 2',
      degree: 'Higher Secondary Certificate (HSC)',
      from: '2012',
      to: '2014',
    }
  ],
  blog: {
    // Display blog posts from your medium or dev.to account. (Optional)
    source: 'dev.to', // medium | dev.to
    username: 'arifszn',
    limit: 5 // How many posts to display. Max is 10.
  },
  googleAnalytics: {
    // GA3 tracking id/GA4 tag id
    id: '' // UA-XXXXXXXXX-X | G-XXXXXXXXXX
  },
  themeConfig: {
    default: 'light',

    // Hides the theme change switch
    // Useful if you want to support a single color mode
    disableSwitch: false,

    // Should we use the prefers-color-scheme media-query,
    // using user system preferences, instead of the hardcoded default
    respectPrefersColorScheme: true,

    // Available themes. To remove any theme, exclude from here.
    themes: [
      'light',
      'dark',
      'cupcake',
      'bumblebee',
      'emerald',
      'corporate',
      'synthwave',
      'retro',
      'cyberpunk',
      'valentine',
      'halloween',
      'garden',
      'forest',
      'aqua',
      'lofi',
      'pastel',
      'fantasy',
      'wireframe',
      'black',
      'luxury',
      'dracula'
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Themes

There are 21 themes available that can be selected from the dropdown.

The default theme can be specified.

// config.js
module.exports = {
  // ...
  themeConfig: {
    default: 'light',
    // ...
  }
}
Enter fullscreen mode Exit fullscreen mode

Theme Dropdown

Here are some screenshots of different themes.

Themes

Themes

Themes

Themes

Themes

Themes

Google Analytics

GitProfile supports both GA3 and GA4. If you do not want to use Google Analytics, keep the id empty.

// config.js
module.exports = {
  // ...
  googleAnalytics: {
    id: ''
  },
}
Enter fullscreen mode Exit fullscreen mode

Besides tracking visitors, GitProfile will track click events on projects and blog posts, and send them to Google Analytics.

Google Analytics

Meta Tags

Meta tags will be auto-generated from configs dynamically. However, you can also manually add meta tags in public\index.html

Avatar and Bio

Your github avatar and bio will be displayed here.

Avatar Bio

Social Links

GitProfile supports linking your social media services you're using, including LinkedIn, Twitter, Facebook, Dribbble, Behance, Medium, dev.to, personal website, and email.

// config.js
module.exports = {
  // ...
  social: {
    linkedin: 'ariful-alam',
    twitter: 'arif_swozon',
    facebook: '',
    dribbble: '',
    behance: '',
    medium: '',
    devto: '',
    website: 'https://arifszn.github.io',
    email: ''
  },
}
Enter fullscreen mode Exit fullscreen mode

Skills

To showcase your skills provide them here.

// config.js
module.exports = {
  // ...
  skills: [
    'JavaScript',
    'React.js',
  ],
}
Enter fullscreen mode Exit fullscreen mode

Empty array will hide the skills section.

Experience

Provide your job history in experiences.

// config.js
module.exports = {
  // ...
  experiences: [
    {
      company: 'Company name 1',
      position: 'Software Engineer',
      from: 'July 2019',
      to: 'Present'
    },
    {
      company: 'Company name 2',
      position: 'Jr. Software Engineer',
      from: 'January 2019',
      to: ' June 2019'
    }
  ],
}
Enter fullscreen mode Exit fullscreen mode

Empty array will hide the experience section.

Education

Provide your education history in education.

// config.js
module.exports = {
  // ...
  education: [
    {
      institution: 'Institution name 1',
      degree: 'Bachelor of Science',
      from: '2015',
      to: '2019'
    },
    {
      institution: 'Institution name 2',
      degree: 'Higher Secondary Certificate (HSC)',
      from: '2012',
      to: '2014',
    }
  ],
}
Enter fullscreen mode Exit fullscreen mode

Empty array will hide the education section.

Projects

Your public repo from github will be displayed here automatically. You can limit how many projects do you want to be displayed. Also, you can hide forked or specific repo.

// config.js
module.exports = {
  // ...
  github: {
    username: 'arifszn',
    sortBy: 'stars',
    limit: 8,
    exclude: {
      forks: false,
      projects: ['my-project1', 'my-project2']
    }
  },
}
Enter fullscreen mode Exit fullscreen mode

Blog Posts

If you have medium or dev.to account, you can show your recent blog posts in here just by providing your medium/dev.to username. You can limit how many posts to display (Max is 10).

// config.js
module.exports = {
  // ...
  blog: {
    source: 'dev.to',
    username: 'arifszn',
    limit: 5
  },
}
Enter fullscreen mode Exit fullscreen mode

Blog

The posts are fetched by Article-api.

πŸš€ Deploy

Once you are done with your setup and have completed all steps above, you need to put your website online! The fastest approach is to use GitHub Pages which is completely free.

1. Github Pages:

  • Rename your forked repository to username.github.io, where username is your GitHub username (or organization name).
  • Open package.json, and change homepage's value to username.github.io.

    // package.json
    {
      // ...
      "homepage": "username.github.io",
    }
    
  • Run npm run deploy.

  • If you see README.md at username.github.io, be sure to change your GitHub Page's source to gh-pages branch. See how to.

Your personal portfolio will be live at username.github.io. For more info, visit here.

2. Other: You can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this doc for a detailed deployment guide.


Repo: https://github.com/arifszn/gitprofile
Demo: https://arifszn.github.io/gitprofile
Check out my other works: https://github.com/arifszn

Top comments (2)

Collapse
 
eke profile image
Eke Victor

Nice work man. Can you recommend resources for learning how to use the GitHub API. Or how to use API's in general. Thanks. πŸ™πŸ½

Collapse
 
arifszn profile image
Ariful Alam

To start, you can follow the official documentation.

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: