DEV Community

Cover image for A simple but nice header  generator for your Github profile
Leví Arista
Leví Arista

Posted on

A simple but nice header generator for your Github profile

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

GitHub logo 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])
    Enter fullscreen mode Exit fullscreen mode

Examples

Example 1 Example 2 Example 3 Example 4 Example 5

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

Examples of header images

Example 1

Example 2

Example 3

Example 4

Example 5

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:
Home: Main

Background tools:
Home: Background

Decorations tools:
Home: Decorations

Github Dark/Light mode:
Home: Light Mode

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

Top comments (39)

Collapse
 
teosoares10 profile image
Teodoro Pedro

I appreciate it!

Collapse
 
nandha46 profile image
Nandhakumar Subramanian

Looks great! Thanks for sharing.

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili

I have created mine, and updated my github 👉 github.com/mrpaulishaili.

Smooth and Responsive.

Well appreciated!

Collapse
 
leviarista profile image
Leví Arista

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...

Collapse
 
mrpaulishaili profile image
Paul C. Ishaili • Edited

Thanks @leviarista! I think I made that mistake. I've just fixed it now.

Thread Thread
 
leviarista profile image
Leví Arista

Cool!

Collapse
 
renanfranca profile image
Renan Franca

I am impressed by how smoothly and satisfying is using that header generator!👏
Thank you for sharing 🤩

Collapse
 
leviarista profile image
Leví Arista

Thank you so much!
Glad you liked it 😊

Collapse
 
star_trooper profile image
Atharva Shirdhankar

I guess this can be also use for Twitter and LinkedIn headers🙂

Collapse
 
leviarista profile image
Leví Arista

Hey! Yes, you're right 👍

Collapse
 
biomathcode profile image
Pratik sharma

This looks great, Levi

Collapse
 
leviarista profile image
Leví Arista

Thanks you Pratik! 👍

Collapse
 
marissab profile image
Marissa B

Dude this is awesome. I like it!

Collapse
 
leviarista profile image
Leví Arista

Great! Thank you so much
I am glad you liked it!😊

Collapse
 
star_trooper profile image
Atharva Shirdhankar

Awesome Tool😃🔥

Collapse
 
leviarista profile image
Leví Arista

Thank you very much Atharva! 😊

Collapse
 
secretdeveloperisme profile image
Nguyen Hoang Linh

great

Collapse
 
secretdeveloperisme profile image
Nguyen Hoang Linh

wonderful

Collapse
 
leviarista profile image
Leví Arista

Thanks!!

Collapse
 
incrementis profile image
Akin C.

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!

Collapse
 
leviarista profile image
Leví Arista

Hi Akin. Thank you!
Glad you liked it. your header looks great! 👍