diff --git a/src/pages/es/games/[...slug].astro b/src/pages/es/games/[...slug].astro
deleted file mode 100644
index 64c061d..0000000
--- a/src/pages/es/games/[...slug].astro
+++ /dev/null
@@ -1,26 +0,0 @@
----
-import { changeLanguage } from "i18next";
-import { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths, } from "astro";
-import { getCollection } from "astro:content";
-import Layout from "@layouts/Layout.astro";
-import Toc from "@components/Toc/Toc";
-
-changeLanguage("es");
-
-export const getStaticPaths = (async () => {
-    const games = await getCollection("games");
-    return games.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}>
-  <Toc headings={headings} />
-
-  <Content />
-</Layout>
diff --git a/src/pages/es/games/index.astro b/src/pages/es/games/index.astro
deleted file mode 100644
index 70a76bd..0000000
--- a/src/pages/es/games/index.astro
+++ /dev/null
@@ -1,61 +0,0 @@
----
-import { changeLanguage } from "i18next";
-import { getCollection } from "astro:content";
-import Layout from "@layouts/Layout.astro";
-import Table from "@components/Table";
-import { HeaderType, type Header } from "@components/Table/types";
-
-changeLanguage("es");
-
-const rawGames = await getCollection("games");
-let games = rawGames.map((item, idx) => ({
-    ...item.data,
-    id: idx + 1,
-    slug: item.slug,
-    customCell: item.data.has_content
-        ? `<a href="games/${item.slug}">${item.data.title}</a>`
-        : `<div>${item.data.title}</div>`,
-}));
-games = games.sort((a, b) => b.date_added.getTime() - a.date_added.getTime());
-const headers: Header[] = [
-    {
-        key: "id",
-        header: "index",
-        type: HeaderType.Index,
-    },
-    {
-        key: "title",
-        header: "Title",
-        type: HeaderType.String,
-        hasCustomCell: true,
-    },
-    {
-        key: "status",
-        header: "Status",
-        type: HeaderType.Select,
-    },
-    {
-        key: "genres",
-        header: "Genres",
-        type: HeaderType.Multiple,
-    },
-    {
-        key: "times_played",
-        header: "Times Played",
-        type: HeaderType.Number,
-    },
-    {
-        key: "registered_hours",
-        header: "Registered Hours",
-        type: HeaderType.Number,
-    },
-];
----
-
-<Layout title="List of games">
-  <h1>Games</h1>
-
-  <section>
-    <Table client:load data={games} headers={headers} />
-  </section>
-</Layout>
diff --git a/src/pages/es/index.astro b/src/pages/es/index.astro
index b54b50b..b222c8c 100644
--- a/src/pages/es/index.astro
+++ b/src/pages/es/index.astro
@@ -1,17 +1,20 @@
 ---
-import { getCollection } from "astro:content";
+import { getCollection, getEntry } from "astro:content";
+import { t, changeLanguage } from "i18next";
 import Layout from "../../layouts/Layout.astro";
 import Card from "../../components/Card.astro";
 import Button from "../../components/Button/Button.astro";
 import { Image } from "astro:assets";
-import { t, changeLanguage } from "i18next";
 import portrait from "../../assets/images/portrait.jpg";
 
 changeLanguage("es");
 
 const blog = await getCollection("blog", ({ data }) => import.meta.env.PROD ? data.draft !== true : true);
-// TODO: show the pinned ones, not the recents
-const portafolio = await getCollection("portafolio", ({ data }) => import.meta.env.PROD ? data.draft !== true : true);
+const portafolio = [
+    await getEntry("portafolio", "piloto-go"),
+    await getEntry("portafolio", "destino-temuco"),
+    await getEntry("portafolio", "sercotec"),
+];
 ---
 
 <Layout title="aleidk">
@@ -20,16 +23,16 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
     class="bg-image flex-center"
     style="--bg-image: url(https://placehold.co/600x400)"
   >
-    <div class="hstack gap-5">
-      <!-- <Image -->
-      <!--   id="portrait" -->
-      <!--   src={portrait} -->
-      <!--   alt="portrait of Alexander Navarro" -->
-      <!--   loading="eager" -->
-      <!--   width={200} -->
-      <!-- /> -->
+    <div class="vstack gap-0 align-items-center">
+      <Image
+        id="portrait"
+        src={portrait}
+        alt="portrait of Alexander Navarro"
+        loading="eager"
+        width={200}
+      />
       <div>
-        <h1 class="my-0">Alexander Navarro</h1>
+        <h1 class="my-0 text-center">Alexander Navarro</h1>
         <p>
           {t('home.brief')}
         </p>
@@ -41,60 +44,30 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
     <h2 class="text-center">{t('titles.featuredWork')}</h2>
 
     <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
-      <Card className="anim-hover-zoom">
-        <img
-          src="https://placehold.co/600x400"
-          alt="project img"
-          class="border-radius"
-        />
-        <h3 class="fs-4 text-center my-1">Project N°1</h3>
-        <p class="text-justify">
-          cillum sint consectetur cupidatat.
-          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-        </p>
-
-        <div class="text-end">
-          <a href="">See more...</a>
-        </div>
-      </Card>
-
-      <Card className="anim-hover-zoom">
-        <img
-          src="https://placehold.co/600x400"
-          alt="project img"
-          class="border-radius"
-        />
-        <h3 class="fs-4 text-center my-1">Project N°1</h3>
-        <p class="text-justify">
-          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-          cillum sint consectetur cupidatat.
-        </p>
-
-        <div class="text-end">
-          <a href="">See more...</a>
-        </div>
-      </Card>
-
-      <Card className="anim-hover-zoom">
-        <img
-          src="https://placehold.co/600x400"
-          alt="project img"
-          class="border-radius"
-        />
-        <h3 class="fs-4 text-center my-1">Project N°1</h3>
-        <p class="text-justify">
-          Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint
-          cillum sint consectetur cupidatat.
-        </p>
-
-        <div class="text-end">
-          <a href="">See more...</a>
-        </div>
-      </Card>
+      {
+        portafolio.map(({ data, slug }) => (
+          <div>
+            <Card className="anim-hover-zoom h-100">
+              <a class="clean" href={`/projects/${slug}`}>
+                <Image
+                  src={data.thumbnail}
+                  alt="project img"
+                  class="border-radius respect-width"
+                />
+                <h3 class="fs-4 text-center my-1">{data.title}</h3>
+                <p class="text-justify">{data.brief}</p>
+              </a>
+              <div class="text-end" slot="footer">
+                <a href={`/projects/${slug}`}>See more...</a>
+              </div>
+            </Card>
+          </div>
+        ))
+      }
     </div>
 
     <div class="mt-4 text-center">
-      <Button className="px-4 py-2 fs-5 ">View Work</Button>
+      <Button className="px-4 py-2 fs-5" href="/projects">View Work</Button>
     </div>
   </section>
 
@@ -270,10 +243,18 @@ const portafolio = await getCollection("portafolio", ({ data }) => import.meta.e
   <style>
     #portrait {
       border-radius: 50%;
-      border: 5px solid var(--prj-text);
+      /* border: 5px solid var(--prj-accent); */
     }
     #hero {
       min-height: 50vh;
     }
