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?
- Create a nice github header image.
- Create your GitHub profile README following this guide.
- Upload your header to your profile repo.
- Add this line to your README:
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
Get started
-
npm run dev- starts dev server -
npm run build- builds for production - …
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 😊.
Latest comments (39)
Looks great! Thanks for sharing.
I appreciate it!
great
wonderful
Thanks!!
Hello Leví Arista,
thanks for your article!
I made a GitHub header image and I really like it.
Thank you for sharing such a simple but very useful tool in my opinion :D!
Hi Akin. Thank you!
Glad you liked it. your header looks great! 👍
Wow this is a pretty good tool to use.
Hey! Thank you so much Andrew 😊
github.com/elngovind - This is Mine!
Looks great! 👍
Thank u so much....
Thank you Yash 👍
this is interesting. I'm gonna create on for my github.
thanks for building this nice tool
Cool! Glad you liked it Amrin 😊
Hey! Pretty cool, thanks for the info github.com/dashpy/dashpy
Thank you so much Fede! 🤙
It's really nice! 👍 👍
Thank you Anamika! 😊😊