feat: implement barebone zola templates

_src/pages/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("en");
+
+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>

_src/pages/projects/[page].astro

@@ -0,0 +1,65 @@
+---
+import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
+import { changeLanguage } from "i18next";
+import { getCollection } from "astro:content";
+import Layout from "@layouts/Layout.astro";
+import Card from "@components/Card.astro";
+import Pagination from "@components/Pagination.astro";
+import { Image } from "astro:assets";
+
+changeLanguage("en");
+
+export const getStaticPaths = (async ({ paginate }) => {
+    const rawEntries = await getCollection("portafolio", ({ data }) => {
+        return import.meta.env.PROD ? data.draft !== true : true;
+    });
+    const entries = rawEntries.map((item, idx) => ({
+        ...item.data,
+        id: idx + 1,
+        slug: item.slug,
+    }));
+    return paginate(entries, { pageSize: 6 });
+}) satisfies GetStaticPaths;
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+const { page } = Astro.props;
+---
+
+<Layout title="List of blog entries">
+  <h1 class="text-center">Projects</h1>
+
+  <section class="clean">
+    <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
+      {
+        page.data.map((item) => (
+          <div>
+            <Card className="anim-hover-zoom h-100">
+              <a class="clean" href={`/projects/${item.slug}`}>
+                <Image
+                  src={item.thumbnail}
+                  alt="project img"
+                  class="border-radius respect-width"
+                />
+                <h3 class="fs-4 text-center my-1">{item.title}</h3>
+                <p class="text-justify">{item.brief}</p>
+              </a>
+              <div class="text-end" slot="footer">
+                <a href={`/projects/${item.slug}`}>See more...</a>
+              </div>
+            </Card>
+          </div>
+        ))
+      }
+    </div>
+    <Pagination page={page} urlPattern="/projects/{}" />
+  </section>
+</Layout>
+
+<style lang="scss">
+  a.clean {
+    color: var(--prj-text);
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+</style>