+
+    a.clean {
+      color: var(--prj-text);
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
   </style>
 </Layout>
diff --git a/src/pages/es/portafolio/[...slug].astro b/src/pages/es/portafolio/[...slug].astro
deleted file mode 100644
index 129dbfe..0000000
--- a/src/pages/es/portafolio/[...slug].astro
+++ /dev/null
@@ -1,31 +0,0 @@
----
-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 Gallery from "@components/MediaGallery/Gallery";
-
-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>
-
-  <Gallery client:load items={entry.data.media} />
-
-  <Toc headings={headings} />
-
-  <Content />
-</Layout>
diff --git a/src/pages/es/portafolio/index.astro b/src/pages/es/portafolio/index.astro
deleted file mode 100644
index 96dfc3c..0000000
--- a/src/pages/es/portafolio/index.astro
+++ /dev/null
@@ -1,44 +0,0 @@
----
-import { changeLanguage } from "i18next";
-import { getCollection } from "astro:content";
-import Layout from "@layouts/Layout.astro";
-import Table from "@components/Table";
-import { HeaderType, type Header } from "@components/Table/types";
-
-changeLanguage("es");
-
-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,
-}));
-const headers: Header[] = [
-    {
-        key: "id",
-        header: "index",
-        type: HeaderType.Index,
-    },
-    {
-        key: "title",
-        header: "Title",
-        formatter: (data) => `<a href="portafolio/${data.slug}">${data.title}</a>`,
-        type: HeaderType.String,
-    },
-    {
-        key: "technologies",
-        header: "Technologies",
-        type: HeaderType.Multiple,
-    },
-];
----
-
-<Layout title="List of blog entries">
-  <h1>Blog's entries</h1>
-
-  <section>
-    <Table client:load data={entries} headers={headers} />
-  </section>
-</Layout>
diff --git a/src/pages/es/projects/[...slug].astro b/src/pages/es/projects/[...slug].astro
new file mode 100644
index 0000000..936e69f
--- /dev/null
+++ b/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>
diff --git a/src/pages/es/projects/[page].astro b/src/pages/es/projects/[page].astro
new file mode 100644
index 0000000..bc6db28
--- /dev/null
+++ b/src/pages/es/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("es");
+
+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>
diff --git a/src/pages/games/[...slug].astro b/src/pages/games/[...slug].astro
deleted file mode 100644
index 6f8fd1a..0000000
--- a/src/pages/games/[...slug].astro
+++ /dev/null
@@ -1,26 +0,0 @@
----
-import { changeLanguage } from "i18next";
-import { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths, } from "astro";
-import { getCollection } from "astro:content";
-import Layout from "@layouts/Layout.astro";
-import Toc from "@components/Toc/Toc";
-
-changeLanguage("en");
-
-export const getStaticPaths = (async () => {
-    const games = await getCollection("games");
-    return games.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}>
-  <Toc headings={headings} />
-
-  <Content />
-</Layout>
diff --git a/src/pages/games/index.astro b/src/pages/games/index.astro
deleted file mode 100644
index 5dd810b..0000000
--- a/src/pages/games/index.astro
+++ /dev/null
@@ -1,61 +0,0 @@
----
-import { changeLanguage } from "i18next";
-import { getCollection } from "astro:content";
-import Layout from "@layouts/Layout.astro";
-import Table from "@components/Table";
-import { HeaderType, type Header } from "@components/Table/types";
-
-changeLanguage("en");
-
-const rawGames = await getCollection("games");
-let games = rawGames.map((item, idx) => ({
-    ...item.data,
-    id: idx + 1,
-    slug: item.slug,
-    customCell: item.data.has_content
-        ? `<a href="games/${item.slug}">${item.data.title}</a>`
-        : `<div>${item.data.title}</div>`,
-}));
-games = games.sort((a, b) => b.date_added.getTime() - a.date_added.getTime());
-const headers: Header[] = [
-    {
-        key: "id",
-        header: "index",
-        type: HeaderType.Index,
-    },
-    {
-        key: "title",
-        header: "Title",
-        type: HeaderType.String,
-        hasCustomCell: true,
-    },
-    {
-        key: "status",
-        header: "Status",
-        type: HeaderType.Select,
-    },
-    {
-        key: "genres",
-        header: "Genres",
-        type: HeaderType.Multiple,
-    },
-    {
-        key: "times_played",
-        header: "Times Played",
-        type: HeaderType.Number,
-    },
-    {
-        key: "registered_hours",
-        header: "Registered Hours",
-        type: HeaderType.Number,
-    },
-];
----
-
-<Layout title="List of games">
-  <h1>Games</h1>
-
-  <section>
-    <Table client:load data={games} headers={headers} />
-  </section>
-</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 257e9af..2899c32 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,22 +1,19 @@
 ---
-import { getCollection, getEntry } from 'astro:content';
-import { t, changeLanguage } from 'i18next';
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
-import Button from '../components/Button/Button.astro';
-import { Image } from 'astro:assets';
-import portrait from '../assets/images/portrait.jpg';
+import { getCollection, getEntry } from "astro:content";
+import { t, changeLanguage } from "i18next";
+import Layout from "../layouts/Layout.astro";
+import Card from "../components/Card.astro";
+import Button from "../components/Button/Button.astro";
+import { Image } from "astro:assets";
+import portrait from "../assets/images/portrait.jpg";
 
-changeLanguage('en');
-
-const blog = await getCollection('blog', ({ data }) =>
-  import.meta.env.PROD ? data.draft !== true : true,
-);
+changeLanguage("en");
 
+const blog = await getCollection("blog", ({ data }) => import.meta.env.PROD ? data.draft !== true : true);
 const portafolio = [
-  await getEntry('portafolio', 'piloto-go'),
-  await getEntry('portafolio', 'destino-temuco'),
-  await getEntry('portafolio', 'sercotec'),
+    await getEntry("portafolio", "piloto-go"),
+    await getEntry("portafolio", "destino-temuco"),
+    await getEntry("portafolio", "sercotec"),
 ];
 ---
 
diff --git a/src/pages/projects/[...slug].astro b/src/pages/projects/[...slug].astro
index 9a34209..6fb0ced 100644
--- a/src/pages/projects/[...slug].astro
+++ b/src/pages/projects/[...slug].astro
@@ -1,20 +1,20 @@
 ---
-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';
+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');
+changeLanguage("en");
 
 export const getStaticPaths = (async () => {
-  const entries = await getCollection('portafolio');
-  return entries.map((entry) => ({
-    params: { slug: entry.slug },
-    props: entry,
-  }));
+    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;
diff --git a/src/pages/projects/[page].astro b/src/pages/projects/[page].astro
index fe75121..7a7dabe 100644
--- a/src/pages/projects/[page].astro
+++ b/src/pages/projects/[page].astro
@@ -1,30 +1,26 @@
 ---
-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';
+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');
+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 });
+    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;
 ---