commit 62e4c261e3c6250b5786d7f3d3487f23ebbbb77b · finxol.io/portfolio

+68 -6

src/assets/styles/index.css

···

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       1
        
       section.container {

     

       2
       -
           --container-color: var(--rose-400);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       3
        
       

     

       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
        
       
     

       4
        
           display: grid;

     

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

     

       6
        
           grid-template-areas:

     
···

       50
        
               display: flex;

     

       51
        
               flex-direction: column;

     

       52
        
               gap: var(--spacing);

     

       53
       -
           }

     

       54
       -
       

     

       55
       -
           p {

     

       56
       -
               margin: 0;

     

       57
       -
               font-size: 1.2rem;

     

       58
        
           }

     

       59
        
       }

···

       1
       +
       p {

     

       2
       +
           margin: 0;

     

       3
       +
           font-size: 1.2rem;

     

       4
       +
       }

     

       5
       +
       

     

       6
       +
       article {

     

       7
       +
           --spacing: 1.5rem;

     

       8
       +
       

     

       9
       +
           display: grid;

     

       10
       +
           grid-template-columns: repeat(2, 1fr);

     

       11
       +
           grid-template-areas:

     

       12
       +
               "content-intro content-intro"

     

       13
       +
               "content-languages content-blog"

     

       14
       +
               "content-projects content-projects";

     

       15
       +
           gap: var(--spacing);

     

       16
       +
       }

     

       17
       +
       

     

       18
        
       section.container {

     

       19
       +
           &.content-intro {

     

       20
       +
               --container-color: var(--rose-400);

     

       21
       +
               grid-area: content-intro;

     

       22
       +
           }

     

       23
       +
       

     

       24
       +
           &.content-languages {

     

       25
       +
               --container-color: var(--sky-400);

     

       26
        
       

     

       27
       +
               grid-area: content-languages;

     

       28
       +
               display: flex;

     

       29
       +
               align-items: center;

     

       30
       +
               justify-content: start;

     

       31
       +
               gap: 1rem;

     

       32
       +
       

     

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

     

       34
       +
                   flex-direction: column;

     

       35
       +
               }

     

       36
       +
           }

     

       37
       +
       

     

       38
       +
           &.content-blog {

     

       39
       +
               --container-color: var(--yellow-400);

     

       40
       +
       

     

       41
       +
               grid-area: content-blog;

     

       42
       +
       

     

       43
       +
               a {

     

       44
       +
                   display: flex;

     

       45
       +
                   align-items: center;

     

       46
       +
                   justify-content: start;

     

       47
       +
                   gap: 1rem;

     

       48
       +
                   text-decoration: none;

     

       49
       +
                   margin: 0;

     

       50
       +
                   font-size: 1.2rem;

     

       51
       +
       

     

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

     

       53
       +
                       flex-direction: column;

     

       54
       +
                   }

     

       55
       +
       

     

       56
       +
                   svg {

     

       57
       +
                       width: 1.5rem;

     

       58
       +
                       height: 1.5rem;

     

       59
       +
                   }

     

       60
       +
               }

     

       61
       +
           }

     

       62
       +
       

     

       63
       +
           &.content-projects {

     

       64
       +
               --container-color: var(--fuchsia-400);

     

       65
       +
       

     

       66
       +
               grid-area: content-projects;

     

       67
       +
           }

     

       68
       +
       }

     

       69
       +
       

     

       70
       +
       section.container.layout {

     

       71
        
           display: grid;

     

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

     

       73
        
           grid-template-areas:

     
···

       117
        
               display: flex;

     

       118
        
               flex-direction: column;

     

       119
        
               gap: var(--spacing);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       120
        
           }

     

       121
        
       }

+1 -3

src/layouts/Layout.astro

···

       255
        
           }

     

       256
        
       

     

       257
        
           main {

     

       0
        
       
     

       258
        
               padding: var(--spacing);

     

       259
        
               overflow-y: scroll;

     

       260
       -
               display: flex;

     

       261
       -
               flex-direction: column;

     

       262
       -
               gap: var(--spacing);

     

       263
        
           }

     

       264
        
       </style>

···

       255
        
           }

     

       256
        
       

     

       257
        
           main {

     

       258
       +
               container-type: inline-size;

     

       259
        
               padding: var(--spacing);

     

       260
        
               overflow-y: scroll;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       261
        
           }

     

       262
        
       </style>

+43 -31

src/pages/en/index.astro

···

       1
        
       ---

     

       0
        
       
     

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

     

       3
       -
       import Layout from "@/layouts/Layout.astro";

     

       4
        
       ---

     

       5
        
       

     

       6
        
       <Layout>

     

       7
       -
           <section class="container">

     

       8
       -
               <aside>👋</aside>

     

       9
       -
               <h3>Hiya!</h3>

     

       10
       -
               <p>I'm a computer science student 🇫🇷 French.</p>

     

       11
       -
               <div>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       12
        
                   <p>

     

       13
       -
                       I natively speak 🇬🇧 <strong> English </strong> and 🇫🇷 <strong>

     

       14
        
                           French

     

       15
       -
                       </strong>.

     

       16
       -
                   </p>

     

       17
       -
                   <p>

     

       18
       -
                       Some of my interests include:

     

       19
       -
                       <strong>

     

       20
       -
                           web development, infosec, cybersecurity and systems

     

       21
       -
                           administration.

     

       22
       -
                       </strong>

     

       23
        
                   </p>

     

       24
       -
               </div>

     

       25
       -
           </section>

     

       26
        
       

     

       27
       -
           <section class="container">

     

       28
       -
               <aside>💻</aside>

     

       29
       -
               <h3>Projets</h3>

     

       30
       -
               <div>

     

       31
       -
                   <p>

     

       32
       -
                       I'm currently working on Karr, a federated carpooling platform

     

       33
       -
                       for businesses. You can find my other most interesting projects

     

       34
       -
                       just next door. I regularly take part in CTFs and other

     

       35
       -
                       cybersecurity events & conferences. Feel free to use my contact

     

       36
       -
                       details if you wish to get in touch. I also love playing the

     

       37
       -
                       drums and all sorts of instruments.

     

       38
       -
                   </p>

     

       39
       -
               </div>

     

       40
       -
           </section>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       41
        
       </Layout>

···

       1
        
       ---

     

       2
       +
       import Layout from "@/layouts/Layout.astro";

     

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

     

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

     

       5
        
       ---

     

       6
        
       

     

       7
        
       <Layout>

     

       8
       +
           <article>

     

       9
       +
               <section class="container layout content-intro">

     

       10
       +
                   <aside>👋</aside>

     

       11
       +
                   <h3>Hiya!</h3>

     

       12
       +
                   <p>I'm a 🇫🇷 French computer science student.</p>

     

       13
       +
                   <div>

     

       14
       +
                       <p>I love building robust and performant websites.</p>

     

       15
       +
                   </div>

     

       16
       +
               </section>

     

       17
       +
       

     

       18
       +
               <section class="container content-languages">

     

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

     

       20
        
                   <p>

     

       21
       +
                       I'm a native 🇬🇧 <strong> English </strong> and 🇫🇷 <strong>

     

       22
        
                           French

     

       23
       +
                       </strong> speaker.

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       24
        
                   </p>

     

       25
       +
               </section>

     

       0
        
       
     

       26
        
       

     

       27
       +
               <section class="container content-blog">

     

       28
       +
                   <a

     

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

     

       30
       +
                       target="_blank"

     

       31
       +
                       rel="noopener noreferrer"

     

       32
       +
                   >

     

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

     

       34
       +
                       <span> Check out my blog for some technical write-ups! </span>

     

       35
       +
                   </a>

     

       36
       +
               </section>

     

       37
       +
       

     

       38
       +
               <section class="container layout content-projects">

     

       39
       +
                   <aside>💻</aside>

     

       40
       +
                   <h3>Projets</h3>

     

       41
       +
                   <div>

     

       42
       +
                       <p>

     

       43
       +
                           I'm currently working on Karr, a federated carpooling

     

       44
       +
                           platform for businesses. You can find my other most

     

       45
       +
                           interesting projects just next door. I regularly take part

     

       46
       +
                           in CTFs and other cybersecurity events & conferences. Feel

     

       47
       +
                           free to use my contact details if you wish to get in touch.

     

       48
       +
                           I also love playing the drums and all sorts of instruments.

     

       49
       +
                       </p>

     

       50
       +
                   </div>

     

       51
       +
               </section>

     

       52
       +
           </article>

     

       53
        
       </Layout>

+44 -32

src/pages/fr/index.astro

