Modifying the Header

24 Jun 2015 . tech . Comments
#tutorial

The intro part of the index page (Header) consists of four elements:

  • A black favicon
  • Background image
  • Welcome text
  • Your image

Black favicon

The black favicon is an image on the left of the navigation bar. Preferably it should be a black and white version of your favicon.

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

Background image

In order to set the background, set the path to following variable:

# NB! Keep the .. in the beginning of the background image path
background-img: "../img/intro-bg.jpg"

Welcome text

The welcome text is controlled by the following (self-explanatory) variables:

dynamic-typing: True
shuffle: True # Shuffle the lines.
loop: True
loop-count: False # Set False for infinite loop, or set any number for finite loop.
type-speed: 10 # Default 10
start-delay: 200 # Default 200
delete-delay: 5000 # Default 5000
lines: # You can add HTML Tags in the Text
  - text: "The lower you fall, the higher you'll fly."
  - text: "Where’s your will to be weird?"

Your image

You can set your image from the following variable:

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

If you want to connect your Github profile image then you can use the following. Replace user_name with your Github user name.

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

If you want to connect your Gravatar profile image then you can use the following. Replace email_hash with your Gravatar profile email hash. You can create the email hash by using an online tool like md5hashgenerator, just enter your email and it will generate the hash.

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

All set!


Me

John Smith is an awesome person. He lives in Flatland, where he works on two-dimensional engineering projects. In his spare time, John likes to eat cotton candy.