<template>
    <div class="lg:mt-12 mt-7 m-auto w-fit sm:flex-row flex-col flex">
        <img class="md:w-[400px] md:h-[400px] xl:self-auto xl:ml-0 md:ml-4 self-center w-[80%] h-auto rounded-full" 
             src="~/assets/img/photo_web.JPG"/>
        <div class="xl:ml-[90px] ml-0 flex flex-col xl:items-end md:m-auto items-center">
            <h1 class="lg:text-8xl text-5xl mt-2 mb-2 xl:text-right text-center">
                Valentin Haudiquet
            </h1>
            <h4 class="lg:text-4xl text-3xl mt-2 mb-2 xl:text-right text-center">
                Software Engineer at Canonical - Ubuntu
            </h4>
            <p class="lg:text-4xl text-2xl sm:mr-[-3px] sm:ml-0 mr-1 ml-1 max-w-[770px] font-extralight xl:text-right text-center" id="header-paragraph">
                Working on Ubuntu support for RISC-V architecture
            </p>
        </div>
    </div>
</template>