···

       1
        
       ---

     

       0
        
       
     

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

     

       3
       -
       import Layout from "@/layouts/Layout.astro";

     

       4
        
       ---

     

       5
        
       

     

       6
        
       <Layout>

     

       7
       -
           <section class="container">

     

       8
       -
               <aside>👋</aside>

     

       9
       -
               <h3>Bonjour!</h3>

     

       10
       -
               <p>Je suis un étudiant en informatique 🇫🇷 Français.</p>

     

       11
       -
               <div>

     

       12
       -
                   <p>

     

       13
       -
                       Je parle nativement 🇬🇧 <strong> Anglais </strong> et 🇫🇷 <strong>

     

       14
       -
                           Français

     

       15
       -
                       </strong>.

     

       16
       -
                   </p>

     

       17
       -
                   <p>

     

       18
       -
                       Some of my interests include:

     

       19
       -
                       <strong>

     

       20
       -
                           web development, infosec, cybersecurity and systems

     

       21
       -
                           administration.

     

       22
       -
                       </strong>

     

       23
       -
                   </p>

     

       24
       -
               </div>

     

       25
       -
           </section>

     

       26
        
       

     

       27
       -
           <section class="container">

     

       28
       -
               <aside>💻</aside>

     

       29
       -
               <h3>Projets</h3>

     

       30
       -
               <div>

     

       31
        
                   <p>

     

       32
       -
                       I'm currently working on Karr, a federated carpooling platform

     

       33
       -
                       for businesses. You can find my other most interesting projects

     

       34
       -
                       just next door. I regularly take part in CTFs and other

     

       35
       -
                       cybersecurity events & conferences. Feel free to use my contact

     

       36
       -
                       details if you wish to get in touch. I also love playing the

     

       37
       -
                       drums and all sorts of instruments.

     

       38
        
                   </p>

     

       39
       -
               </div>

     

       40
       -
           </section>

     

       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
        
       
     

       41
        
       </Layout>

···

       1
        
       ---

     

       2
       +
       import Layout from "@/layouts/Layout.astro";

     

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

     

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

     

       5
        
       ---

     

       6
        
       

     

       7
        
       <Layout>

     

       8
       +
           <article>

     

       9
       +
               <section class="container layout content-intro">

     

       10
       +
                   <aside>👋</aside>

     

       11
       +
                   <h3>Bonjour!</h3>

     

       12
       +
                   <p>Je suis un étudiant en informatique 🇫🇷 Français.</p>

     

       13
       +
                   <div>

     

       14
       +
                       <p>J'adore construire des sites web robustes et performants.</p>

     

       15
       +
                   </div>

     

       16
       +
               </section>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       17
        
       

     

       18
       +
               <section class="container content-languages">

     

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

     

       0
        
       
     

       0
        
       
     

       20
        
                   <p>

     

       21
       +
                       Je suis natif en 🇬🇧 <strong>Anglais</strong> et 🇫🇷 <strong

     

       22
       +
                           >Français</strong

     

       23
       +
                       >.

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       24
        
                   </p>

     

       25
       +
               </section>

     

       26
       +
       

     

       27
       +
               <section class="container content-blog">

     

       28
       +
                   <a

     

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

     

       30
       +
                       target="_blank"

     

       31
       +
                       rel="noopener noreferrer"

     

       32
       +
                   >

     

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

     

       34
       +
                       <span> Voir mon blog pour des articles techniques ! </span>

     

       35
       +
                   </a>

     

       36
       +
               </section>

     

       37
       +
       

     

       38
       +
               <section class="container layout content-projects">

     

       39
       +
                   <aside>💻</aside>

     

       40
       +
                   <h3>Projets</h3>

     

       41
       +
                   <div>

     

       42
       +
                       <p>

     

       43
       +
                           I'm currently working on Karr, a federated carpooling

     

       44
       +
                           platform for businesses. You can find my other most

     

       45
       +
                           interesting projects just next door. I regularly take part

     

       46
       +
                           in CTFs and other cybersecurity events & conferences. Feel

     

       47
       +
                           free to use my contact details if you wish to get in touch.

     

       48
       +
                           I also love playing the drums and all sorts of instruments.

     

       49
       +
                       </p>

     

       50
       +
                   </div>

     

       51
       +
               </section>

     

       52
       +
           </article>

     

       53
        
       </Layout>