flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/flo-bit.github.io. my personal website, w/ astro, svelte, tailwind, typescript, threlte
flo-bit.dev/
portfolio
portfolio-website
svelte
sveltekit
tailwind
threejs
threlte
typescript
861 B
28 lines
1<script lang="ts">
2 import { fade } from "svelte/transition";
3
4 export let element: HTMLElement;
5
6 export let color: string = '';
7 export let title: string = '';
8 export let description: string = '';
9 export let image: string | undefined = undefined;
10</script>
11
12<div
13 class="w-full h-full absolute cursor-grab ease-in-out rounded-xl touch-none select-none border border-white/20 bg-black {color}"
14 bind:this={element}
15>
16 {#key image}
17 {#if image}
18 <img class="w-full h-full rounded-xl object-cover" src={image} alt={title} />
19 {/if}
20 {/key}
21 <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 rounded-b-xl"></div>
22 <div class="p-4 absolute bottom-0 w-full flex justify-center text-white">
23 <div class="flex items-center flex-col">
24 <h3 class="text-3xl font-semibold pb-4">{title}</h3>
25 <p>{description}</p>
26 </div>
27 </div>
28</div>