···

       
151
       
 
       
            z-index: 1;

     

       
152
       
 
       
        }

     

       
153
       
 
       


     

       
154
       
-
       
        & > :not(picture) {

     

       
155
       
 
       
            margin: 0 var(--spacing);

     

       
156
       
 
       
            padding: 0;

     

       
157
       
 
       
        }

     

       
158
       
 
       


     

       
159
       
-
       
        & > picture {

     

       
160
       
 
       
            grid-area: img;

     

       
161
       
 
       


     

       
162
       
 
       
            width: 100%;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
163
       
 
       
        }

     

       
164
       
 
       


     

       
165
       
 
       
        & > h3 {

     

···

       
151
       
 
       
            z-index: 1;

     

       
152
       
 
       
        }

     

       
153
       
 
       


     

       
154
       
+
       
        & > :not(img) {

     

       
155
       
 
       
            margin: 0 var(--spacing);

     

       
156
       
 
       
            padding: 0;

     

       
157
       
 
       
        }

     

       
158
       
 
       


     

       
159
       
+
       
        & > img {

     

       
160
       
 
       
            grid-area: img;

     

       
161
       
 
       


     

       
162
       
 
       
            width: 100%;

     

       
163
       
+
       
            height: auto;

     

       
164
       
+
       
            display: block;

     

       
165
       
 
       
        }

     

       
166
       
 
       


     

       
167
       
 
       
        & > h3 {

     

···

       
29
       
 
       
        font-size: 1.2rem;

     

       
30
       
 
       
    }

     

       
31
       
 
       


     

       
32
       
-
       
    & > picture,

     

       
33
       
 
       
    & > img {

     

       
34
       
 
       
        grid-area: img;

     

       
35
       
 
       
        align-self: center;

     

       
36
       
 
       
        justify-self: center;

     

       
37
       
-
       


     

       
38
       
-
       
        &,

     

       
39
       
-
       
        img {

     

       
40
       
-
       
            border-radius: var(--radius);

     

       
41
       
-
       
        }

     

       
42
       
 
       
    }

     

       
43
       
 
       


     

       
44
       
 
       
    & > p.description {

     

···

       
29
       
 
       
        font-size: 1.2rem;

     

       
30
       
 
       
    }

     

       
31
       
 
       


     

       
0
       
 
       

     

       
32
       
 
       
    & > img {

     

       
33
       
 
       
        grid-area: img;

     

       
34
       
 
       
        align-self: center;

     

       
35
       
 
       
        justify-self: center;

     

       
36
       
+
       
        border-radius: var(--radius);

     

       
37
       
+
       
        height: auto;

     

       
38
       
+
       
        width: auto;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
39
       
 
       
    }

     

       
40
       
 
       


     

       
41
       
 
       
    & > p.description {

     

···

       
68
       
 
       
    }

     

       
69
       
 
       


     

       
70
       
 
       
    /* Make images easier to work with */

     

       
71
       
-
       
    img,

     

       
72
       
-
       
    picture {

     

       
73
       
 
       
        max-width: 100%;

     

       
74
       
 
       
        display: block;

     

       
75
       
 
       
    }

     

···

       
68
       
 
       
    }

     

       
69
       
 
       


     

       
70
       
 
       
    /* Make images easier to work with */

     

       
71
       
+
       
    img {

     

       
0
       
 
       

     

       
72
       
 
       
        max-width: 100%;

     

       
73
       
 
       
        display: block;

     

       
74
       
 
       
    }

     

···

       
2
       
 
       
import "@/assets/styles/main.css";

     

       
3
       
 
       
import "@/assets/styles/reset.css";

     

       
4
       
 
       
import { Icon } from "astro-icon/components";

     

       
0
       
 
       

     

       
5
       
 
       
import { config } from "@/config.ts";

     

       
6
       
 
       


     

       
7
       
 
       
import colinPng from "@/assets/img/colin.png";

     

       
8
       
-
       
