commit 6f7a7cede70a4d9b7bd63c23b47b3a38f2f3d6c2 · finxol.io/portfolio

+75 -69
src/layouts/Layout.astro
···

       26
       26
        
               <title>Colin Ozanne</title>

     

       27
       27
        
           </head>

     

       28
       28
        
           <body>

     

       29
       29
       -
               <header>

     

       30
       30
       -
                   <picture class="container">

     

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

     

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

     

       33
       33
       -
                   </picture>

     

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

     

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

     

       36
       36
       -
               </header>

     

       37
       37
       -
               <main class="">

     

       38
       38
       -
                   <slot />

     

       39
       39
       -
               </main>

     

       40
       40
       -
               <footer>

     

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

     

       29
       29
       +
               <aside>

     

       30
       30
       +
                   <header>

     

       31
       31
       +
                       <picture class="container">

     

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

     

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

     

       34
       34
       +
                       </picture>

     

       35
       35
       +
                       <h1 class="container">

     

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

     

       37
       37
       +
                       </h1>

     

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

     

       39
       39
       +
                   </header>

     

       40
       40
       +
                   <footer>

     

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

     

       42
       42
       +
                           <a

     

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

     

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

     

       45
       45
       +
                               target="_self"

     

       46
       46
       +
                           >

     

       47
       47
       +
                               EN

     

       48
       48
       +
                           </a>

     

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

     

       50
       50
       +
                           <a

     

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

     

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

     

       53
       53
       +
                               target="_self"

     

       54
       54
       +
                           >

     

       55
       55
       +
                               FR

     

       56
       56
       +
                           </a>

     

       57
       57
       +
                       </div>

     

       58
       58
       +
       

     

       42
       59
        
                       <a

     

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

     

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

     

       45
       45
       -
                           target="_self"

     

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

     

       61
       61
       +
                           target="_blank"

     

       62
       62
       +
                           rel="noopener noreferrer"

     

       63
       63
       +
                           class="container"

     

       46
       64
        
                       >

     

       47
       47
       -
                           EN

     

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

     

       66
       66
       +
                           <span> Email </span>

     

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

     

       48
       68
        
                       </a>

     

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

     

       50
       69
        
                       <a

     

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

     

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

     

       53
       53
       -
                           target="_self"

     

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

     

       71
       71
       +
                           target="_blank"

     

       72
       72
       +
                           rel="noopener noreferrer"

     

       73
       73
       +
                           class="container"

     

       54
       74
        
                       >

     

       55
       55
       -
                           FR

     

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

     

       76
       76
       +
                           <span> Linkedin </span>

     

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

     

       56
       78
        
                       </a>

     

       57
       57
       -
                   </div>

     

       58
       58
       -
       

     

       59
       59
       -
                   <a

     

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

     

       61
       61
       -
                       target="_blank"

     

       62
       62
       -
                       rel="noopener noreferrer"

     

       63
       63
       -
                       class="container"

     

       64
       64
       -
                   >

     

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

     

       66
       66
       -
                       <span> Email </span>

     

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

     

       68
       68
       -
                   </a>

     

       69
       69
       -
                   <a

     

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

     

       71
       71
       -
                       target="_blank"

     

       72
       72
       -
                       rel="noopener noreferrer"

     

       73
       73
       -
                       class="container"

     

       74
       74
       -
                   >

     

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

     

       76
       76
       -
                       <span> Linkedin </span>

     

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

     

       78
       78
       -
                   </a>

     

       79
       79
       -
                   <a

     

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

     

       81
       81
       -
                       target="_blank"

     

       82
       82
       -
                       rel="noopener noreferrer"

     

       83
       83
       -
                       class="container"

     

       84
       84
       -
                   >

     

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

     

       86
       86
       -
                       <span> Blog </span>

     

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

     

       88
       88
       -
                   </a>

     

       89
       89
       -
                   <p class="container">

     

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

     

       91
       91
       -
                   </p>

     

       92
       92
       -
               </footer>

     

       79
       79
       +
                       <a

     

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

     

       81
       81
       +
                           target="_blank"

     

       82
       82
       +
                           rel="noopener noreferrer"

     

       83
       83
       +
                           class="container"

     

       84
       84
       +
                       >

     

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

     

       86
       86
       +
                           <span> Blog </span>

     

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

     

       88
       88
       +
                       </a>

     

       89
       89
       +
                       <p class="container">

     

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

     

       91
       91
       +
                       </p>

     

       92
       92
       +
                   </footer>

     

       93
       93
       +
               </aside>

     

       94
       94
       +
               <main class="">

     

       95
       95
       +
                   <slot />

     

       96
       96
       +
               </main>

     

       93
       97
        
           </body>

     

       94
       98
        
       </html>

     

       95
       99
        
       

     
···

       97
       101
        
           body {

     

       98
       102
        
               width: 100%;

     

       99
       103
        
               display: grid;

     

       100
       100
       -
               height: 100svh;

     

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

     

       102
       105
        
               grid-template-rows: 1fr auto;

     

       103
       106
        
               grid-auto-flow: row;

     

       104
       104
       -
               grid-template-areas:

     

       105
       105
       -
                   "header main"

     

       106
       106
       -
                   "footer main";

     

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

     

       107
       108
        
               gap: 0;

     

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

     

       109
       110
        
       

     

       110
       110
       -
               header {

     

       111
       111
       -
                   grid-area: header;

     

       112
       112
       -
               }

     

       113
       113
       -
       

     

       114
       114
       -
               footer {

     

       115
       115
       -
                   grid-area: footer;

     

       111
       111
       +
               & > aside {

     

       112
       112
       +
                   position: sticky;

     

       113
       113
       +
                   top: 0;

     

       114
       114
       +
                   bottom: 0;

     

       115
       115
       +
                   grid-area: aside;

     

       116
       116
       +
                   display: flex;

     

       117
       117
       +
                   flex-direction: column;

     

       118
       118
       +
                   align-items: center;

     

       119
       119
       +
                   justify-content: space-between;

     

       120
       120
       +
                   height: max-content;

     

       121
       121
       +
                   min-height: 100svh;

     

       116
       122
        
               }

     

       117
       123
        
       

     

       118
       118
       -
               main {

     

       124
       124
       +
               & > main {

     

       119
       125
        
                   grid-area: main;

     

       120
       126
        
               }

     

       121
       127