adding tags to cards

This commit is contained in:
Manuel Ernesto Garcia 2022-09-23 12:15:20 -04:00
parent 67b52de5a7
commit 24e6ffeacd
7 changed files with 83 additions and 32 deletions

View file

@ -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"> <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>} {badge && <div class="badge badge-secondary">{badge}</div>}
</h2> </h2>
<p>{desc}</p> <p>{desc}</p>
<div class="card-actions justify-end">
{tags && tags.map((tag) => <div class="badge badge-outline">{tag}</div>)}
</div>
</div> </div>
</div> </div>
</a> </a>

View file

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

View file

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

View file

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

View file

@ -8,7 +8,7 @@ import TimeLineElement from "../components/cv/TimeLine.astro";
<div class="text-3xl w-full font-bold">Profile</div> <div class="text-3xl w-full font-bold">Profile</div>
</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 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 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 systems, as well as design, normalization and migration. Knowledge of work with graphic design tools for image

View file

@ -22,7 +22,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
</div> </div>
<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>
<div class="flex flex-wrap mb-5 mt-3"> <div class="flex flex-wrap mb-5 mt-3">

View file

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