commit f19fc912223b0eb8774e1e4a2d1d56f5dccb8857 · finxol.io/portfolio

+4 -5

astro.config.mjs

···

       1
        
       // @ts-check

     

       2
        
       import { defineConfig } from "astro/config";

     

       3
        
       import deno from "@deno/astro-adapter";

     

       0
        
       
     

       4
        
       import icon from "astro-icon";

     

       0
        
       
     

       5
        
       

     

       6
        
       // https://astro.build/config

     

       7
        
       export default defineConfig({

     

       8
        
           site: "https://staging.colinozanne.fr",

     

       9
        
           output: "server",

     

       10
        
           adapter: deno(),

     

       11
       -
           integrations: [icon()],

     

       12
        
           i18n: {

     

       13
        
               locales: ["en", "fr"],

     

       14
        
               defaultLocale: "fr",

     

       15
        
               routing: {

     

       16
        
                   prefixDefaultLocale: false,

     

       17
        
               },

     

       18
       -
               domains: {

     

       19
       -
                   fr: "https://staging.colinozanne.fr",

     

       20
       -
                   en: "https://staging.colinozanne.co.uk",

     

       21
       -
               },

     

       22
        
           },

     

       23
        
       });

···

       1
        
       // @ts-check

     

       2
        
       import { defineConfig } from "astro/config";

     

       3
        
       import deno from "@deno/astro-adapter";

     

       4
       +
       import preact from "@astrojs/preact";

     

       5
        
       import icon from "astro-icon";

     

       6
       +
       import { config } from "./src/config.ts";

     

       7
        
       

     

       8
        
       // https://astro.build/config

     

       9
        
       export default defineConfig({

     

       10
        
           site: "https://staging.colinozanne.fr",

     

       11
        
           output: "server",

     

       12
        
           adapter: deno(),

     

       13
       +
           integrations: [preact(), icon()],

     

       14
        
           i18n: {

     

       15
        
               locales: ["en", "fr"],

     

       16
        
               defaultLocale: "fr",

     

       17
        
               routing: {

     

       18
        
                   prefixDefaultLocale: false,

     

       19
        
               },

     

       20
       +
               domains: config.domains,

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       21
        
           },

     

       22
        
       });

src/config.ts

···

       1
       +
       export const config = {

     

       2
       +
         domains: {

     

       3
       +
           fr: "https://staging.colinozanne.fr",

     

       4
       +
           en: "https://staging.colinozanne.co.uk",

     

       5
       +
         },

     

       6
       +
       } as const;

+68 -23

src/layouts/Layout.astro

···

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

     

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

     

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

     

       0
        
       
     

       5
        
       

     

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

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       8
        
       ---

     

       9
        
       

     

       10
        
       <!doctype html>

     
···

       18
        
           </head>

     

       19
        
           <body>

     

       20
        
               <header>

     

       21
       -
                   <picture>

     

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

     

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

     

       24
        
                   </picture>

     

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

     

       26
       -
                   <p>Étudiant M1 Informatique</p>

     

       27
        
               </header>

     

       28
       -
               <main class="content-grid">

     

       29
        
                   <slot />

     

       30
        
               </main>

     

       31
        
               <footer>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       32
        
                   <a

     

       33
        
                       href="https://bsky.app/profile/did:plc:hpmpe3pzpdtxbmvhlwrevhju"

     

       34
        
                       target="_blank"

     

       35
        
                       rel="noopener noreferrer"

     

       0
        
       
     

       36
        
                   >

     

       37
        
                       <Icon name="pixel:bluesky" />

     

       38
        
                       <span> Bluesky </span>

     
···

       42
        
                       href="mailto:contact@colinozanne.fr"

     

       43
        
                       target="_blank"

     

       44
        
                       rel="noopener noreferrer"

     

       0
        
       
     

       45
        
                   >

     

       46
        
                       <Icon name="pixel:envelope" />

     

       47
        
                       <span> Email </span>

     

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

     

       49
        
                   </a>

     

       50
       -
                   <p>&copy; {new Date().getFullYear()} Colin Ozanne</p>

     

       0
        
       
     

       0
        
       
     

       51
        
               </footer>

     

       52
        
           </body>

     

       53
        
       </html>

     
