SkillAgentSearch skills...

Gitprofile

๐Ÿš€ Create and publish a dynamic portfolio by just providing your GitHub username.

Install / Use

/learn @arifszn/Gitprofile

README

<br/> <p align="center"> <img src="https://user-images.githubusercontent.com/45073703/177566625-9b84e793-4559-4475-ba54-8d3d5f4123d4.png" width="35%"> <h4 align="center">Easy to use automatic portfolio builder for every GitHub user!</h4> <p align="center"> <a href="https://codeclimate.com/github/arifszn/gitprofile/maintainability"><img src="https://api.codeclimate.com/v1/badges/c60f42d7d0b61bd33e98/maintainability" /></a> <a href="https://github.com/arifszn/gitprofile/actions/workflows/deploy.yml"><img src="https://github.com/arifszn/gitprofile/actions/workflows/deploy.yml/badge.svg" /></a> <a href="https://github.com/arifszn/gitprofile/issues"><img src="https://img.shields.io/github/issues/arifszn/gitprofile"/></a> <a href="https://github.com/arifszn/gitprofile/stargazers"><img src="https://img.shields.io/github/stars/arifszn/gitprofile"/></a> <a href="https://github.com/arifszn/gitprofile/network/members"><img src="https://img.shields.io/github/forks/arifszn/gitprofile"/></a> <a href="https://github.com/arifszn/gitprofile/commits/main"><img src="https://img.shields.io/github/last-commit/arifszn/gitprofile/main"/></a> <a href="https://github.com/arifszn/gitprofile/blob/main/CONTRIBUTING.md"><img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat"/></a> <a href="https://github.com/arifszn/gitprofile/blob/main/LICENSE"><img src="https://img.shields.io/github/license/arifszn/gitprofile"/></a> </p> <p align="center"> <a href="https://arifszn.github.io/gitprofile">View Demo</a> ยท <a href="https://github.com/arifszn/gitprofile/issues">Report Bug</a> ยท <a href="https://github.com/arifszn/gitprofile/discussions">Request Feature</a> </p> </p> <p align="center"> <a href="https://arifszn.github.io/gitprofile"> <img src="https://github.com/arifszn/gitprofile/assets/45073703/eb6c38a4-ac92-4006-869b-e4e24f6f5cf6" alt="Preview" width="60%"/> </a> <br/> <a href="#arifszn"><img src="https://github.com/arifszn/gitprofile/assets/45073703/4d2ccd45-e566-4743-bf61-cadc03ece54c" width="50%" alt="Shadow"/></a> </p>

GitProfile is a powerful portfolio builder that allows you to create a stunning and personalized portfolio site in minutes, even if you have no coding experience. Simply provide your GitHub username, and GitProfile will automatically generate a portfolio. Best of all, you can easily deploy your portfolio to GitHub Pages with just a few clicks, making it accessible to the world in no time.

Features:

โœ“ Easy to Setup
โœ“ 37 Themes
โœ“ Google Analytics
โœ“ Hotjar
โœ“ SEO
โœ“ PWA
โœ“ Avatar and Bio
โœ“ Social Links
โœ“ Skill Section
โœ“ Experience Section
โœ“ Certification Section
โœ“ Education Section
โœ“ Projects Section
โœ“ Publication Section
โœ“ Blog Posts Section

To view a live example, click here.

<p align="center"> <img src="https://github.com/arifszn/gitprofile/assets/45073703/406e8368-415a-42ef-89c5-d43cc8bbeb19" alt="Themes"> </p>

๐Ÿ›  Installation & Setup

There are two ways to use GitProfile. Use any.

Forking this repo

These instructions will get you a copy of the project and deploy your portfolio online using GitHub Pages!

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

  • Rename repo:

    • If you want to host your portfolio at https://<USERNAME>.github.io, rename your forked repository to username.github.io in GitHub, where username is your GitHub username (or organization name).
    • If you want to host your portfolio at https://<USERNAME>.github.io/<REPO_NAME> (e.g. https://<USERNAME>.github.io/portfolio), rename your forked repository to <REPO_NAME> (e.g. portfolio) in GitHub.
  • Enable workflows: Go to your repo's Actions tab and enable workflows.

    Workflows

  • Base Value: Open gitprofile.config.ts, and change base's value.

    • If you are deploying to https://<USERNAME>.github.io, set base to '/'.

    • If you are deploying to https://<USERNAME>.github.io/<REPO_NAME> (e.g. https://<USERNAME>.github.io/portfolio), then set base to '/<REPO_NAME>/' (e.g. '/portfolio/').

    // gitprofile.config.ts
    {
      base: '/',
      // ...
    }
    
  • Commit the changes: Now commit to your main branch with your changes. Wait a few minutes so that the CI/CD pipeline can publish your website to GitHub Pages. You can check the progress in the Actions tab.

