feat(Projects): refactor project list

src/assets/style/style.scss

@@ -34,6 +34,7 @@ section:not(:first-of-type) {
 h1,
 .fs-1 {
   font-size: 3rem !important;
+  margin-top: 0;
   margin-bottom: var(--prj-spacing-4);
 }
 h2,

src/components/Card.astro

@@ -8,6 +8,9 @@ const { className } = Astro.props;
 ---
 
 <div class:list={['card', 'vstack', className]}>
+  <div class="img-header">
+    <slot name="img-header" />
+  </div>
   <div class="title">
     <slot name="title" />
   </div>
@@ -21,7 +24,7 @@ const { className } = Astro.props;
   </div>
 </div>
 
-<style>
+<style lang="scss">
   .card {
     background-color: var(--prj-surface-2);
     color: var(--prj-surface-text);
@@ -30,15 +33,23 @@ const { className } = Astro.props;
     box-shadow: 5px 5px 5px 5px var(--prj-shadow);
 
     padding: var(--prj-spacing-2) var(--prj-spacing-3);
-  }
 
-  .card :global(a) {
+    :global(a) {
       text-decoration-line: none;
     }
 
-  .card :global(a):hover {
+    :global(a):hover {
       text-decoration-line: underline;
     }
+  }
+
+  .img-header {
+    :global(img) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
 
   .title > :global(:last-child) {
     margin-bottom: var(--prj-spacing-2);

src/components/Navbar.astro

@@ -7,7 +7,7 @@ import LangSelector from '@components/LangSelector.astro';
 const links = [
   { href: localizePath('/'), text: 'Home' },
   { href: localizePath('/blog'), text: 'Blog' },
-  { href: localizePath('/portafolio'), text: 'Portafolio' },
+  { href: localizePath('/projects'), text: 'Projects' },
   { href: localizePath('/curriculum'), text: 'Curriculum' },
   { href: localizePath('/contact'), text: 'Contact' },
 ];

src/pages/portafolio/index.astro

@@ -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("en");
-
-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>

src/pages/projects/index.astro

@@ -0,0 +1,49 @@
+---
+import { changeLanguage } from 'i18next';
+import { getCollection } from 'astro:content';
+import Layout from '@layouts/Layout.astro';
+import Card from '@components/Card.astro';
+
+changeLanguage('en');
+
+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,
+}));
+
+console.log(entries.at(0));
+---
+
+<Layout title="List of blog entries">
+  <h1 class="text-center">Projects</h1>
+
+  <section class="clean grid grid-cols-1 grid-lg-cols-3">
+    {
+      entries.map((item) => (
+        <div>
+          <Card className="anim-hover-zoom">
+            <img
+              src="https://placehold.co/600x400"
+              alt="project img"
+              class="border-radius respect-width"
+              slot="img-header"
+            />
+            <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={`/projects/${item.slug}`}>See more...</a>
+            </div>
+          </Card>
+        </div>
+      ))
+    }
+  </section>
+</Layout>