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

const posts = await Astro.glob("./now/and-then/posts/*.astro");
---

<Layout title="Now" description="What is Ayo Ayco currently up to?">
  <main>
    <h1><span class="text-gradient">Now</span></h1>
    <p>
      <em>Published on the <time datetime="2024-06-17">17th of June, 2024</time></em>
    </p>

    <p>Starting this month, I have joined <a href="https://ing.com">ING</a> as Chapter Lead for Frontend Engineering; directly involved with the platform upon which all web apps accross more than 40 countries are built. Our Unified Design System and SDKs are the ingredients ING developers use to craft experiences for more than 53 million users.</p>

    <Posts posts={posts} title="Previously..." />
    <hr />
    <em><a href="https://nownownow.com/about">About now pages</a></em>
    <Footer />
  </main>
</Layout>

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

  .text-gradient {
    font-weight: 900;
    background-image: var(--ayo-gradient);
    animation: pulse 4s ease-in-out infinite;
    background-size: 500% 500%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100% 200%;
    background-position-y: 100%;
    border-radius: 0.4rem;
  }

  .highlighted-content {
    margin: 1rem 0;
    background: #4f39fa;
    padding: 1rem;
    border-radius: 0.4rem;
    color: var(--color-bg);
  }

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

  .link-card-grid {
    display: grid;
    gap: 1rem;
    padding: 0;
  }
</style>