{% include('header_main.html') %}

<div class="container d-flex align-items-center vh-100">
    <!-- user photo, name, and blurb -->
    <div class="row">
        <div class="col-4">
            <div class="cardclone">
                <div class='c-title'>
                    <span class="nf-oct-person">
                    </span>
                About {{ config_vars['name'] }}
                </div>
                <hr style="margin-bottom: 0;">
                <img class="main-img"
                     src="/static/img/{{ config_vars['profile_image'] }}"
                     title="{{ config_vars['profile_image_alt'] }}"
                     style="width:200px;"
                     data-toggle="tooltip" data-placement="bottom"
                     >
                <br />
                <div class='c-title'>
                    <a href="https://pronouns.org/what-and-why"
                       class="pronouns"
                       style="color: cornflowerblue;">
                        Pronouns
                    </a>:
                    <a href="https://pronouns.org/they-them">
                        {{ config_vars['pronouns'] }}&nbsp;
                    </a>
                </div>
                <p>{{ config_vars['blurb'] }}</p>
            </div>
        </div>
    </div>

    <!-- BEGIN skills
    <div class="cardclone">
        <div class='c-title-social'>Skills</div>
        <hr>
        {% for skill in skills %}
	<ul>
		<li>{{ skill }}</li>
	</ul>
        {% endfor %}
        <hr>
        <div class='c-footer-link'>
            <a href="{{ config_vars['resume_pdf_URL'] }}"
               data-toggle="tooltip" data-placement="bottom"
               target="_blank"
               title="View or Download Resume">
                View or Download Resume
            </a>
        </div>
    </div> END social links -->

    <!-- BEGIN social links -->
    <div class="cardclone">
        <div class='c-title-social'>Social Links</div>
        <hr>
        {% for lnk in social_links %}
          <a target="_blank"
             href="{{ social_links[lnk]['URL'] }}"
             data-toggle="tooltip" data-placement="left"
             title="{{ lnk }}">
              {% if social_links[lnk]['icon']['type'] == "glyph" %}
              <span class="{{ social_links[lnk]['icon']['glyph'] }}">
                  &nbsp;&nbsp;
              </span>
              {% else %}
              <img src="{{ social_links[lnk]['icon']['url'] }}" width="50px">
              {% endif %}
          </a>
        {% endfor %}
        <hr>
        <div class='c-footer-link'>
            <a href="{{ config_vars['resume_pdf_URL'] }}"
               data-toggle="tooltip" data-placement="bottom"
               target="_blank"
               title="View or Download Resume">
                View or Download Resume
            </a>
        </div>
    </div><!-- /.cardclone -->
    <!-- END social links -->
    {% if config_vars['fork_me'] %}
    <a href="https://codeberg.org/jessebot/tiny-personal-website" class="fork-me">
    💙 Fork Me 💙
    </a>
    {% endif %}

</div><!-- /.container MAIN-->

{% include('footer_main.html') %}