mirror of
https://codeberg.org/andyscott-pages/andyscott-dot-me.git
synced 2024-09-19 11:08:05 -04:00
adding tags to cards
This commit is contained in:
Manuel Ernesto Garcia
parent
67b52de5a7
commit
24e6ffeacd
7 changed files with 83 additions and 32 deletions
|
|
@ -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>
|
||||
|
|
|
|||
21
src/components/HorizontalCard.astro
Normal file
21
src/components/HorizontalCard.astro
Normal 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>
|
||||
28
src/components/Table.astro
Normal file
28
src/components/Table.astro
Normal 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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<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"
|
||||
/>
|
||||
<Card
|
||||
<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/"
|
||||
/>
|
||||
<Card
|
||||
<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"]}
|
||||
/>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue