commit 6f7a7cede70a4d9b7bd63c23b47b3a38f2f3d6c2 · finxol.io/portfolio

+75 -69

src/layouts/Layout.astro

···

       26
        
               <title>Colin Ozanne</title>

     

       27
        
           </head>

     

       28
        
           <body>

     

       29
       -
               <header>

     

       30
       -
                   <picture class="container">

     

       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>

     

       37
       -
               <main class="">

     

       38
       -
                   <slot />

     

       39
       -
               </main>

     

       40
       -
               <footer>

     

       41
       -
                   <div class="container lang-switcher">

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       42
        
                       <a

     

       43
       -
                           class={locale === "en" ? "active" : ""}

     

       44
       -
                           href={`${config.domains.en}${path}`}

     

       45
       -
                           target="_self"

     

       0
        
       
     

       46
        
                       >

     

       47
       -
                           EN

     

       0
        
       
     

       0
        
       
     

       48
        
                       </a>

     

       49
       -
                       <Icon name="pixel:globe" />

     

       50
        
                       <a

     

       51
       -
                           class={locale === "fr" ? "active" : ""}

     

       52
       -
                           href={`${config.domains.fr}${path}`}

     

       53
       -
                           target="_self"

     

       0
        
       
     

       54
        
                       >

     

       55
       -
                           FR

     

       0
        
       
     

       0
        
       
     

       56
        
                       </a>

     

       57
       -
                   </div>

     

       58
       -
       

     

       59
       -
                   <a

     

       60
       -
                       href="mailto:contact@colinozanne.fr"

     

       61
       -
                       target="_blank"

     

       62
       -
                       rel="noopener noreferrer"

     

       63
       -
                       class="container"

     

       64
       -
                   >

     

       65
       -
                       <Icon name="pixel:envelope" />

     

       66
       -
                       <span> Email </span>

     

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

     

       68
       -
                   </a>

     

       69
       -
                   <a

     

       70
       -
                       href="https://www.linkedin.com/in/colin-ozanne/"

     

       71
       -
                       target="_blank"

     

       72
       -
                       rel="noopener noreferrer"

     

       73
       -
                       class="container"

     

       74
       -
                   >

     

       75
       -
                       <Icon name="pixel:linkedin" />

     

       76
       -
                       <span> Linkedin </span>

     

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

     

       78
       -
                   </a>

     

       79
       -
                   <a

     

       80
       -
                       href="https://finxol.io"

     

       81
       -
                       target="_blank"

     

       82
       -
                       rel="noopener noreferrer"

     

       83
       -
                       class="container"

     

       84
       -
                   >

     

       85
       -
                       <Icon name="pixel:pen-nib" />

     

       86
       -
                       <span> Blog </span>

     

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

     

       88
       -
                   </a>

     

       89
       -
                   <p class="container">

     

       90
       -
                       &copy; {new Date().getFullYear()} Colin Ozanne

     

       91
       -
                   </p>

     

       92
       -
               </footer>

     

       93
        
           </body>

     

       94
        
       </html>

     

       95
        
       

     