Your portfolio website will be live shortly. Any time you commit a change to the main branch, the website will be automatically updated. If you face any issue viewing the website, double-check the base value in the gitprofile.config.ts file. Also, check if Source is set to GitHub Actions in Settings โžœ Pages โžœ Build and deployment.

If you wish to add a custom domain, no CNAME file is required. Just add it to your repo's Settings โžœ Pages โžœ Custom domain.

As this is a Vite project, you can also host your website to Netlify, Vercel, Heroku, or other popular services. Please refer to this doc for a detailed deployment guide to other services.

[!NOTE] If you are going to deploy using Vercel, remember to set the base as /.

// gitprofile.config.ts
{
  base: '/',
  // ...
}

Not working?

Setting up locally

  • Clone the project and change directory.

    git clone https://github.com/arifszn/gitprofile.git
    cd gitprofile
    
  • Install dependencies.

    npm install
    
  • Run dev server.

    npm run dev
    
  • Finally, visit http://localhost:5173/gitprofile/ from your browser.

Alternatively, you can set up and run the project using Docker with Vail, a powerful tool for local development of JavaScript/TypeScript Apps.

๐ŸŽจ Customization

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

You can leave most of the sections empty if you don't want to display them on your portfolio.

// gitprofile.config.ts

const CONFIG = {
  github: {
    username: 'arifszn', // Your GitHub org/user name. (This is the only required config)
  },
  /**
   * If you are deploying to https://<USERNAME>.github.io/, for example your repository is at https://github.com/arifszn/arifszn.github.io, set base to '/'.
   * If you are deploying to https://<USERNAME>.github.io/<REPO_NAME>/,
   * for example your repository is at https://github.com/arifszn/portfolio, then set base to '/portfolio/'.
   */
  base: '/gitprofile/',
  projects: {
    github: {
      display: true, // Display GitHub projects?
      header: 'Github Projects',
      mode: 'automatic', // Mode can be: 'automatic' or 'manual'
      automatic: {
        sortBy: 'stars', // Sort projects by 'stars' or '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: ['arifszn/my-project1', 'arifszn/my-project2']
        },
      },
      manual: {
        // Properties for manually specifying projects
        projects: ['arifszn/gitprofile', 'arifszn/pandora'], // List of repository names to display. example: ['arifszn/my-project1', 'arifszn/my-project2']
      },
    },
    external: {
      header: 'My Projects',
      // To hide the `External Projects` section, keep it empty.
      projects: [
        {
          title: 'Project Name',
          description:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
          imageUrl:
            'https://img.freepik.com/free-vector/illustration-gallery-icon_53876-27002.jpg',
          link: 'https://example.com',
        },
        {
          title: 'Project Name',
          description:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
          imageUrl:
            'https://img.freepik.com/free-vector/illustration-gallery-icon_53876-27002.jpg',
          link: 'https://example.com',
        },
      ],
    },
  },
  seo: { title: 'Portfolio of Ariful Alam', description: '', imageURL: '' },
  social: {
    linkedin: 'ariful-alam',
    x: 'arif_szn',
    mastodon: 'arifszn@mastodon.social',
    researchGate: '',
    facebook: '',
    instagram: '',
    reddit: '',
    threads: '',
    youtube: '', // example: 'pewdiepie'
    udemy: '',
    dribbble: '',
    behance: '',
    medium: 'arifszn',
    dev: 'arifszn',
    stackoverflow: '', // example: '1/jeff-atwood'
    discord: '',
    telegram: '',
    website: 'https://www.arifszn.com',
    phone: '',
    email: 'arifulalamszn@gmail.com',
  },
  resume: {
    fileUrl:
      'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf', // Empty fileUrl will hide the `Download Resume` button.
  },
  skills: [
    'PHP',
    'Laravel',
    'JavaScript',
    'React.js',
    'Node.js',
    'Nest.js',
    'MySQL',
    'PostgreSQL',
    'Git',
    'Docker',
    'PHPUnit',
    'CSS',
    'Antd',
    'Tailwind',
  ],
  experiences: [
    {
      company: 'Company Name',
      position: 'Position',
      from: 'September 2021',
      to: 'Present',
  
View on GitHub
GitHub Stars2.2k
CategoryEducation
Updated13h ago
Forks2.1k

Languages

TypeScript

Security Score

100/100

Audited on Mar 28, 2026

No findings