<header class=“container-fluid fixed-top bg-dark py-5 py-md-0”>

<div class="row align-items-center">
    <div class="col-md-auto text-center">
        <a href="/"><img src="{{ site.image }}" alt="" id="photo" class="rounded-circle"></a>
    </div>
    <div class="col-md container text-center">
        <div class="row align-items-center text-md-left">
            <div class="col-md">
                <h1 class="text-light">{{ site.name }}</h1>
                <h3 id="role">{{ site.position }}</h3>
            </div>
            <div class="col-md">
                {% for social in site.data.social %}
                    <a href="{{ social.external_url }}" target="_blank"><img src="{{ social.image_path }}" class="social" alt=""></a>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

</header>