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:
![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
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
** I invite you to contribute to this project with ideas/code contributions/etc 😊.
Top comments (39)
I appreciate it!
Looks great! Thanks for sharing.
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!😊
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! 👍