finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
Revert "feat: use `Image` component"
This reverts commit 0bdc45ec1b4c8b7d2d6f0aceec5afe728e5a59fa.
+2
-4
src/assets/styles/index.css
+2
-4
src/assets/styles/index.css
···
151
151
z-index: 1;
152
152
}
153
153
154
-
& > :not(img) {
154
+
& > :not(picture) {
155
155
margin: 0 var(--spacing);
156
156
padding: 0;
157
157
}
158
158
159
-
& > img {
159
+
& > picture {
160
160
grid-area: img;
161
161
162
162
width: 100%;
163
-
height: auto;
164
-
display: block;
165
163
}
166
164
167
165
& > h3 {
+6
-3
src/assets/styles/projects/karr.css
+6
-3
src/assets/styles/projects/karr.css
···
29
29
font-size: 1.2rem;
30
30
}
31
31
32
+
& > picture,
32
33
& > img {
33
34
grid-area: img;
34
35
align-self: center;
35
36
justify-self: center;
36
-
border-radius: var(--radius);
37
-
height: auto;
38
-
width: auto;
37
+
38
+
&,
39
+
img {
40
+
border-radius: var(--radius);
41
+
}
39
42
}
40
43
41
44
& > p.description {
+2
-1
src/assets/styles/reset.css
+2
-1
src/assets/styles/reset.css
+5
-13
src/layouts/Layout.astro
+5
-13
src/layouts/Layout.astro
···
2
2
import "@/assets/styles/main.css";
3
3
import "@/assets/styles/reset.css";
4
4
import { Icon } from "astro-icon/components";
5
-
import { Image } from "astro:assets";
6
5
import { config } from "@/config.ts";
7
6
8
7
import colinPng from "@/assets/img/colin.png";
8
+
import colinWebp from "@/assets/img/colin.webp";
9
9
10
10
const path = Astro.originPathname.replace(/\/(fr|en)\//, "/");
11
11
const locale = Astro.currentLocale;
···
27
27
</head>
28
28
<body>
29
29
<header>
30
-
<Image
31
-
class="container"
32
-
src={colinPng}
33
-
alt="Colin Ozanne"
34
-
width={256}
35
-
height={256}
36
-
/>
37
-
<!-- <picture class="container">
30
+
<picture class="container">
38
31
<source srcset={colinWebp.src} type="image/webp" />
39
32
<img src={colinPng.src} alt="Colin Ozanne" />
40
-
</picture> -->
33
+
</picture>
41
34
<h1 class="container">Colin <br class="desktop-only" /> Ozanne</h1>
42
35
<p class="container">{subtitle}</p>
43
36
</header>
···
151
144
width: 100%;
152
145
padding: var(--spacing, 1rem);
153
146
154
-
img {
147
+
picture {
155
148
aspect-ratio: auto;
156
149
height: auto;
157
150
padding: 0;
158
151
margin: 0;
159
152
overflow: hidden;
160
-
--container-color: var(--rose-500);
161
153
}
162
154
163
155
h1 {
···
246
238
"title title";
247
239
gap: var(--spacing);
248
240
249
-
img {
241
+
picture {
250
242
grid-area: img;
251
243
width: var(--img-size);
252
244
height: var(--img-size);
+1
-1
src/pages/en/projects/karr.astro
+1
-1
src/pages/en/projects/karr.astro
···
5
5
import { Image } from "astro:assets";
6
6
7
7
import karrJpg from "@/assets/img/karr_demo.jpg";
8
+
import karrWebp from "@/assets/img/karr_demo.webp";
8
9
9
10
const homepage = Astro.url;
10
11
homepage.pathname = "/";
···
29
30
src={karrJpg}
30
31
alt="Karr"
31
32
style="view-transition-name: karr-img"
32
-
width={2300}
33
33
/>
34
34
35
35
<p class="description">
+7
-10
src/pages/fr/index.astro
+7
-10
src/pages/fr/index.astro
···
2
2
import Layout from "@/layouts/Layout.astro";
3
3
import "@/assets/styles/index.css";
4
4
import { Icon } from "astro-icon/components";
5
-
import { Image } from "astro:assets";
6
5
7
6
import karrJpg from "@/assets/img/karr_demo.jpg";
7
+
import karrWebp from "@/assets/img/karr_demo.webp";
8
8
9
9
const projects = [
10
10
{
11
11
name: "Karr",
12
12
slug: "karr",
13
13
description: "Plateforme de covoiturage fédérée",
14
-
img: karrJpg,
14
+
imgs: {
15
+
jpg: karrJpg,
16
+
webp: karrWebp,
17
+
},
15
18
tags: ["Next.js", "Hono", "OpenAuth", "CI"],
16
19
},
17
20
];
···
61
64
{
62
65
projects.map((project) => (
63
66
<div class="project">
64
-
<Image
65
-
src={project.img}
66
-
alt={project.name}
67
-
style="view-transition-name: karr-img"
68
-
width={1100}
69
-
/>
70
-
<!-- <picture style="view-transition-name: karr-img">
67
+
<picture style="view-transition-name: karr-img">
71
68
<source
72
69
srcset={project.imgs.webp.src}
73
70
type="image/webp"
···
76
73
src={project.imgs.jpg.src}
77
74
alt={project.name}
78
75
/>
79
-
</picture> -->
76
+
</picture>
80
77
<h3>
81
78
<a href={`/projects/${project.slug}`}>
82
79
{project.name}
+3
-10
src/pages/fr/projects/karr.astro
+3
-10
src/pages/fr/projects/karr.astro
···
2
2
import Layout from "@/layouts/Layout.astro";
3
3
import "@/assets/styles/projects/karr.css";
4
4
import { Icon } from "astro-icon/components";
5
-
import { Image } from "astro:assets";
6
5
7
6
import karrJpg from "@/assets/img/karr_demo.jpg";
7
+
import karrWebp from "@/assets/img/karr_demo.webp";
8
8
9
9
const homepage = Astro.url;
10
10
homepage.pathname = "/";
···
22
22
Plateforme de covoiturage fédérée pour entreprises
23
23
</p>
24
24
25
-
<Image
26
-
src={karrJpg}
27
-
alt="Karr"
28
-
style="view-transition-name: karr-img"
29
-
width={2300}
30
-
/>
31
-
32
-
<!-- <picture style="view-transition-name: karr-img">
25
+
<picture style="view-transition-name: karr-img">
33
26
<source srcset={karrWebp.src} type="image/webp" />
34
27
<img src={karrJpg.src} alt="Karr" />
35
-
</picture> -->
28
+
</picture>
36
29
37
30
<p class="description">
38
31
Ce projet entrepreneurial a été porté pendant 5 mois avec