A simple but nice header generator for your Github profile
#azuretrialhack#vite#github#productivity
Leví Arista

Leví Arista @leviarista

About: Hi there! 👋😊

Location:
Cajamarca, Perú
Joined:
Aug 17, 2018

A simple but nice header generator for your Github profile

Publish Date: Mar 8 '22
143 42

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
  • …
View on GitHub

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

Comments 42 total

Add comment