<script>
    import * as info from '../static/json/me.json';
</script>

<style>
    .card {
        background-color: var(--bg-grad);
        border-radius: 1em;
        padding: .2em 2em 2em 2em;
        box-shadow: .5em .5em .5em var(--purple);
    }
    
    .flex-container {
        display: flex;
    }

    .profile {
        border-radius: 100%;
        height: 8em;
        width: 8em;
        padding: 1em 1em 1em 1em;
        border: .5em solid var(--bg-grad);
    }
    
    .about {
        padding: 0em 5% 0em 5%;
    }
    
    /* Responsive layout - makes a one column layout instead of a two-column layout */
    @media (max-width: 800px) {
        .flex-container {
            align-items: center;
            flex-direction: column;
        }

        .profile {
            display: none;
        }

        .about {
            padding: 0px;
        }
    }

    h1 {
        color: var(--red);
        /*text-decoration: underline 5px solid var(--bg-grad);*/
        border-bottom: 5px solid var(--bg-grad);
    }
</style>

<div class="card">
    <h1>{info.name}</h1>

    <div class="flex-container">
        <img class="profile" src={info.profile_photo} alt="{info.name}'s Profile Photo">
        <p class="about">{info.about}</p>
    </div>
</div>