leviarista / github-profile-header-generator

A header image generator for your Github profile Readme

Github Profile Header Generator

What is it?

A simple but nice header image generator for your Github profile Readme. Website Link.

How to use it?

1. Create a nice github header image.
2. Create your GitHub profile README following this guide.
3. Upload your header to your profile repo.
4. Add this line to your README:

   ![Header](./[Your header image])

Examples

Features list

• Edit title and subtitle texts.
• Choose colors for text, background and borders.
• Set dimensions and padding.
• Align text and decorations.
• Change fonts.
• Set the size and radius of the border.
• Set background pattern image, its color, size and opacity.
• Add decorations.
• Upload your own decoration, octocat or profile pic.
• Toogle Github dark and light mode.
• Download image as png.
• Randomize between predefined themes.

Tech used

• Vite
• html2canvas

Get started

• npm run dev- starts dev server
• npm run build - builds for production
• npm run preview - locally previews production build

Get started with Docker

docker-compose up -d --build --force-recreate