_layouts/main.html

---
---
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: 'en' }}">

  {%- include head.html -%}

  <body>

    <!-- necessary as specifying collection order in _config.yml is not possible in Jekyll 3 -->
    {% assign sorted_sections = site.sections | sort: 'order' %}

    <!-- navbar -->
    <nav class="nav-bar" aria-label="Navigation Bar">
      {% for section in sorted_sections %}
        {% if section.anchor %}
          <a class="nav-item" href="{{ section.anchor  | prepend: '#' | relative_url }}">
            {{ section.title | markdownify | strip_html }}
          </a>
        {% endif %}
      {% endfor %}
    </nav>

    <main class="container-fluid">
      <!-- intro -->
      <div class="row">
        <div class="intro col-sm-8" aria-label="Intro">
          <div class="intro-title">{{ site.intro_title | markdownify }}</div>
          <div class="intro-content">{{ site.intro_content | markdownify }}</div>
          {%- if site.github_url -%}
            <a href="{{ site.github_url }}" class="fa fa-github" title="GitHub profile"></a>
          {%- endif -%}
          {%- if site.stack_overflow_url -%}
            <a href="{{ site.stack_overflow_url }}" class="fa fa-stack-overflow" title="Stack Overflow profile"></a>
          {%- endif -%}
          {%- if site.linkedin_url -%}
            <a href="{{ site.linkedin_url }}" class="fa fa-linkedin" title="LinkedIn profile"></a>
          {%- endif -%}
          {%- if site.facebook_url -%}
            <a href="{{ site.facebook_url }}" class="fa fa-facebook" title="Facebook profile"></a>
          {%- endif -%}
          {%- if site.twitter_url -%}
            <a href="{{ site.twitter_url }}" class="fa fa-twitter" title="Twitter profile"></a>
          {%- endif -%}
          {%- if site.youtube_url -%}
            <a href="{{ site.youtube_url }}" class="fa fa-youtube" title="YouTube profile"></a>
          {%- endif -%}
          {%- if site.email -%}
            <a href="mailto:{{ site.email }}" class="fa fa-envelope" title="Email"></a>
          {%- endif -%}
        </div>
      </div>

      <!-- sections -->
      {% for section in sorted_sections %}
      <div class="section row" aria-label="Sections">
        <div id="{{ section.anchor }}" class="section-title col-sm-5">{{ section.title | markdownify }}</div>
        <div class="section-content col-sm-7">{{ section.content | markdownify }}</div>
      </div>
      {% endfor %}
    </main>

    <!-- footer -->
    {%- include footer.html -%}

  </body>

  <!-- dark mode -->
  {%- include dark_mode.html -%}
</html>