---
import BaseLayout from './Layout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
    <div class="gif">
        <img src="/.netlify/images?url=/images/laptop.webp" role="presentation" width="300" height="259" decoding="async">
    </div>
    <h2>{frontmatter.title}</h2>
    <slot />
    <ul class="badge__list">
        <li><span class="badge badge--item">PLATFORM</span>{frontmatter.platform}</li>
        <li><span class="badge badge--item">STACK</span>{frontmatter.stack}</li>
        <li><span class="badge badge--item">WEBSITE</span><a class="badge__link" href={frontmatter.website} target="_blank">{frontmatter.website}</a></li>
        <li><span class="badge badge--item">GITHUB</span><a class="badge__link" href={frontmatter.github} target="_blank">{frontmatter.github}</a></li>
    </ul>
    <div class="center">
        <img class="pro-img" width="500px" height="281" src={frontmatter.worksImage1.url} alt={frontmatter.worksImage1.alt} />
        <img class="pro-img" width="500px" height="281" src={frontmatter.worksImage2.url} alt={frontmatter.worksImage2.alt} />
    </div>
</BaseLayout>

