Hero Section

When editing be careful to write correctly formatted YAML. In YAML indentation matters. A short intro to YAML can be found here.

---

Description

The hero section is the first section displayed on the landing page.

hero:
    enable: true
    intro: "Hi, my name is"
    title: "Pythagoras of Samos."
    subtitle: ""
    content: ""
    image: images/Pythagoras.jpeg
    roundImage: true # Make hero image circular | default false
    button:
      enable: true
      name: "CV"
      url: "/pdf/CV.pdf"
      download: true
      newPage: false
    socialLinks:
      fontAwesomeIcons:
        - icon: fab fa-github
          url: https://example.com
        - icon: fab fa-linkedin
          url: https://example.com
      customIcons:
        - icon: images/DNA.png
          url: "https://example.com"

---

Configuration

Enable

true/false if set to false will hide the hero section.

hero:
    enable: true

Intro

String displayed at the top of the section. Reference picture. Configure as a valid string.

hero:
    ...
    intro: "Hi, my name is"

title

String displayed below the intro of the section. Reference picture. Configure as a valid string.

hero:
    ...
    title: "Pythagoras of Samos."

subtitle

String displayed below the title of the section. Configure as a valid string.

hero:
    ...
    subtitle: ""

content

String displayed below the subtitle of the section. Configure as a valid string.

hero:
    ...
    content: ""

image

Image to display to the right of the strings. Configure as a valid path.

hero:
    ...
    image: images/Pythagoras.jpeg

roundImage

true/false crops the configured image to be circular.

hero:
    ...
    roundImage: true

Button

This section configures a download button.

• enable - true false to display the button
• name - label to put on the button.
• url - download url for document/image/etc.
• download - enables the button to download the linked content
• newpage - opens the content in a new page.

hero:
    ...
    button:
      enable: true
      name: "CV"
      url: "/pdf/CV.pdf"
      download: true
      newPage: false

socialLinks

This section configures a socialLinks buttons. There are two sections one for fontawesome icons and one for custom icons.

fontawesome icons

A list of available fontawesome icons can be found on the fontawesome website. Configure as a valid YAML list.

• icon - the fontawesome name for the icon. Usuall fab followed by an icon name.
• url - the url the button should redirect to.

hero:
    ...
    socialLinks:
      fontAwesomeIcons:
        - icon: fab fa-github
          url: https://example.com
        - icon: fab fa-linkedin
          url: https://example.com

Custom icons

If fontawesome doesn't have an icon this is where you configure your own. Configure as a valid YAML list.

• icon - link to the image for your icon
• url - the url the button should redirect to.

hero:
    ...
    socialLinks:
      ...
      customIcons:
        - icon: images/DNA.png
          url: "https://example.com"