import colinWebp from "@/assets/img/colin.webp";

     

       
9
       
 
       


     

       
10
       
 
       
const path = Astro.originPathname.replace(/\/(fr|en)\//, "/");

     

       
11
       
 
       
const locale = Astro.currentLocale;

     
···

       
27
       
 
       
    </head>

     

       
28
       
 
       
    <body>

     

       
29
       
 
       
        <header>

     

       
30
       
-
       
            <picture class="container">

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
31
       
 
       
                <source srcset={colinWebp.src} type="image/webp" />

     

       
32
       
 
       
                <img src={colinPng.src} alt="Colin Ozanne" />

     

       
33
       
-
       
            </picture>

     

       
34
       
 
       
            <h1 class="container">Colin <br class="desktop-only" /> Ozanne</h1>

     

       
35
       
 
       
            <p class="container">{subtitle}</p>

     

       
36
       
 
       
        </header>

     
···

       
144
       
 
       
        width: 100%;

     

       
145
       
 
       
        padding: var(--spacing, 1rem);

     

       
146
       
 
       


     

       
147
       
-
       
        picture {

     

       
148
       
 
       
            aspect-ratio: auto;

     

       
149
       
 
       
            height: auto;

     

       
150
       
 
       
            padding: 0;

     

       
151
       
 
       
            margin: 0;

     

       
152
       
 
       
            overflow: hidden;

     

       
0
       
 
       

     

       
153
       
 
       
        }

     

       
154
       
 
       


     

       
155
       
 
       
        h1 {

     
···

       
238
       
 
       
                "title title";

     

       
239
       
 
       
            gap: var(--spacing);

     

       
240
       
 
       


     

       
241
       
-
       
            picture {

     

       
242
       
 
       
                grid-area: img;

     

       
243
       
 
       
                width: var(--img-size);

     

       
244
       
 
       
                height: var(--img-size);

     

···

       
2
       
 
       
import "@/assets/styles/main.css";

     

       
3
       
 
       
import "@/assets/styles/reset.css";

     

       
4
       
 
       
import { Icon } from "astro-icon/components";

     

       
5
       
+
       
import { Image } from "astro:assets";

     

       
6
       
 
       
import { config } from "@/config.ts";

     

       
7
       
 
       


     

       
8
       
 
       
import colinPng from "@/assets/img/colin.png";

     

       
0
       
 
       

     

       
9
       
 
       


     

       
10
       
 
       
const path = Astro.originPathname.replace(/\/(fr|en)\//, "/");

     

       
11
       
 
       
const locale = Astro.currentLocale;

     
···

       
27
       
 
       
    </head>

     

       
28
       
 
       
    <body>

     

       
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">

     

       
38
       
 
       
                <source srcset={colinWebp.src} type="image/webp" />

     

       
39
       
 
       
                <img src={colinPng.src} alt="Colin Ozanne" />

     

       
40
       
+
       
            </picture> -->

     

       
41
       
 
       
            <h1 class="container">Colin <br class="desktop-only" /> Ozanne</h1>

     

       
42
       
 
       
            <p class="container">{subtitle}</p>

     

       
43
       
 
       
        </header>

     
···

       
151
       
 
       
        width: 100%;

     

       
152
       
 
       
        padding: var(--spacing, 1rem);

     

       
153
       
 
       


     

       
154
       
+
       
        img {

     

       
155
       
 
       
            aspect-ratio: auto;

     

       
156
       
 
       
            height: auto;

     

       
157
       
 
       
            padding: 0;

     

       
158
       
 
       
            margin: 0;

     

       
159
       
 
       
            overflow: hidden;

     

       
160
       
+
       
            --container-color: var(--rose-500);

     

       
161
       
 
       
        }

     

       
162
       
 
       


     

       
163
       
 
       
        h1 {

     
···

       
246
       
 
       
                "title title";

     

       
247
       
 
       
            gap: var(--spacing);

     

       
248
       
 
       


     

       
249
       
+
       
            img {

     

       
250
       
 
       
                grid-area: img;

     

       
251
       
 
       
                width: var(--img-size);

     

       
252
       
 
       
                height: var(--img-size);

     

···

       
5
       
 
       
import { Image } from "astro:assets";

     

       
6
       
 
       


     

       
7
       
 
       
import karrJpg from "@/assets/img/karr_demo.jpg";

     

       
8
       
-
       
import karrWebp from "@/assets/img/karr_demo.webp";

     

       
9
       
 
       


     

       
10
       
 
       
const homepage = Astro.url;

     

       
11
       
 
       
homepage.pathname = "/";

     
···

       
30
       
 
       
            src={karrJpg}

     

       
31
       
 
       
            alt="Karr"

     

       
32
       
 
       
            style="view-transition-name: karr-img"

     

       
0
       
 
       

     

       
33
       
 
       
        />

     

       
34
       
 
       


     

       
35
       
 
       
        <p class="description">

     

···

       
5
       
 
       
import { Image } from "astro:assets";

     

       
6
       
 
       


     

       
7
       
 
       
import karrJpg from "@/assets/img/karr_demo.jpg";

     

       
0
       
 
       

     

       
8
       
 
       


     

       
9
       
 
       
const homepage = Astro.url;

     

       
10
       
 
       
homepage.pathname = "/";

     
···

       
29
       
 
       
            src={karrJpg}

     

       
30
       
 
       
            alt="Karr"

     

       
31
       
 
       
            style="view-transition-name: karr-img"

     

       
32
       
+
       
            width={2300}

     

       
33
       
 
       
        />

     

       
34
       
 
       


     

       
35
       
 
       
        <p class="description">

     

···

       
2
       
 
       
import Layout from "@/layouts/Layout.astro";

     

       
3
       
 
       
import "@/assets/styles/index.css";

     

       
4
       
 
       
import { Icon } from "astro-icon/components";

     

       
0
       
 
       

     

       
5
       
 
       


     

       
6
       
 
       
import karrJpg from "@/assets/img/karr_demo.jpg";

     

       
7
       
-
       
import karrWebp from "@/assets/img/karr_demo.webp";

     

       
8
       
 
       


     

       
9
       
 
       
const projects = [

     

       
10
       
 
       
    {

     

       
11
       
 
       
        name: "Karr",

     

       
12
       
 
       
        slug: "karr",

     

       
13
       
 
       
        description: "Plateforme de covoiturage fédérée",

     

       
14
       
-
       
        imgs: {

     

       
15
       
-
       
            jpg: karrJpg,

     

       
16
       
-
       
            webp: karrWebp,

     

       
17
       
-
       
        },

     

       
18
       
 
       
        tags: ["Next.js", "Hono", "OpenAuth", "CI"],

     

       
19
       
 
       
    },

     

       
20
       
 
       
];

     
···

       
64
       
 
       
            {

     

       
65
       
 
       
                projects.map((project) => (

     

       
66
       
 
       
                    <div class="project">

     

       
67
       
-
       
                        <picture style="view-transition-name: karr-img">

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
68
       
 
       
                            <source

     

       
69
       
 
       
                                srcset={project.imgs.webp.src}

     

       
70
       
 
       
                                type="image/webp"

     
···

       
73
       
 
       
                                src={project.imgs.jpg.src}

     

       
74
       
 
       
                                alt={project.name}

     

       
75
       
 
       
                            />

     

       
76
       
-
       
                        </picture>

     

       
77
       
 
       
                        <h3>

     

       
78
       
 
       
                            <a href={`/projects/${project.slug}`}>

     

       
79
       
 
       
                                {project.name}

     

···

       
2
       
 
       
import Layout from "@/layouts/Layout.astro";

     

       
3
       
 
       
import "@/assets/styles/index.css";

     

       
4
       
 
       
import { Icon } from "astro-icon/components";

     

       
5
       
+
       
import { Image } from "astro:assets";

     

       
6
       
 
       


     

       
7
       
 
       
import karrJpg from "@/assets/img/karr_demo.jpg";

     

       
0
       
 
       

     

       
8
       
 
       


     

       
9
       
 
       
const projects = [

     

       
10
       
 
       
    {

     

       
11
       
 
       
        name: "Karr",

     

       
12
       
 
       
        slug: "karr",

     

       
13
       
 
       
        description: "Plateforme de covoiturage fédérée",

     

       
14
       
+
       
        img: karrJpg,

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
15
       
 
       
        tags: ["Next.js", "Hono", "OpenAuth", "CI"],

     

       
16
       
 
       
    },

     

       
17
       
 
       
];

     
···

       
61
       
 
       
            {

     

       
62
       
 
       
                projects.map((project) => (

     

       
63
       
 
       
                    <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">

     

       
71
       
 
       
                            <source

     

       
72
       
 
       
                                srcset={project.imgs.webp.src}

     

       
73
       
 
       
                                type="image/webp"

     
···

       
76
       
 
       
                                src={project.imgs.jpg.src}

     

       
77
       
 
       
                                alt={project.name}

     

       
78
       
 
       
                            />

     

       
79
       
+
       
                        </picture> -->

     

       
80
       
 
       
                        <h3>

     

       
81
       
 
       
                            <a href={`/projects/${project.slug}`}>

     

       
82
       
 
       
                                {project.name}

     

···

       
2
       
 
       
import Layout from "@/layouts/Layout.astro";

     

       
3
       
 
       
import "@/assets/styles/projects/karr.css";

     

       
4
       
 
       
import { Icon } from "astro-icon/components";

     

       
0
       
 
       

     

       
5
       
 
       


     

       
6
       
 
       
import karrJpg from "@/assets/img/karr_demo.jpg";

     

       
7
       
-
       
import karrWebp from "@/assets/img/karr_demo.webp";

     

       
8
       
 
       


     

       
9
       
 
       
const homepage = Astro.url;

     

       
10
       
 
       
homepage.pathname = "/";

     
···

       
22
       
 
       
            Plateforme de covoiturage fédérée pour entreprises

     

       
23
       
 
       
        </p>

     

       
24
       
 
       


     

       
25
       
-
       
        <picture style="view-transition-name: karr-img">

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
26
       
 
       
            <source srcset={karrWebp.src} type="image/webp" />

     

       
27
       
 
       
            <img src={karrJpg.src} alt="Karr" />

     

       
28
       
-
       
        </picture>

     

       
29
       
 
       


     

       
30
       
 
       
        <p class="description">

     

       
31
       
 
       
            Ce projet entrepreneurial a été porté pendant 5 mois avec

     

···

       
2
       
 
       
import Layout from "@/layouts/Layout.astro";

     

       
3
       
 
       
import "@/assets/styles/projects/karr.css";

     

       
4
       
 
       
import { Icon } from "astro-icon/components";

     

       
5
       
+
       
import { Image } from "astro:assets";

     

       
6
       
 
       


     

       
7
       
 
       
import karrJpg from "@/assets/img/karr_demo.jpg";

     

       
0
       
 
       

     

       
8
       
 
       


     

       
9
       
 
       
const homepage = Astro.url;

     

       
10
       
 
       
homepage.pathname = "/";

     
···

       
22
       
 
       
            Plateforme de covoiturage fédérée pour entreprises

     

       
23
       
 
       
        </p>

     

       
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">

     

       
33
       
 
       
            <source srcset={karrWebp.src} type="image/webp" />

     

       
34
       
 
       
            <img src={karrJpg.src} alt="Karr" />

     

       
35
       
+
       
        </picture> -->

     

       
36
       
 
       


     

       
37
       
 
       
        <p class="description">

     

       
38
       
 
       
            Ce projet entrepreneurial a été porté pendant 5 mois avec