<template>
    <v-sheet class="bg-gradient justify-center d-flex h-auto" style="height: 100%">
        <v-sheet :elevation="4" class="mt-5 mb-5 align-center justify-center h-auto rounded-lg main-sheet-bg w-75">
            <Header/>
            <PersonalInfo/>
            <About/>
        </v-sheet>
    </v-sheet>
</template>

<script>
import Header from "./Header.vue";
import PersonalInfo from "./PersonalInfo.vue";
import About from "./About.vue";
export default {
    name: "Resume",
    components: {About, PersonalInfo, Header},
    data: () => ({
        windowHeight: document.documentElement.clientHeight,
        windowWidth: document.documentElement.clientWidth,
        isWide: window.innerWidth > 1000,
        tableClass: 'w-25'
    }),
    created() {
        window.addEventListener("resize", this.myEventHandler);
    },
    mounted() {
        this.myEventHandler();
        window.addEventListener("resize", this.myEventHandler, { passive: true });
    },
    methods: {
        myEventHandler(e) {
            this.windowHeight = document.documentElement.clientHeight;
            this.windowWidth = document.documentElement.clientWidth;
            if (this.windowWidth < 1000){
                this.isWide = false;
                this.tableClass = 'w-66';
            } else {
                this.isWide = true;
                this.tableClass = 'w-33';
            }
        }
    }
}
</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%;
    }
}

.main-sheet-bg {
    background-color: #424242;
    color: #E0E0E0;
    text-decoration-color: #E0E0E0;
}
</style>
