Files for my website
bwc9876.dev
1---
2import { getImage } from "astro:assets";
3import { Image } from "astro:assets";
4import type { CollectionEntry } from "astro:content";
5
6export interface Props {
7 project: CollectionEntry<"projects">;
8}
9
10const { project } = Astro.props;
11
12const bgImage = await getImage({
13 format: "webp",
14 src: project.data.image,
15 width: 16,
16 height: 16,
17 quality: 0
18});
19---
20
21<a href={`/projects/${project.id}/`}>
22 <article>
23 <div style={{ "background-image": `url("${bgImage.src}")` }}>
24 <Image
25 class="thumbnail"
26 transition:name={`project-img-${project.id}`}
27 src={project.data.image}
28 densities={[1, 1.5, 2]}
29 width={400}
30 role="presentation"
31 alt=""
32 />
33 </div>
34 <div>
35 <h3 class="project-name">{project.data.name}</h3>
36 <small>{project.data.tags.join(", ")}</small>
37 <p>{project.data.summary}</p>
38 </div>
39 </article>
40</a>
41
42<style>
43 :not(.project-name) {
44 text-decoration: none !important;
45 }
46
47 small {
48 margin: 0 var(--1);
49 display: block;
50 text-wrap: balance;
51 }
52
53 h3 {
54 margin: var(--1) var(--1) 0 var(--1);
55 }
56
57 p {
58 margin: var(--1);
59 }
60
61 article {
62 display: flex;
63 flex-direction: column;
64 height: 100%;
65 color: var(--text);
66 background-color: var(--secondary);
67 border-radius: 5px;
68 }
69
70 a {
71 transition: transform cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.4s;
72 }
73
74 a:hover {
75 transform: translateY(calc(5px * -1));
76 }
77
78 a:hover img {
79 transform: scale(1.02);
80 }
81
82 span {
83 flex-grow: 1;
84 text-align: center;
85 display: flex;
86 align-items: center;
87 justify-content: center;
88 }
89
90 div:first-child {
91 display: flex;
92 flex-direction: column;
93 align-items: center;
94 background-repeat: no-repeat;
95 background-size: 125%;
96 background-position: center;
97 }
98
99 div {
100 overflow: hidden;
101 position: relative;
102 }
103
104 img,
105 div:first-child {
106 border-top-left-radius: 5px;
107 border-top-right-radius: 5px;
108 }
109
110 img {
111 position: relative;
112 object-fit: contain;
113 width: 100%;
114 height: auto;
115 transition: transform ease-in-out 0.4s;
116 height: var(--14);
117 backdrop-filter: blur(100px);
118 }
119</style>