Overview of My Submission

"Github Profile Header Generator" is a simple but nice header image generator for your Github profile Readme.

Github Profile Header Generator

Submission Category:

Wacky Wildcards

Link to Code on GitHub

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
• …

View on GitHub

Additional Resources / Info

• Vite was used to build this tool.
• The styles are set with VanillaJS and html2canvas is used to render the code as image.
• The webapp was deployed with Azure Static Web Apps.
• The deployment setup went very smoothly with the Azure Static Web Apps extension for Visual Studio Code.

Examples of header images

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.
• Toogle Github dark and light mode.
• Download image as png.

Screenshots

Main tools:

Background tools:

Decorations tools:

Github Dark/Light mode:

** I invite you to contribute to this project with ideas/code contributions/etc 😊.