---
import BaseLayout from '../layouts/BaseLayout.astro';
import { Markdown } from 'astro/components';

const resumeLink = 'https://git.thomaspcole.com/thomascole/Resume-MD/raw/branch/master/Resume.md';

const response = await fetch(resumeLink);
const data = await response.text();
---
<BaseLayout title="About - thomaspcole.com">
    <style lang="scss">
        @import 'bulmaswatch/darkly/_variables.scss';
        @import 'bulma/bulma.sass';
        @import 'bulmaswatch/darkly/_overrides.scss';

        html{
            overflow-y: scroll;
        }

        .bio-div {
            display: flex;
            min-height: 10em;
        }

        .md-container{
            width: 80%;
            padding-top: 1em;
            padding-left: 2em;
            padding-right: 2em;
            margin-bottom: 2em;
        }

        .content {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .no-margin{
            margin: 0 !important;
        }

        .hidden{
            display: none !important;
        }

        .cert-seal{
            width: auto;
            height: 200px;
            padding: 1em;
        }

        .cert-grid{
            display: flex;
            place-content: center;
        }

        @media (max-width: 1024px) {
            .md-container{
                width: 95%;
            }
        }
    </style>

    <div class="content">
        <div class="md-container">
            <!-- Resume -->
            <div class="card">
                <header class="card-header">
                    <h2 class="card-header-title no-margin">
                        Resume
                    </h2>
                    <a class="card-header-icon" download="ThomasCole-Resume.pdf" href="/Resume.pdf">
                        <span class="icon-text">
                            <span class="icon">
                                <i class="fas fa-download" aria-hidden="true"></i>
                            </span>
                            <span>Download</span>
                        </span>
                    </a>
                </header>
                <div class="card-content">
                    <Markdown content={data}/>
                </div>
            </div>  

            <br>

            <div class="card">
            <header class="card-header">
                    <h2 class="card-header-title no-margin">
                        Certifications
                    </h2>
                </header>
                <div class="cert-grid">
                    <img class="cert-seal" src="/img/dante_certified_logo_level1.png" alt="dante_cert_level3.png">
                    <img class="cert-seal" src="/img/dante_certified_logo_level2.png" alt="dante_cert_level3.png">
                    <img class="cert-seal" src="/img/dante_certified_seal_level3.png" alt="dante_cert_level3.png">
                </div>
            </div>          
        </div>
    </div>
</BaseLayout>