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