Modifying the Header

24 Jun 2015 . tech . Comments
#tutorial

The header (intro section) is the first thing visitors see on your homepage. It consists of four customizable elements that create your site’s first impression.

The black favicon appears on the left side of the navigation bar. For best results, use a monochrome version of your main favicon:

black-favicon: "/img/black-lab-glass.ico"

Background Image

Set a captivating background image for your header:

background-img: "intro-bg.jpg"

Place your image in the img/ directory. The theme handles responsive sizing automatically.

Welcome Text

The quote displayed prominently in your header:

quote: "Where's your will to be weird?"

Keep it short and memorable—this is your personal tagline.

Profile Image

Your profile image appears centered in the header. You have three options:

Local Image

me-img: "/img/jetpacktocat.png"

GitHub Profile Picture

Automatically sync with your GitHub avatar:

me-img: "https://github.com/USERNAME.png?size=500"

Replace USERNAME with your GitHub username.

Gravatar

Use your Gravatar profile image:

me-img: "https://www.gravatar.com/avatar/EMAIL_HASH?s=500"

Generate your email hash using an MD5 hash generator.

Tips

  • Use high-quality images (the theme will optimize display)
  • Test your header on both desktop and mobile devices
  • Choose a background that provides good contrast with the white text

Me

'Github''s Octocat was designed by Simon Oxley, alongside the white bird Twitter used (before they received a proper logo) as part of a usual routine of cranking out images for iStock. GitHub saw it, and wanted it, presumably under the notion that it can represent how complex code combines to create peculiar things, much like the octopuss... except the CEO of GitHub called it an octocat, and it has been the octocat since then.