From 642e15656ec8160e9f92fc7991b84a326b86d4cf Mon Sep 17 00:00:00 2001
From: aleidk <ale.navarro.parra@gmail.com>
Date: Tue, 19 Mar 2024 09:34:12 -0300
Subject: [PATCH] feat(Projects): refactor project list

---
 src/assets/style/style.scss                   |  1 +
 src/components/Card.astro                     | 25 +++++++---
 src/components/Navbar.astro                   |  2 +-
 src/pages/portafolio/index.astro              | 44 -----------------
 .../{portafolio => projects}/[...slug].astro  |  0
 src/pages/projects/index.astro                | 49 +++++++++++++++++++
 6 files changed, 69 insertions(+), 52 deletions(-)
 delete mode 100644 src/pages/portafolio/index.astro
 rename src/pages/{portafolio => projects}/[...slug].astro (100%)
 create mode 100644 src/pages/projects/index.astro

diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss
index f86b20b..5cf0154 100644
--- a/src/assets/style/style.scss
+++ b/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,
diff --git a/src/components/Card.astro b/src/components/Card.astro
index be32713..4b31306 100644
--- a/src/components/Card.astro
+++ b/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,14 +33,22 @@ const { className } = Astro.props;
     box-shadow: 5px 5px 5px 5px var(--prj-shadow);
 
     padding: var(--prj-spacing-2) var(--prj-spacing-3);
+
+    :global(a) {
+      text-decoration-line: none;
+    }
+
+    :global(a):hover {
+      text-decoration-line: underline;
+    }
   }
 
-  .card :global(a) {
-    text-decoration-line: none;
-  }
-
-  .card :global(a):hover {
-    text-decoration-line: underline;
+  .img-header {
+    :global(img) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
   }
 
   .title > :global(:last-child) {
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index eb84cc2..247c5c3 100644
--- a/src/components/Navbar.astro
+++ b/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' },
 ];
diff --git a/src/pages/portafolio/index.astro b/src/pages/portafolio/index.astro
deleted file mode 100644
index 7a408e8..0000000
--- a/src/pages/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("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>
diff --git a/src/pages/portafolio/[...slug].astro b/src/pages/projects/[...slug].astro
similarity index 100%
rename from src/pages/portafolio/[...slug].astro
rename to src/pages/projects/[...slug].astro
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
new file mode 100644
index 0000000..e5adc7d
--- /dev/null
+++ b/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>