<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-20">👋 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-10 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>
    </div>
</template>

<style scoped>

</style>