---
import Layout from "../layouts/Layout.astro";
import Card from "../components/Card.astro";
import Footer from "../components/Footer.astro";
---

<Layout title="Ayo Ayco | Software Engineer + Web Developer">
<main>
    <div class="highlighted-section">
        <div class="top-content">
            <h1>Ayo Ayco</h1>
            <ul role="list">
              <li>👨🏻‍💻 Software Extraordinaire</li>
              <li>🕵🏻‍♂️ Frontend Detective Consultant</li>
              <li>📚 BS Computer Science</li>
            </ul>
        </div>
    </div>

    <div class="main-content">
        <ul role="list" class="link-card-grid">
          <Card
            href="https://drive.google.com/file/d/1MhN8qWRJnSHM_epU9GFQL9lEsMFtHWQK/view?usp=sharing"
            title="CV / Resume"
            body="Download and peruse my skills and experience."
          />
          <Card
            href="/social"
            title="Social"
            body="Explore a galaxy of my social accounts."
          />
          <Card
            href="https://github.com/ayoayco"
            title="Github"
            body="See my public projects over at Github. ❤️"
          />
          <Card
            href="https://blog.ayco.io/"
            title="Blog"
            body="Read my articles on technology, productivity, and life in general."
          />

        </ul>
        <Footer />
    </div>
</main>
</Layout>

<style>
    :root {
        --astro-gradient: linear-gradient(0deg, #4f39fa, #da62c4);
        --content-width: 800px;
    }

    h1 {
        margin: 0 0 2rem 0;
    }

    .top-content {
        margin: auto;
        padding: 1em;
        max-width: var(--content-width);
        font-weight: bold;
        font-size: x-large;
        color: var(--color-bg);
        line-height: 1.6;
    }

    .top-content ul {
        list-style-type: none;
    }

    .main-content {
        margin: auto;
        padding: 1em;
        max-width: var(--content-width);
    }

    .highlighted-section {
        background: var(--astro-gradient);
        background-size: 400% 400%;
        background-color: var(--);
        animation: gradient 15s ease-in-out infinite;
        padding: 2rem;
        box-shadow: 0 8px 8px -4px lightblue;
    }

    .highlighted-section code {
        font-size: 0.875em;
        border: 0.1em solid var(--color-border);
        border-radius: 4px;
        padding: 0.15em 0.25em;
    }

    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    .link-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
        gap: 1rem;
        padding: 0;
    }

    @media only screen 
    and (min-device-width: 360px) 
    and (max-device-width: 812px) {
        .section-content {
            font-size: 16px;
            font-weight: bold;
        }
}
</style>