{% block component_styles %}
{{ super() }}
<link rel="stylesheet" href="/styles/components/about-card.css">
{% endblock component_styles %}

<div class="about-card">
    <div class="profile-photo-container">
        <img class="u-photo" src="{{config.extra.profile_photo}}" alt="Profile Photo">
    </div>
    <div class="text-container">
        <div class="intro-text">
            <h1>{{config.extra.name}}</h1>
            <p>{{config.extra.profession}}</p>
        </div>
        <div class="quick-links">
            <ul>
                <li>
                    <a target="_blank" class="about-quick-link" href="mailto:{{config.extra.email}}" rel="me">
                        <img src="/dist/line-awesome/envelope.svg" alt="email: " loading="lazy">
                        {{config.extra.email}}
                    </a>
                </li>
                <li>
                    <a target="_blank" class="about-quick-link" href="https://github.com/{{config.extra.github}}"
                        rel="me">
                        <img src="/dist/line-awesome/github.svg" alt="github: " loading="lazy">
                        {{config.extra.github}}
                    </a>
                </li>
                <li>
                    <a target="_blank" class="about-quick-link" href="https://linkedin.com/in/{{config.extra.linkedin}}"
                        rel="me">
                        <img src="/dist/line-awesome/linkedin.svg" alt="linkedin: " loading="lazy">
                        {{config.extra.linkedin}}
                    </a>
                </li>
                <li>
                    <a target="_blank" class="about-quick-link"
                        href="https://social.ewpratten.com/{{config.extra.mastodon}}" rel="me">
                        <img src="/dist/line-awesome/mastodon.svg" alt="linkedin: " loading="lazy">
                        {{config.extra.mastodon}}
                    </a>
                </li>

                {# <li>
                    <a class="about-quick-link" href="/contact">
                        <img src="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/svg/ellipsis-h-solid.svg"
                            alt="... " loading="lazy">
                        contact me
                    </a>
                </li> #}
            </ul>
        </div>
    </div>
</div>