vixalien.tngl.sh
my website
1---
2import { getCollection } from "astro:content";
3import type { CollectionEntry } from "astro:content";
4
5interface Props {
6 limit?: number;
7}
8
9const { limit = Infinity } = Astro.props;
10
11const projects = (await getCollection("portfolio")).slice(0, limit);
12
13type Project = CollectionEntry<"portfolio">;
14---
15
16<div class="grid lg:grid-cols-2 lg:-mx-20 gap-4 mb-5">
17 {
18 projects.map(
19 ({ data: { title, description, hero_image, bg_color, link } }) => (
20 <a
21 class="no-underline rounded-lg hover:saturate-50 transition text-white flex flex-col items-center"
22 href={link}
23 style={bg_color ? { "background-color": bg_color } : null}
24 target="_blank"
25 >
26 {hero_image ? (
27 <img class="project-image" src={hero_image} alt={title} />
28 ) : null}
29 <div class="p-4 pt-0 flex flex-col items-center">
30 <h3 class="text-inherit mb-1">
31 <span>{title}</span>
32 </h3>
33 <span>{description}</span>
34 </div>
35 </a>
36 ),
37 )
38 }
39</div>