Is gitprofile free to use?

gitprofile is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does gitprofile do?

🚀 Create and publish a GitHub-synced portfolio by just providing your GitHub username.

What is gitprofile written in?

gitprofile is primarily written in TypeScript. Its source is publicly available at https://github.com/arifszn/gitprofile, and it has 2,328 GitHub stars.

gitprofile: Open Source Blogging & Personal Sites

Your GitHub-synced portfolio — easy to set up, updates itself!

View Demo · Report Bug · Request Feature

Shadow

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
✓ 36 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.

Themes

🛠 Installation & Setup

There are three ways to use GitProfile. Use any.

Forking this repo (recommended)
Setting up locally
Letting an AI agent do it

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://.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://.github.io/ (e.g. https://.github.io/portfolio), rename your forked repository to `` (e.g. portfolio) in GitHub.
Enable workflows: Go to your repo's Actions tab and enable workflows.
Base Value: Open gitprofile.config.ts, and change base's value.
- If you are deploying to https://.github.io, set base to '/'.
- If you are deploying to https://.github.io/ (e.g. https://.github.io/portfolio), then set base to '//' (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

Requires Node.js 20+.

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.

Letting an AI agent do it

If you use Claude Code, Codex, Cursor, Gemini CLI, or any other coding agent, it can fork the repo, fill in your details, and deploy it for you. Just tell your agent to install it — paste:

Fetch and follow the install instructions from
https://raw.githubusercontent.com/arifszn/gitprofile/refs/heads/main/INSTALL.md

The agent will ask you what to put on your portfolio, then handle the config and deployment. With the GitHub CLI authenticated it deploys to GitHub Pages; without it, it deploys to Surge, Vercel, or Netlify instead.

🎨 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: '',
  },
  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',
      companyLink: 'https://example.com',
    },
    {
      company: 'Company Name',
      position: 'Position',
      from: 'July 2019',
      to: 'August 2021',
      companyLink: 'https://example.com',
    },
  ],
  certifications: [
    {
      name: 'Lorem ipsum',
      body: 'Lorem ipsum dolor sit amet',
      year: 'March 2022',
      link: 'https://example.com',
    },
  ],
  educations: [
    {
      institution: 'Institution Name',
      degree: 'Degree',
      from: '2015',
      to: '2019',
    },
    {
      institution: 'Institution Name',
      degree: 'Degree',
      from: '2012',
      to: '2014',
    },
  ],
  publications: [
    {
      title: 'Publication Title',
      conferenceName: '',
      journalName: 'Journal Name',
      authors: 'John Doe, Jane Smith',
      link: 'https://example.com',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    },
    {
      title: 'Publication Title',
      conferenceName: 'Conference Name',
      journalName: '',
      authors: 'John Doe, Jane Smith',
      link: 'https://example.com',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    },
  ],
  // Display articles from your medium or dev account. (Optional)
  blog: {
    source: 'dev', // medium | dev
    username: 'arifszn', // to hide blog section, keep it empty
    limit: 2, // How many articles to display. Max is 10.
  },
  googleAnalytics: {
    id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX
  },
  // Track visitor interaction and behavior. https://www.hotjar.com
  hotjar: { id: '', snippetVersion: 6 },
  themeConfig: {
    defaultTheme: 'lofi',

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

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

    // Display the ring in Profile picture
    displayAvatarRing: 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',
      'cmyk',
      'autumn',
      'business',
      'acid',
      'lemonade',
      'night',
      'coffee',
      'winter',
      'dim',
      'nord',
      'sunset',
      'caramellatte',
      'abyss',
      'silk',
      'procyon',
    ],
  },

  // Optional Footer. Supports plain text or HTML.
  footer: `Made with <a 
      class="text-primary" href="https://github.com/arifszn/gitprofile"
      target="_blank"
      rel="noreferrer"
    >GitProfile</a> and ❤️`,

  enablePWA: true,
};

export default CONFIG;

Themes

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

The default theme can be specified. Removing a theme from themes takes it out of the dropdown.

// gitprofile.config.ts
const CONFIG = {
  // ...
  themeConfig: {
    defaultTheme: 'light',

    // Hides the switch in the navbar.
    // Useful if you want to support a single color mode.
    disableSwitch: false,

    // Should use the prefers-color-scheme media-query,
    // using user system preferences, instead of the hardcoded defaultTheme.
    respectPrefersColorScheme: false,

    // Display the ring in Profile picture.
    displayAvatarRing: true,

    // Available themes. To remove any theme, exclude it from here.
    themes: ['light', 'dark', 'nord'],
  },
};

Theme Dropdown

You can create your own custom theme by modifying the CSS variables in src/assets/index.css. Theme procyon is defined as a custom theme.

/* src/assets/index.css */
@plugin "daisyui/theme" {
  name: 'procyon';
  color-scheme: light;

  --color-base-100: #e3e3ed;
  --color-base-200: #d1d1db;
  --color-base-300: #bfbfc9;
  --color-base-content: #2a2730;
  --color-primary: #fc055b;
  --color-primary-content: #ffffff;
  --color-secondary: #219aaf;
  --color-secondary-content: #ffffff;
}

Google Analytics

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

// gitprofile.config.ts
const CONFIG = {
  // ...
  googleAnalytics: { id: 'G-XXXXXXXXX' },
};

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

Hotjar

GitProfile supports hotjar to track visitor interaction and behavior. If you do not want to use Hotjar, keep the id empty.

// gitprofile.config.ts
const CONFIG = {
  // ...
  hotjar: { id: '', snippetVersion: 6 },
};

SEO

You can customize the meta tags for SEO in seo.

// gitprofile.config.ts
const CONFIG = {
  // ...
  seo: { title: 'Portfolio of Ariful Alam', description: '', imageURL: '' },
};

PWA

GitProfile is PWA enabled. The site can be installed as a Progressive Web App. To turn it off, set enablePWA to false.

PWA

Avatar and Bio

Your avatar and bio will be fetched from GitHub automatically.

Social Links

You can link your social media services you're using, including LinkedIn, X, Mastodon, ResearchGate, Facebook, Instagram, Reddit, Threads, YouTube, Udemy, Dribbble, Behance, Medium, dev, Stack Overflow, Discord, Telegram, personal website, phone and email.

// gitprofile.config.ts
const CONFIG = {
  // ...
  social: {
    linkedin: 'ariful-alam',
    x: 'arif_szn',
    mastodon: 'arifszn@mastodon.social',
    researchGate: '',
    facebook: '',
    instagram: '',
    reddit: '',
    threads: '',
    youtube: '',
    udemy: '',
    dribbble: '',
    behance: '',
    medium: '',
    dev: '',
    stackoverflow: '',
    discord: '',
    telegram: '',
    website: '',
    phone: '',
    email: '',
  },
};

Resume

Link a downloadable resume in resume. An empty fileUrl hides the Download Resume button.

// gitprofile.config.ts
const CONFIG = {
  // ...
  resume: { fileUrl: 'https://example.com/resume.pdf' },
};

Skills

To showcase your skills provide them here.

// gitprofile.config.ts
const CONFIG = {
  // ...
  skills: ['JavaScript', 'React.js'],
};

Empty array will hide the skills section.

Experience

Provide your job history in experiences.

// gitprofile.config.ts
const CONFIG = {
  // ...
  experiences: [
    {
      company: 'Company Name',
      position: 'Position',
      from: 'September 2021',
      to: 'Present',
      companyLink: 'https://example.com',
    },
    {
      company: 'Company Name',
      position: 'Position',
      from: 'July 2019',
      to: 'August 2021',
      companyLink: 'https://example.com',
    },
  ],
};

Empty array will hide the experience section.

Education

Provide your education history in educations.

// gitprofile.config.ts
const CONFIG = {
  // ...
  educations: [
    {
      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',
    },
  ],
};

Empty array will hide the education section.

Certifications

Provide your industry certifications in certifications.

// gitprofile.config.ts
const CONFIG = {
  // ...
  certifications: [
    {
      name: 'Lorem ipsum',
      body: 'Lorem ipsum dolor sit amet',
      year: 'March 2022',
      link: 'https://example.com',
    },
  ],
};

Empty array will hide the certifications section.

Projects

Github Projects

Automatic Mode: Seamlessly showcase your top GitHub projects based on stars or last updated date.
Manual Mode: Choose specific repositories to highlight.

// gitprofile.config.ts
const CONFIG = {
  // ...
  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 Projects

Highlight Projects Beyond GitHub: Feature projects hosted on other platforms or personal websites.
Control over Content: Provide custom titles, descriptions, images, and links for each external project.

// gitprofile.config.ts
const CONFIG = {
  // ...
  projects: {
    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',
        },
      ],
    },
  },
};

Publications

Provide your academic publishing in publications.

// gitprofile.config.ts
const CONFIG = {
  // ...
  publications: [
    {
      title: 'Publication Title',
      conferenceName: 'Conference Name',
      journalName: 'Journal Name',
      authors: 'John Doe, Jane Smith',
      link: 'https://example.com',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
    },
  ],
};

Empty array will hide the publications section.

Blog Posts

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

// gitprofile.config.ts
const CONFIG = {
  // ...
  blog: { source: 'dev', username: 'arifszn', limit: 5 },
};

Blog

The posts are fetched by blog.js.

Footer

An optional footer, supporting plain text or HTML. Keep it empty to hide the footer.

// gitprofile.config.ts
const CONFIG = {
  // ...
  footer: `Made with <a
      class="text-primary" href="https://github.com/arifszn/gitprofile"
      target="_blank"
      rel="noreferrer"
    >GitProfile</a> and ❤️`,
};

💖 Support

You can show your support by starring this project. ★

💡 Contribute

To contribute, see the Contributing guide.

📄 License

MIT

What is gitprofile?

What it is

Key capabilities

Who uses it and how

Getting started

When to use it — and when not to

Your GitHub-synced portfolio — easy to set up, updates itself!

🛠 Installation & Setup

Forking this repo

Setting up locally

Letting an AI agent do it

🎨 Customization

Themes

Google Analytics

Hotjar

SEO

PWA

Avatar and Bio

Social Links

Resume

Skills

Experience

Education

Certifications

Projects

Github Projects

External Projects

Publications

Blog Posts

Footer

💖 Support

💡 Contribute

📄 License

Frequently asked questions

Is gitprofile free to use?

What does gitprofile do?

What is gitprofile written in?