<script setup lang="ts">
import ButtonLink from "~/components/ButtonLink.vue";

const img = ref('/face.jpg')
</script>

<template>
    <div class="flex flex-col gap-2 items-center justify-center w-full">
        <div class="avatar">
            <div class="mask mask-squircle">
                <NuxtImg :src="img" width="512" height="512"/>
            </div>
        </div>

        <h1 class="text-7xl pt-10 leading-[2]">👋 Hi, I'm Alex</h1>
        <div class="flex flex-row gap-2">
            <ButtonLink to="https://github.com/Minimata" text="Github" icon="uil:github" color="btn-neutral"/>
            <ButtonLink to="https://bsky.app/profile/game-dev.space" text="Bluesky" icon="ri:bluesky-fill" color="btn-info" />
            <ButtonLink to="https://discordapp.com/users/minimata/" text="Discord" icon="ri:discord-fill" color="btn-primary" />
            <ButtonLink to="https://www.linkedin.com/in/serexalexandre/" text="LinkedIn" icon="ri:linkedin-box-fill" color="btn-secondary" />
        </div>

        <span class="pt-2 text-3xl flex flex-row items-center justify-center leading-[2] italic">
            ⭐I code
            <span class="text-rotate px-2">
                <span class="justify-items-center">
                    <span><span class="not-italic">🎮</span>Game</span>
                    <span><span class="not-italic">🌎</span>Web</span>
                    <span><span class="not-italic">🐍</span>Python</span>
                    <span><span class="not-italic">⌨️</span>DevOps</span>
                    <span><span class="not-italic">⛏️</span>Tools</span>
                    <span><span class="not-italic">💻</span>Qt</span>
                </span>
            </span>
            <span>stuff⭐</span>
        </span>

        <div class="divider">🎮Game stuff</div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum magna lectus, eu mollis odio interdum in. Quisque dictum, odio nec bibendum venenatis, tortor libero laoreet libero, ac sodales augue elit eget nisl. Nunc suscipit molestie sem in tempor. Maecenas venenatis eros quis risus ornare interdum. Fusce viverra imperdiet quam, a malesuada nisl tincidunt non. Proin et ligula imperdiet, cursus est eget, molestie elit. Proin finibus tempor enim a placerat. Etiam et diam ac lacus bibendum iaculis quis vel est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti.

            Nam cursus porta urna id aliquam. Fusce porta consequat quam sit amet porttitor. Proin eget convallis lorem. Quisque eu augue vitae nibh bibendum imperdiet et in augue. Donec non mattis erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus vulputate nibh ac posuere. Suspendisse ultricies mollis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

            Donec porta nulla ex, vitae facilisis elit maximus id. Proin semper fermentum nisl, sed elementum justo laoreet a. Aenean non congue nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec scelerisque libero nec aliquet iaculis. Sed ornare egestas molestie. Donec semper nulla dolor, non condimentum quam tincidunt id. Nulla a tortor a libero lacinia tristique. Duis condimentum consequat quam ac vehicula. Cras imperdiet nisi sit amet purus consequat, at porta ipsum facilisis. Cras et consectetur quam. Ut tempor, dui et euismod dapibus, nibh diam mattis nulla, a imperdiet dui felis et est. Ut aliquam congue metus a feugiat. Etiam euismod molestie sapien, sed tempor neque posuere in. Cras sed libero faucibus, malesuada arcu ultrices, venenatis nibh.

            Fusce consectetur venenatis blandit. Vestibulum egestas arcu imperdiet turpis ornare, non tincidunt mi pellentesque. Integer rutrum ipsum eu ex accumsan ultricies. Quisque lacinia orci quis nisi facilisis vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mauris leo, hendrerit ac justo id, faucibus pulvinar dui. Nunc non odio in nulla elementum vehicula sit amet vitae ligula. Integer bibendum cursus turpis, eu tincidunt nibh fringilla sit amet. Donec efficitur, enim ut accumsan efficitur, quam odio lacinia augue, eu feugiat libero enim at elit. Aliquam lacus eros, facilisis eget gravida aliquet, vestibulum at lorem. Praesent justo velit, eleifend sit amet dui ut, aliquam pellentesque mauris. Donec tincidunt faucibus tellus at condimentum. Morbi interdum nunc id ipsum condimentum cursus. Morbi dictum tempor justo. Cras sed commodo nibh, ut mattis lectus.

            Pellentesque aliquam rhoncus viverra. Vivamus vel augue sed lorem commodo ultricies. Mauris nec rhoncus nibh, ac euismod est. Phasellus libero tellus, vestibulum a tristique nec, accumsan ut metus. Curabitur in libero vestibulum neque bibendum laoreet et a metus. In et sem semper, viverra enim vitae, malesuada ex. Donec ut libero lacinia, feugiat eros nec, egestas leo. Nam mauris quam, faucibus eu dui vel, varius efficitur turpis. Quisque lobortis nunc eget facilisis lacinia. Curabitur nec ornare orci, nec congue metus. Phasellus lobortis sem a felis porta auctor. In at orci quis lectus imperdiet pulvinar. Proin vestibulum, mauris non ultricies condimentum, felis quam aliquet dui, et pellentesque dui neque vitae neque.
        </p>
        <div class="divider">🌎Game stuff</div>
        <div class="divider">🐍Game stuff</div>
        <div class="divider">️️⌨️Game stuff</div>
        <div class="divider">⛏️Game stuff</div>
        <div class="divider">💻Game stuff</div>
    </div>
</template>

<style scoped>
</style>