···

       64
        
                   "header main"

     

       65
        
                   "footer main";

     

       66
        
               gap: 0;

     

       67
       -
               font-family: sans-serif;

     

       68
        
       

     

       69
        
               header {

     

       70
        
                   grid-area: header;

     
···

       86
        
                       "main"

     

       87
        
                       "footer";

     

       88
        
                   gap: 0;

     

       0
        
       
     

       0
        
       
     

       89
        
               }

     

       90
        
           }

     

       91
        
       

     
···

       115
        
                   font-size: 15cqi;

     

       116
        
                   color: var(--clr-dark-a0);

     

       117
        
                   margin: 0;

     

       118
       -
                   --aside-elem-color: var(--fuchsia-500);

     

       119
       -
                   --aside-elem-text-color: var(--fuchsia-950);

     

       120
        
       

     

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

     

       122
        
                       font-size: 2rem;

     
···

       125
        
       

     

       126
        
               p {

     

       127
        
                   margin: 0;

     

       128
       -
                   --aside-elem-color: var(--rose-500);

     

       129
       -
                   --aside-elem-text-color: var(--rose-950);

     

       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
        
       
     

       130
        
               }

     

       131
        
       

     

       132
        
               a {

     
···

       134
        
                   align-items: center;

     

       135
        
                   justify-content: center;

     

       136
        
                   gap: 0.5rem;

     

       137
       -
                   color: var(--black-500);

     

       138
        
                   text-decoration: none;

     

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

     

       140
       -
                   --aside-elem-color: var(--amber-500);

     

       141
       -
                   --aside-elem-text-color: var(--amber-950);

     

       142
       -
       

     

       143
       -
                   &:hover {

     

       144
       -
                       color: var(--clr-dark-a1);

     

       145
       -
                   }

     

       146
        
       

     

       147
        
                   svg {

     

       148
        
                       --size: 1.5rem;

     
···

       154
        
               }

     

       155
        
       

     

       156
        
               & > * {

     

       157
       -
                   padding: var(--spacing);

     

       158
       -
                   width: calc(100% - 2rem * var(--spacing));

     

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

     

       160
        
                   text-align: center;

     

       161
       -
                   color: var(--aside-elem-text-color, var(--emerald-950, black));

     

       162
       -
                   background-color: var(--aside-elem-color, var(--emerald-500, red));

     

       163
        
                   font-family: "Spagetty", serif;

     

       164
        
                   letter-spacing: 0.01em;

     

       165
        
                   font-size: 1.2rem;

     
···

       200
        
           }

     

       201
        
       

     

       202
        
           main {

     

       203
       -
               border-left: 10px solid black;

     

       204
        
               overflow-y: scroll;

     

       205
        
           }

     

       206
        
       </style>

···

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

     

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

     

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

     

       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;

     

       12
        
       ---

     

       13
        
       

     

       14
        
       <!doctype html>

     
···

       22
        
           </head>

     

       23
        
           <body>

     

       24
        
               <header>

     

       25
       +
                   <picture class="container">

     

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

     

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

     

       28
        
                   </picture>

     

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

     

       30
       +
                   <p class="container">Étudiant M1 Informatique</p>

     

       31
        
               </header>

     

       32
       +
               <main class="">

     

       33
        
                   <slot />

     

       34
        
               </main>

     

       35
        
               <footer>

     

       36
       +
                   <div class="container lang-switcher">

     

       37
       +
                       <a

     

       38
       +
                           class={locale === "en" ? "active" : ""}

     

       39
       +
                           href={`${config.domains.en}${path}`}

     

       40
       +
                           target="_self"

     

       41
       +
                       >

     

       42
       +
                           EN

     

       43
       +
                       </a>

     

       44
       +
                       <Icon name="pixel:globe" />

     

       45
       +
                       <a

     

       46
       +
                           class={locale === "fr" ? "active" : ""}

     

       47
       +
                           href={`${config.domains.fr}${path}`}

     

       48
       +
                           target="_self"

     

       49
       +
                       >

     

       50
       +
                           FR

     

       51
       +
                       </a>

     

       52
       +
                   </div>

     

       53
       +
       

     

       54
        
                   <a

     

       55
        
                       href="https://bsky.app/profile/did:plc:hpmpe3pzpdtxbmvhlwrevhju"

     

       56
        
                       target="_blank"

     

       57
        
                       rel="noopener noreferrer"

     

       58
       +
                       class="container"

     

       59
        
                   >

     

       60
        
                       <Icon name="pixel:bluesky" />

     

       61
        
                       <span> Bluesky </span>

     
···

       65
        
                       href="mailto:contact@colinozanne.fr"

     

       66
        
                       target="_blank"

     

       67
        
                       rel="noopener noreferrer"

     

       68
       +
                       class="container"

     

       69
        
                   >

     

       70
        
                       <Icon name="pixel:envelope" />

     

       71
        
                       <span> Email </span>

     

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

     

       73
        
                   </a>

     

       74
       +
                   <p class="container">

     

       75
       +
                       &copy; {new Date().getFullYear()} Colin Ozanne

     

       76
       +
                   </p>

     

       77
        
               </footer>

     

       78
        
           </body>

     

       79
        
       </html>

     
···

       90
        
                   "header main"

     

       91
        
                   "footer main";

     

       92
        
               gap: 0;

     

       93
       +
               font-family: "Scorekard", sans-serif;

     

       94
        
       

     

       95
        
               header {

     

       96
        
                   grid-area: header;

     
···

       112
        
                       "main"

     

       113
        
                       "footer";

     

       114
        
                   gap: 0;

     

       115
       +
                   height: auto;

     

       116
       +
                   min-height: 100svh;

     

       117
        
               }

     

       118
        
           }

     

       119
        
       

     
