tiny_personal_website/templates/index.html

{% 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="dash-unit">
                <dtitle>
                <span class="nf-mdi-account" style="font-size: 1.2rem;"></span>
                About {{ config_vars['name'] }}
                </dtitle>
                <hr style="margin-bottom: 0;">
                <img class="main-img"
                     src="/static/img/{{ config_vars['profile_image'] }}"
                     alt="{{ config_vars['profile_image_alt'] }}"
                     style="width:200px;"
                     data-toggle="tooltip" data-placement="bottom"
                     title="{{ config_vars['name'] }}">
                <br />
                <p>{{ config_vars['blurb'] }}</p>
            </div><!-- /.dash-unit -->
        </div><!-- /.col -->
    </div><!-- /.row -->

    <div class="dash-unit">
        <dtitle>Social Links</dtitle>
        <hr>
        &nbsp;&nbsp;
        {% for lnk in social_links %}
            <a target="_blank"
               href="{{ social_links[lnk]['URL'] }}"
               data-toggle="tooltip" data-placement="left"
               title="{{ lnk }}">
                <span class="{{ social_links[lnk]['icon'] }}">
                    &nbsp;&nbsp;
                </span>
            </a>
        {% endfor %}
        <hr>
        <dtitle>
            <a href="{{ config_vars['resume_pdf_URL'] }}"
               data-toggle="tooltip" data-placement="bottom"
               title="Download Resume as a PDF"
               style="box-shadow: none;">
                Download Resume
            </a>
        </dtitle>
    </div><!-- /.dash-unit -->

</div><!-- /.container MAIN-->
{% include('footer_main.html') %}