adding tags to cards

src/components/Card.astro

@@ -1,5 +1,5 @@
 ---
-const { title, img, desc, url, badge } = Astro.props;
+const { title, img, desc, url, badge, tags } = Astro.props;
 ---
 
 <div class="md:w-1/3 w-full">
@@ -12,6 +12,9 @@ const { title, img, desc, url, badge } = Astro.props;
           {badge && <div class="badge badge-secondary">{badge}</div>}
         </h2>
         <p>{desc}</p>
+        <div class="card-actions justify-end">
+          {tags && tags.map((tag) => <div class="badge badge-outline">{tag}</div>)}
+        </div>
       </div>
     </div>
   </a>

src/components/HorizontalCard.astro

@@ -0,0 +1,21 @@
+---
+const { title, img, desc, url, badge, tags } = Astro.props;
+---
+
+<div class="rounded-lg bg-base-100 hover:shadow-xl transition ease-in-out hover:scale-[102%]">
+  <a href={url} target="_blank">
+    <div class="hero-content flex-col lg:flex-row">
+      <img src={img} class="max-w-xs md:max-w-[12rem] rounded-lg" />
+      <div class="grow">
+        <h1 class="text-1xl font-bold">
+          {title}
+          {badge && <div class="badge badge-secondary mx-2">{badge}</div>}
+        </h1>
+        <p class="py-1 text-1xl">{desc}</p>
+        <div class="card-actions justify-end">
+          {tags && tags.map((tag) => <div class="badge badge-outline">{tag}</div>)}
+        </div>
+      </div>
+    </div>
+  </a>
+</div>

src/components/Table.astro

@@ -0,0 +1,28 @@
+<div class="overflow-x-auto w-full">
+  <table class="table w-full">
+    <tbody>
+      <!-- row 1 -->
+      <tr>
+        <td>
+          <div class="flex items-center space-x-3">
+            <div class="avatar">
+              <div class="mask mask-squircle w-12 h-12">
+                <img src="/tailwind-css-component-profile-2@56w.png" alt="Avatar Tailwind CSS Component" />
+              </div>
+            </div>
+            <div>
+              <div class="font-bold">Hart Hagerty</div>
+              <div class="text-sm opacity-50">United States</div>
+            </div>
+          </div>
+        </td>
+        <td>
+          Zemlak, Daniel and Leannon
+          <br />
+          <span class="badge badge-ghost badge-sm">Desktop Support Technician</span>
+        </td>
+      </tr>
+
+    </tbody>
+  </table>
+</div>

src/components/cv/TimeLine.astro

@@ -10,7 +10,7 @@ const { title, subtitle, desc } = Astro.props;
   <div class="experience__data bd-grid px-5">
     <h3 class="font-semibold mb-1">{title}</h3>
     <span class="font-light text-sm">{subtitle}</span>
-    <p class="my-2">
+    <p class="my-2 text-justify">
       {desc}
     </p>
   </div>

src/pages/cv.astro

@@ -8,7 +8,7 @@ import TimeLineElement from "../components/cv/TimeLine.astro";
     <div class="text-3xl w-full font-bold">Profile</div>
   </div>
 
-  <div class="mb-10">
+  <div class="mb-10 text-justify">
     Engineer in Informatics Science with 6 years + of experience in software development. Dominion of various programming
     languages, frameworks, CMS and graphics engines. Experience in WEB design and development. Work with Data Base handled
     systems, as well as design, normalization and migration. Knowledge of work with graphic design tools for image

src/pages/index.astro

@@ -22,7 +22,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
   </div>
 
   <div>
-    <div class="text-3xl w-full font-bold">My last projects {"</>"}</div>
+    <div class="text-3xl w-full font-bold  mb-5">My last projects {"</>"}</div>
   </div>
 
   <div class="flex flex-wrap mb-5 mt-3">

src/pages/projects.astro

@@ -1,35 +1,34 @@
 ---
 import PageLayout from "../layouts/Page.astro";
-import Card from "../components/Card.astro";
+import HorizontalCard from "../components/HorizontalCard.astro";
 ---
 
 <PageLayout>
-  <div class="flex flex-wrap mb-5 mt-3">
-    <Card
-      title="WeekTodo"
-      img="https://weektodo.me/assets/images/weektodo-opengraph-1200x630.png"
-      desc="Free minimalist weektly planner focused in privacy."
-      url="https://weektodo.me/"
-      badge="NEW"
-    />
-    <Card
-      title="Productiveness"
-      img="https://softr-prod.imgix.net/applications/f988aa05-d312-4aa6-812e-832bdc75388d/assets/d2c87a17-4fc7-455f-a656-5e4cdbe7aa71.png"
-      desc="Discover the best productivity apps in the market."
-      url="https://www.productiveness.net/"
-    />
-    <Card
-      title="Zen Twitter"
-      img="https://lh3.googleusercontent.com/NGt846Flv6wyBSlYzfJkFHAJ8mcG1pf4M-InYeZnp4VsIk6JKk8nZ2ZKskDlvHDAEYr_biSO8jtXIWI83OXD5RNXWg=w640-h400-e365-rj-sc0x00ffffff"
-      desc="Disable Twitter vanity metrics, notifications and distractions."
-      url="https://chrome.google.com/webstore/detail/zen-twitter/nlkendkabgopehmlmohfbkgkjjdjepnb"
-      badge="FOSS"
-    />
-    <Card
-    title="Qvalive"
-    img="https://qvalive.com/assets/images/qvalive-splash.jpg"
-    desc="El espacio de transmisiones cubanas en vivo por internet."
-    url="https://qvalive.com/"
-  />
+  <div>
+    <div class="text-3xl w-full font-bold mb-5">My last projects {"</>"}</div>
   </div>
+
+  <HorizontalCard
+    title="WeekTodo"
+    img="https://weektodo.me/assets/images/weektodo-opengraph-1200x630.png"
+    desc="Free minimalist weektly planner focused in privacy."
+    url="https://weektodo.me/"
+    badge="NEW"
+  />
+  <div class="divider my-0"></div>
+  <HorizontalCard
+    title="Productiveness"
+    img="https://softr-prod.imgix.net/applications/f988aa05-d312-4aa6-812e-832bdc75388d/assets/d2c87a17-4fc7-455f-a656-5e4cdbe7aa71.png"
+    desc="Discover the best productivity apps in the market."
+    url="https://www.productiveness.net/"
+  />
+  <div class="divider my-0"></div>
+  <HorizontalCard
+    title="Zen Twitter"
+    img="https://lh3.googleusercontent.com/NGt846Flv6wyBSlYzfJkFHAJ8mcG1pf4M-InYeZnp4VsIk6JKk8nZ2ZKskDlvHDAEYr_biSO8jtXIWI83OXD5RNXWg=w640-h400-e365-rj-sc0x00ffffff"
+    desc="Disable Twitter vanity metrics, notifications and distractions."
+    url="https://chrome.google.com/webstore/detail/zen-twitter/nlkendkabgopehmlmohfbkgkjjdjepnb"
+    badge="FOSS"
+    tags={["Chrome Extension", "Free"]}
+  />
 </PageLayout>