feat: implement barebone zola templates

_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>