feat: implement barebone zola templates

_src/pages/es/projects/[...slug].astro

@@ -0,0 +1,81 @@
+---
+import { changeLanguage } from "i18next";
+import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
+import { getCollection } from "astro:content";
+import Layout from "@layouts/Layout.astro";
+import Toc from "@components/Toc/Toc";
+import Card from "@components/Card.astro";
+import Button from "@components/Button/Button.astro";
+
+changeLanguage("es");
+
+export const getStaticPaths = (async () => {
+    const entries = await getCollection("portafolio");
+    return entries.map((entry) => ({
+        params: { slug: entry.slug },
+        props: entry,
+    }));
+}) satisfies GetStaticPaths;
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+const entry = Astro.props;
+const { Content, headings } = await entry.render();
+---
+
+<Layout title={entry.data.title}>
+  <h1>{entry.data.title}</h1>
+  <Card className="w-lg-50 mx-auto">
+    <div class="project-specs grid">
+      <div class="project-spec-property">Timeframe:</div>
+      <div class="project-spec-value">{entry.data.timeframe}</div>
+
+      <div class="project-spec-property">Repo:</div>
+      <div class="project-spec-value">{entry.data.links?.url ?? 'Private'}</div>
+
+      <div class="project-spec-property">Website:</div>
+      <div class="project-spec-value">
+        {entry.data.links?.repo ?? 'Private'}
+      </div>
+
+      <div class="project-spec-property">Technologies:</div>
+      <div class="project-spec-value">
+        <ul>
+          {entry.data.technologies.map((item) => <li>{item}</li>)}
+        </ul>
+      </div>
+    </div>
+  </Card>
+
+  <Toc headings={headings} />
+
+  <Content />
+
+  <div
+    class="position-fixed bottom-0"
+    style={{ top: 'unset', left: 'unset', bottom: '5%', right: '5%' }}
+  >
+    <Button className="btn-back">Go back</Button>
+  </div>
+</Layout>
+
+<style is:global lang="scss">
+  img {
+    margin: 0 auto var(--prj-spacing-2) auto;
+    display: block;
+  }
+
+  .project-specs.grid {
+    --prj-columns: 0.2fr 1fr;
+
+    .project-spec-property {
+      font-weight: bold;
+    }
+  }
+</style>
+
+<script>
+  document.addEventListener('astro:page-load', () => {
+    document.querySelector('.btn-back')?.addEventListener('click', () => {
+      history.back();
+    });
+  });
+</script>