···

       97
        
           body {

     

       98
        
               width: 100%;

     

       99
        
               display: grid;

     

       100
       -
               height: 100svh;

     

       101
        
               grid-template-columns: clamp(15rem, 20vw, 30rem) auto;

     

       102
        
               grid-template-rows: 1fr auto;

     

       103
        
               grid-auto-flow: row;

     

       104
       -
               grid-template-areas:

     

       105
       -
                   "header main"

     

       106
       -
                   "footer main";

     

       107
        
               gap: 0;

     

       108
        
               font-family: "Scorekard", sans-serif;

     

       109
        
       

     

       110
       -
               header {

     

       111
       -
                   grid-area: header;

     

       112
       -
               }

     

       113
       -
       

     

       114
       -
               footer {

     

       115
       -
                   grid-area: footer;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       116
        
               }

     

       117
        
       

     

       118
       -
               main {

     

       119
        
                   grid-area: main;

     

       120
        
               }

     

       121

···

       26
        
               <title>Colin Ozanne</title>

     

       27
        
           </head>

     

       28
        
           <body>

     

       29
       +
               <aside>

     

       30
       +
                   <header>

     

       31
       +
                       <picture class="container">

     

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

     

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

     

       34
       +
                       </picture>

     

       35
       +
                       <h1 class="container">

     

       36
       +
                           Colin <br class="desktop-only" /> Ozanne

     

       37
       +
                       </h1>

     

       38
       +
                       <p class="container">{subtitle}</p>

     

       39
       +
                   </header>

     

       40
       +
                   <footer>

     

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

     

       42
       +
                           <a

     

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

     

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

     

       45
       +
                               target="_self"

     

       46
       +
                           >

     

       47
       +
                               EN

     

       48
       +
                           </a>

     

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

     

       50
       +
                           <a

     

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

     

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

     

       53
       +
                               target="_self"

     

       54
       +
                           >

     

       55
       +
                               FR

     

       56
       +
                           </a>

     

       57
       +
                       </div>

     

       58
       +
       

     

       59
        
                       <a

     

       60
       +
                           href="mailto:contact@colinozanne.fr"

     

       61
       +
                           target="_blank"

     

       62
       +
                           rel="noopener noreferrer"

     

       63
       +
                           class="container"

     

       64
        
                       >

     

       65
       +
                           <Icon name="pixel:envelope" />

     

       66
       +
                           <span> Email </span>

     

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

     

       68
        
                       </a>

     

       0
        
       
     

       69
        
                       <a

     

       70
       +
                           href="https://www.linkedin.com/in/colin-ozanne/"

     

       71
       +
                           target="_blank"

     

       72
       +
                           rel="noopener noreferrer"

     

       73
       +
                           class="container"

     

       74
        
                       >

     

       75
       +
                           <Icon name="pixel:linkedin" />

     

       76
       +
                           <span> Linkedin </span>

     

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

     

       78
        
                       </a>

     

       79
       +
                       <a

     

       80
       +
                           href="https://finxol.io"

     

       81
       +
                           target="_blank"

     

       82
       +
                           rel="noopener noreferrer"

     

       83
       +
                           class="container"

     

       84
       +
                       >

     

       85
       +
                           <Icon name="pixel:pen-nib" />

     

       86
       +
                           <span> Blog </span>

     

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

     

       88
       +
                       </a>

     

       89
       +
                       <p class="container">

     

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

     

       91
       +
                       </p>

     

       92
       +
                   </footer>

     

       93
       +
               </aside>

     

       94
       +
               <main class="">

     

       95
       +
                   <slot />

     

       96
       +
               </main>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       97
        
           </body>

     

       98
        
       </html>

     

       99
        
       

     
···

       101
        
           body {

     

       102
        
               width: 100%;

     

       103
        
               display: grid;

     

       0
        
       
     

       104
        
               grid-template-columns: clamp(15rem, 20vw, 30rem) auto;

     

       105
        
               grid-template-rows: 1fr auto;

     

       106
        
               grid-auto-flow: row;

     

       107
       +
               grid-template-areas: "aside main";

     

       0
        
       
     

       0
        
       
     

       108
        
               gap: 0;

     

       109
        
               font-family: "Scorekard", sans-serif;

     

       110
        
       

     

       111
       +
               & > aside {

     

       112
       +
                   position: sticky;

     

       113
       +
                   top: 0;

     

       114
       +
                   bottom: 0;

     

       115
       +
                   grid-area: aside;

     

       116
       +
                   display: flex;

     

       117
       +
                   flex-direction: column;

     

       118
       +
                   align-items: center;

     

       119
       +
                   justify-content: space-between;

     

       120
       +
                   height: max-content;

     

       121
       +
                   min-height: 100svh;

     

       122
        
               }

     

       123
        
       

     

       124
       +
               & > main {

     

       125
        
                   grid-area: main;

     

       126
        
               }

     

       127