<div class="page-section {{ alt_bg }} border-bottom-2">
  <div class="{{ containerClass or 'container' }}">
    <div class="row">
      <div class="col-md-6">
        <h4>About me</h4>
        <p>Fueled by my passion for understanding the nuances of cross-cultural advertising, I consider myself a forever student, eager to both build on my academic foundations in psychology and sociology and stay in tune with the latest digital marketing strategies through continued coursework.</p>
      </div>
      <div class="col-md-6">
        <h4>Connect</h4>
        <p>I’m currently working as a freelance marketing director and always interested in a challenge. Here’s how to reach out and connect.</p>
        <div class="d-flex align-items-center">
          <a href="" class="text-accent fab fa-facebook-square font-size-24pt mr-8pt"></a>
          <a href="" class="text-accent fab fa-twitter-square font-size-24pt"></a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="{{ containerClass or 'container' }} page-section">

  <div class="page-headline text-center">
    <h2>Level-up Your Career</h2>
    <p class="lead text-70 col-lg-8 mx-auto">Courses by Elijah</p>
  </div>

  {% set courses = [{
      course: "Angular Routing In-Depth",
      image: "assets/images/paths/angular_routing_200x168.png",
      rating: 3
    }, {
      course: "Angular Unit Testing",
      image: "assets/images/paths/angular_testing_200x168.png",
      rating: 4
    }, {
      course: "Introduction to TypeScript",
      image: "assets/images/paths/typescript_200x168.png",
      rating: 5
    }, {
      course: "Learn Angular Fundamentals",
      image: "assets/images/paths/angular_200x168.png",
      rating: 5
    }] %}

  <div class="card-columns card-columns--2">
    {% for item in courses %}
    <div class="card card-sm">
      <div class="card-body d-flex align-items-center">
        <a href="{{ prefix or '' }}course.html" class="avatar avatar-4by3 mr-16pt">
          <img src="{{ item.image }}" alt="{{ item.course }}" class="avatar-img rounded">
        </a>
        <div class="flex">
          <a class="card-title mb-4pt" href="{{ prefix or '' }}course.html">{{ item.course }}</a>
          <div class="d-flex align-items-center">
            <div class="rating mr-8pt">
              {% for rating in range(item.rating) %}
              <span class="rating__item"><span class="material-icons">star</span></span>
              {% endfor %}
              {% for rating in range(5 - item.rating) %}
              <span class="rating__item"><span class="material-icons">star_border</span></span>
              {% endfor %}
            </div>
            <small class="text-muted">{{ item.rating }}/5</small>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>