---
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;
        }

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

    <div class="content">
        <div class="md-container">
            <!-- BIO
            <div class="card">
                <header class="card-header">
                    <h2 class="card-header-title no-margin">
                        Who Am I?
                    </h2>
                </header>
                
                <div class="bio-div">
                    <div class="card-image" style="align-self: end;">
                        <figure class="image is-128x128" style="margin-right: 0;">
                            <img style="border-radius: 0.4em !important;" src="/img/profile.jpg" alt="Profile Picture">
                        </figure>
                    </div>
                    <div class="card-content">
                        <h2>About Me</h2>
                        <span></span>
                    </div>
                </div>
            </div>

            <br> -->

            <!-- 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>            
        </div>
    </div>
</BaseLayout>