···

       143
        
                   font-size: 15cqi;

     

       144
        
                   color: var(--clr-dark-a0);

     

       145
        
                   margin: 0;

     

       146
       +
                   --container-color: var(--fuchsia-500);

     

       147
       +
                   --container-text-color: var(--fuchsia-950);

     

       148
        
       

     

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

     

       150
        
                       font-size: 2rem;

     
···

       153
        
       

     

       154
        
               p {

     

       155
        
                   margin: 0;

     

       156
       +
                   --container-color: var(--sky-500);

     

       157
       +
                   --container-text-color: var(--sky-950);

     

       158
       +
               }

     

       159
       +
       

     

       160
       +
               .lang-switcher {

     

       161
       +
                   display: flex;

     

       162
       +
                   align-items: center;

     

       163
       +
                   justify-content: center;

     

       164
       +
                   gap: 1rem;

     

       165
       +
       

     

       166
       +
                   --container-color: var(--fuchsia-100);

     

       167
       +
                   --container-text-color: var(--fuchsia-800);

     

       168
       +
       

     

       169
       +
                   a {

     

       170
       +
                       padding: 0.5rem 1rem;

     

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

     

       172
       +
                       background-color: var(--fuchsia-200);

     

       173
       +
                       color: inherit;

     

       174
       +
                       transition: background-color 0.2s ease-in-out;

     

       175
       +
       

     

       176
       +
                       &:hover {

     

       177
       +
                           background-color: var(--fuchsia-300);

     

       178
       +
                       }

     

       179
       +
       

     

       180
       +
                       &.active {

     

       181
       +
                           background-color: var(--fuchsia-400);

     

       182
       +
                           --container-text-color: var(--fuchsia-950);

     

       183
       +
                       }

     

       184
       +
                   }

     

       185
        
               }

     

       186
        
       

     

       187
        
               a {

     
···

       189
        
                   align-items: center;

     

       190
        
                   justify-content: center;

     

       191
        
                   gap: 0.5rem;

     

       0
        
       
     

       192
        
                   text-decoration: none;

     

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

     

       194
       +
                   --container-color: var(--amber-500);

     

       195
       +
                   --container-text-color: var(--amber-950);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       196
        
       

     

       197
        
                   svg {

     

       198
        
                       --size: 1.5rem;

     
···

       204
        
               }

     

       205
        
       

     

       206
        
               & > * {

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       207
        
                   text-align: center;

     

       0
        
       
     

       0
        
       
     

       208
        
                   font-family: "Spagetty", serif;

     

       209
        
                   letter-spacing: 0.01em;

     

       210
        
                   font-size: 1.2rem;

     
···

       245
        
           }

     

       246
        
       

     

       247
        
           main {

     

       248
       +
               padding: var(--spacing);

     

       249
        
               overflow-y: scroll;

     

       250
        
           }

     

       251
        
       </style>