<script setup lang="ts">
import TableHeader from '~/components/parts/TableHeader.vue';
import api from '~/composables/api'
const { get, post } = api();

onMounted(async () => {
  try {
    console.log("Getting")
    const response = await get('/test');
    console.log('API Response:', response);
  } catch (error) {
    console.error('API Error:', error);
  }
});
</script>

<template>
    <TableHeader></TableHeader>

    <Container>
    <h2>About</h2>
        <p>
            I'm Aran. Welcome to my website! It will always remain under development.
      </p>
      <p>
        I am a Mathematician and Software Engineer from Barcelona. I'm currently working as a full-stack dev at <a href="https://codelearn.cat">Codelearn</a> while
        also studying on the master's degree in <i>Machine Learning and Cybersecurity for Internet-Connected Systems</i> at <a href="https://upc.edu">UPC</a>
      </p>
      <p>
      Besides all of that, I also like drawing, board games and self-hosting
  </p> 
      <p>You can download my resume <a href="https://cv.aranroig.com">here</a></p>
    <h2>Contact</h2>
        <ul>
            <li>Mail: <a href="mailto:aranseraroig@gmail.com">aranseraroig@gmail.com</a> (Still pending to host my email)</li>
            <li>Gitea: <a href="https://git.aranroig.com/Syndria98">git.aranroig.com</a> (My self-hosted git server)</li>
            <li>GitHub: <a href="https://github.com/BinarySandia04">BinarySandia04</a></li>
            <li>LinkedIn: <a href="https://www.linkedin.com/in/aran-roig/">aran-roig</a></li>
            <li>Instagram: <a href="https://www.instagram.com/aran.roig/">aran.roig</a> (Some of my drawings are there)</li>
        </ul>
    </Container>
    <Footer></Footer>

    <!--
    <div class="two-columns">
        <Container style="flex-basis: 70%">
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
        </Container>
        <Container style="flex-basis: 30%">
            Test Lorem ipsum
        </Container>
    </div>
    <div class="two-columns">
        <Container style="flex-basis: 70%">
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
        </Container>
        <Container style="flex-basis: 30%">
            Test Lorem ipsum
        </Container>
    </div>
    <div class="two-columns">
        <Container style="flex-basis: 70%">
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
            Test Lorem ipsum dolor sit amet idk doctor professor idk djdaksjdkasj dmsakjdkj blablabla
        </Container>
        <Container style="flex-basis: 30%">
            Test Lorem ipsum
        </Container>
    </div>
    -->
</template>

<style lang="scss" scoped>
h2 {
    margin-left: 20px;
}

p {
    margin-left: 30px;
}

.two-columns {
    display: flex;
    width: 100%;
}
</style>