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.
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.
Examples
Tech used
Get started
-
npm run dev- starts dev server -
build- builds for production -
preview- locally previews production build
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 😊.
Top comments (38)
I appreciate it!
I have created mine, and updated my github 👉 github.com/mrpaulishaili.
Smooth and Responsive.
Well appreciated!
That's great! Thank you :)
PS: Don't forget to use the github raw URL for your image in your README.
raw.githubusercontent.com/mrpaulis...
Thanks @leviarista! I think I made that mistake. I've just fixed it now.
Cool!
I am impressed by how smoothly and satisfying is using that header generator!👏
Thank you for sharing 🤩
Thank you so much!
Glad you liked it 😊
I guess this can be also use for Twitter and LinkedIn headers🙂
Hey! Yes, you're right 👍
This looks great, Levi
Thanks you Pratik! 👍
Dude this is awesome. I like it!
Great! Thank you so much
I am glad you liked it!😊
Wow this is a pretty good tool to use.
Hey! Thank you so much Andrew 😊
Awesome Tool😃🔥
Thank you very much Atharva! 😊
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! 👍
this is interesting. I'm gonna create on for my github.
thanks for building this nice tool
Cool! Glad you liked it Amrin 😊
It's really nice! 👍 👍
Thank you Anamika! 😊😊
A cool feature would be to upload our own logo or GitHub avatar. Cool tool!
Thank you!
And yep, for sure.
I am thinking of a way to allow uploads and maybe add this awesome octocats to the options: myoctocat.com/
Interesting project. Keep up the good work !
Thanks Sahesh! - I'll be improving it 😊
Thank you Anjan! 👍