commit 6a7bd6ff0a36a6261ea6944df7cfb18f74817dfd · finxol.io/portfolio

+2 -4

src/assets/styles/index.css

···

       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 {

···

       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 {

+6 -3

src/assets/styles/projects/karr.css

···

       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 {

···

       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 {

+2 -1

src/assets/styles/reset.css

···

       68
        
           }

     

       69
        
       

     

       70
        
           /* Make images easier to work with */

     

       71
       -
           img {

     

       0
        
       
     

       72
        
               max-width: 100%;

     

       73
        
               display: block;

     

       74
        
           }

···

       68
        
           }

     

       69
        
       

     

       70
        
           /* Make images easier to work with */

     

       71
       +
           img,

     

       72
       +
           picture {

     

       73
        
               max-width: 100%;

     

       74
        
               display: block;

     

       75
        
           }

+5 -13

src/layouts/Layout.astro

···

       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);

···

       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);

+1 -1

src/pages/en/projects/karr.astro

···

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

···

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

+7 -10

src/pages/fr/index.astro

···

       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/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}

+3 -10

src/pages/fr/projects/karr.astro

···

       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

···

       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