<template>
    <v-card class="bg-gradient" style="height: 100%">
        <v-card-text class="d-flex justify-center align-center">
            <!--
            <v-card class="align-center justify-center h-auto w-75">
                <v-card-title>{{ cardTitle }}</v-card-title>
            </v-card>
            -->
            <v-sheet :elevation="4" class="align-center justify-center h-auto w-75 rounded-lg">
                <v-sheet class="d-flex flex-row align-center rounded-lg">
                    <p class="text-h4 w-75 ma-2 pa-2 justify-start">Белезов Павел</p>
                    <v-btn v-for="item in dict" :key="item" color="#21abf6" elevation="4" variant="text" class="ma-2 pa-2 justify-end" :href="item.link">{{ item.name }}</v-btn>
                </v-sheet>
            </v-sheet>
        </v-card-text>
    </v-card>
</template>

<script>
export default {
    name: "Resume",
    data: () => ({
        dict: [
            {name: "Github", link: "https://github.com/Dhaverd"},
            {name: "HeadHunter", link: "https://irkutsk.hh.ru/resume/d8c67e1dff0843f1900039ed1f7839666b4559"},
            {name: "Habr", link: "https://career.habr.com/dhaverd"},
            {name: "Word", link: "/download/resume.docx"}
        ]
    })
}
</script>


<style scoped>

.bg-gradient {
    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
    height: 100vh;
}

@keyframes gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

</style>
