commit e3dc0cd38b98e0bf176a237153eb8545f491cf9a · finxol.io/portfolio

+79 -15

src/assets/styles/projects/karr.css

···

       1
        
       article {

     

       2
        
           display: grid;

     

       3
       -
           grid-template-columns: auto 1fr;

     

       4
       -
           align-items: center;

     

       5
        
           grid-template-areas:

     

       6
       -
               "back-btn title"

     

       7
       -
               ". subtitle"

     

       8
       -
               ". img"

     

       9
       -
               ". description"

     

       10
       -
               ". boxes";

     

       11
        
           gap: var(--spacing);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       12
        
           margin-inline-end: 3rem;

     

       13
        
           font-size: 1.1rem;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       14
        
       

     

       15
        
           & > a {

     

       16
        
               grid-area: back-btn;

     
···

       19
        
           & > h2 {

     

       20
        
               grid-area: title;

     

       21
        
               margin: 0;

     

       22
       -
               font-size: 2.5rem;

     

       23
       -
               font-weight: bold;

     

       0
        
       
     

       24
        
           }

     

       25
        
       

     

       26
        
           & > p.subtitle {

     

       27
        
               grid-area: subtitle;

     

       28
        
               margin: 0;

     

       29
       -
               font-size: 1.2rem;

     

       0
        
       
     

       0
        
       
     

       30
        
           }

     

       31
        
       

     

       32
       -
           & > picture,

     

       33
       -
           & > img {

     

       34
        
               grid-area: img;

     

       35
        
               align-self: center;

     

       36
        
               justify-self: center;

     
···

       43
        
       

     

       44
        
           & > p.description {

     

       45
        
               grid-area: description;

     

       0
        
       
     

       0
        
       
     

       46
        
           }

     

       47
        
       

     

       48
       -
           & > div.boxes {

     

       49
       -
               grid-area: boxes;

     

       50
        
               display: grid;

     

       51
       -
               grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       52
        
               gap: var(--spacing);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       53
        
           }

     

       54
        
       }

···

       1
        
       article {

     

       2
        
           display: grid;

     

       3
       +
           grid-template-columns: auto auto 1fr;

     

       0
        
       
     

       4
        
           grid-template-areas:

     

       5
       +
               "back-btn title subtitle"

     

       6
       +
               ". img img"

     

       7
       +
               ". description description";

     

       0
        
       
     

       0
        
       
     

       8
        
           gap: var(--spacing);

     

       9
       +
           column-gap: calc(var(--spacing) * 2);

     

       10
       +
           row-gap: calc(var(--spacing) * 3);

     

       11
       +
           align-items: center;

     

       12
        
           margin-inline-end: 3rem;

     

       13
        
           font-size: 1.1rem;

     

       14
       +
       

     

       15
       +
           @media screen and (max-width: 768px) {

     

       16
       +
               grid-template-areas:

     

       17
       +
                   "back-btn title"

     

       18
       +
                   "subtitle subtitle"

     

       19
       +
                   "img img"

     

       20
       +
                   "description description"

     

       21
       +
                   "boxes boxes";

     

       22
       +
               margin-inline-end: 0;

     

       23
       +
           }

     

       24
        
       

     

       25
        
           & > a {

     

       26
        
               grid-area: back-btn;

     
···

       29
        
           & > h2 {

     

       30
        
               grid-area: title;

     

       31
        
               margin: 0;

     

       32
       +
               font-size: 2.7rem;

     

       33
       +
               font-weight: bolder;

     

       34
       +
               width: min-content;

     

       35
        
           }

     

       36
        
       

     

       37
        
           & > p.subtitle {

     

       38
        
               grid-area: subtitle;

     

       39
        
               margin: 0;

     

       40
       +
               font-size: 1.5rem;

     

       41
       +
               align-self: end;

     

       42
       +
               margin-block-end: 0.2rem;

     

       43
        
           }

     

       44
        
       

     

       45
       +
           & > div {

     

       0
        
       
     

       46
        
               grid-area: img;

     

       47
        
               align-self: center;

     

       48
        
               justify-self: center;

     
···

       55
        
       

     

       56
        
           & > p.description {

     

       57
        
               grid-area: description;

     

       58
       +
               margin: 0;

     

       59
       +
               font-size: 1.2rem;

     

       60
        
           }

     

       61
        
       

     

       62
       +
           & > div {

     

       0
        
       
     

       63
        
               display: grid;

     

       64
       +
               grid-template-areas:

     

       65
       +
                   "img box1"

     

       66
       +
                   "img box2"

     

       67
       +
                   "img box3";

     

       68
        
               gap: var(--spacing);

     

       69
       +
       

     

       70
       +
               @media screen and (max-width: 768px) {

     

       71
       +
                   flex-direction: column;

     

       72
       +
                   align-items: center;

     

       73
       +
               }

     

       74
       +
       

     

       75
       +
               & > img,

     

       76
       +
               & > picture {

     

       77
       +
                   grid-area: img;

     

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

     

       79
       +
       

     

       80
       +
                   img {

     

       81
       +
                       object-fit: cover;

     

       82
       +
                       height: 100%;

     

       83
       +
                   }

     

       84
       +
               }

     

       85
       +
       

     

       86
       +
               div.container {

     

       87
       +
                   display: flex;

     

       88
       +
                   flex-direction: column;

     

       89
       +
                   align-items: center;

     

       90
       +
                   justify-content: center;

     

       91
       +
                   gap: var(--spacing);

     

       92
       +
                   font-size: 1.2rem;

     

       93
       +
                   text-align: center;

     

       94
       +
       

     

       95
       +
                   &:nth-child(1) {

     

       96
       +
                       grid-area: box1;

     

       97
       +
                   }

     

       98
       +
                   &:nth-child(2) {

     

       99
       +
                       grid-area: box2;

     

       100
       +
                   }

     

       101
       +
                   &:nth-child(3) {

     

       102
       +
                       grid-area: box3;

     

       103
       +
                   }

     

       104
       +
       

     

       105
       +
                   & > svg {

     

       106
       +
                       --size: 3rem;

     

       107
       +
                       color: var(--color-primary);

     

       108
       +
                   }

     

       109
       +
       

     

       110
       +
                   a {

     

       111
       +
                       text-decoration: none;

     

       112
       +
                       color: inherit;

     

       113
       +
                   }

     

       114
       +
       

     

       115
       +
                   --container-color: var(--teal-300);

     

       116
       +
               }

     

       117
        
           }

     

       118
        
       }

-8

src/layouts/Layout.astro

···

       208
        
                   transition: color 0.3s ease-in-out;

     

       209
        
                   --container-color: var(--amber-500);

     

       210
        
                   --container-text-color: var(--amber-950);

     

       211
       -
       

     

       212
       -
                   svg {

     

       213
       -
                       --size: 1.5rem;

     

       214
       -
       

     

       215
       -
                       &.external-link {

     

       216
       -
                           --size: 0.75rem;

     

       217
       -
                       }

     

       218
       -
                   }

     

       219
        
               }

     

       220
        
       

     

       221
        
               & > * {

···

       208
        
                   transition: color 0.3s ease-in-out;

     

       209
        
                   --container-color: var(--amber-500);

     

       210
        
                   --container-text-color: var(--amber-950);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       211
        
               }

     

       212
        
       

     

       213
        
               & > * {

+31 -23

src/pages/en/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";

     

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

     

       9
       -
       

     

       10
       -
       const homepage = Astro.url;

     

       11
       -
       homepage.pathname = "/";

     

       12
        
       ---

     

       13
        
       

     

       14
        
       <Layout>

     

       15
        
           <article>

     

       16
       -
               <a href={homepage}>

     

       17
        
                   <Icon name="pixel:arrow-alt-circle-left" />

     

       18
        
               </a>

     

       19
        
       

     
···

       21
        
       

     

       22
        
               <p class="subtitle">Federated carpool platform for companies</p>

     

       23
        
       

     

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

     

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

     

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

     

       27
       -
               </picture>

     

       0
        
       
     

       28
        
       

     

       29
       -
               <p class="description">

     

       30
       -
                   This entrepreneurial project was carried out for 5 months with

     

       31
       -
                   <a href="https://www.pepitebretagne.fr/"> Pépite Bretagne</a>. The

     

       32
       -
                   project was discontinued after a market study revealed a

     

       33
       -
                   well-established competition, already subsidized by public funds.

     

       34
       -
               </p>

     

       35
        
       

     

       36
       -
               <div class="boxes">

     

       37
        
                   <div class="container">

     

       38
       -
                       Github repo

     

       39
       -
                       <a href="https://github.com/karr-mobi/karr">

     

       40
       -
                           https://github.com/karr-mobi/karr

     

       41
       -
                       </a>

     

       42
        
                   </div>

     

       0
        
       
     

       43
        
                   <div class="container">

     

       44
       -
                       Github repo

     

       45
       -
                       <a href="https://github.com/karr-mobi/karr">

     

       46
       -
                           https://github.com/karr-mobi/karr

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       47
        
                       </a>

     

       48
        
                   </div>

     

       49
        
               </div>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       50
        
           </article>

     

       51
        
       </Layout>

···

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       8
        
       ---

     

       9
        
       

     

       10
        
       <Layout>

     

       11
        
           <article>

     

       12
       +
               <a href="/">

     

       13
        
                   <Icon name="pixel:arrow-alt-circle-left" />

     

       14
        
               </a>

     

       15
        
       

     
···

       17
        
       

     

       18
        
               <p class="subtitle">Federated carpool platform for companies</p>

     

       19
        
       

     

       20
       +
               <div class="boxes">

     

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

     

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

     

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

     

       24
       +
                   </picture>

     

       25
        
       

     

       26
       +
                   <div class="container">

     

       27
       +
                       <Icon name="tabler:brand-git" />

     

       28
       +
                       <span>

     

       29
       +
                           Since {new Date("10 October 2024").toLocaleDateString()}

     

       30
       +
                       </span>

     

       31
       +
                   </div>

     

       32
        
       

     

       0
        
       
     

       33
        
                   <div class="container">

     

       34
       +
                       <Icon name="tabler:brand-nodejs" />

     

       35
       +
                       <span> NodeJS </span>

     

       0
        
       
     

       0
        
       
     

       36
        
                   </div>

     

       37
       +
       

     

       38
        
                   <div class="container">

     

       39
       +
                       <Icon name="tabler:brand-github" />

     

       40
       +
                       <a

     

       41
       +
                           href="https://github.com/karr-mobi/karr"

     

       42
       +
                           class="cover"

     

       43
       +
                           target="_blank"

     

       44
       +
                           rel="noopener noreferrer"

     

       45
       +
                       >

     

       46
       +
                           Github repo

     

       47
       +
                           <Icon name="pixel:external-link" class="external-link" />

     

       48
        
                       </a>

     

       49
        
                   </div>

     

       50
        
               </div>

     

       51
       +
       

     

       52
       +
               <p class="description">

     

       53
       +
                   This entrepreneurial project was carried out for 5 months with

     

       54
       +
                   <a href="https://www.pepitebretagne.fr/"> Pépite Bretagne</a>. The

     

       55
       +
                   project was discontinued after a market study revealed a

     

       56
       +
                   well-established competition, already subsidized by public funds.

     

       57
       +
               </p>

     

       58
        
           </article>

     

       59
        
       </Layout>

+31 -19

src/pages/fr/projects/karr.astro

···

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

     

       23
        
               </p>

     

       24
        
       

     

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

     

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

     

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

     

       28
       -
               </picture>

     

       0
        
       
     

       29
        
       

     

       30
       -
               <p class="description">

     

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

     

       32
       -
                   <a href="https://www.pepitebretagne.fr/"> Pépite Bretagne</a>.

     

       33
       -
                   L'arrêt du projet a été décidé après une étude de marché révélant

     

       34
       -
                   une concurrence déjà fortement présente et subventionnée par des

     

       35
       -
                   fonds publics.

     

       36
       -
               </p>

     

       37
        
       

     

       38
       -
               <div class="boxes">

     

       39
        
                   <div class="container">

     

       40
       -
                       Github repo

     

       41
       -
                       <a href="https://github.com/karr-mobi/karr">

     

       42
       -
                           https://github.com/karr-mobi/karr

     

       43
       -
                       </a>

     

       44
        
                   </div>

     

       0
        
       
     

       45
        
                   <div class="container">

     

       46
       -
                       Github repo

     

       47
       -
                       <a href="https://github.com/karr-mobi/karr">

     

       48
       -
                           https://github.com/karr-mobi/karr

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       49
        
                       </a>

     

       50
        
                   </div>

     

       51
        
               </div>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       52
        
           </article>

     

       53
        
       </Layout>

···

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

     

       23
        
               </p>

     

       24
        
       

     

       25
       +
               <div class="boxes">

     

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

     

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

     

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

     

       29
       +
                   </picture>

     

       30
        
       

     

       31
       +
                   <div class="container">

     

       32
       +
                       <Icon name="tabler:brand-git" />

     

       33
       +
                       <span>

     

       34
       +
                           Depuis le {new Date("10 October 2024").toLocaleDateString()}

     

       35
       +
                       </span>

     

       36
       +
                   </div>

     

       0
        
       
     

       37
        
       

     

       0
        
       
     

       38
        
                   <div class="container">

     

       39
       +
                       <Icon name="tabler:brand-nodejs" />

     

       40
       +
                       <span> NodeJS </span>

     

       0
        
       
     

       0
        
       
     

       41
        
                   </div>

     

       42
       +
       

     

       43
        
                   <div class="container">

     

       44
       +
                       <Icon name="tabler:brand-github" />

     

       45
       +
                       <a

     

       46
       +
                           href="https://github.com/karr-mobi/karr"

     

       47
       +
                           class="cover"

     

       48
       +
                           target="_blank"

     

       49
       +
                           rel="noopener noreferrer"

     

       50
       +
                       >

     

       51
       +
                           Github repo

     

       52
       +
                           <Icon name="pixel:external-link" class="external-link" />

     

       53
        
                       </a>

     

       54
        
                   </div>

     

       55
        
               </div>

     

       56
       +
       

     

       57
       +
               <p class="description">

     

       58
       +
                   Ce projet entrepreneurial a été porté pendant 5 mois avec

     

       59
       +
                   <a href="https://www.pepitebretagne.fr/"> Pépite Bretagne</a>.

     

       60
       +
                   L'arrêt du projet a été décidé après une étude de marché révélant

     

       61
       +
                   une concurrence déjà fortement présente et subventionnée par des

     

       62
       +
                   fonds publics.

     

       63
       +
               </p>

     

       64
        
           </article>

     

       65
        
       </Layout>