New-site/resources/views/resume/About/Education.vue

<template>
    <div>
        <p class="text-xl-h3 text-lg-h4 text-md-h4 text-sm-h5 text-h6 pb-3">Образование</p>
        <v-table class="pb-5 main-sheet-bg text-xl-h5 text-lg-h6 text-md-body-1 text-sm-body-1 text-body-2">
            <tbody>
            <tr>
                <td class="pb-2">2020</td>
                <td class="pb-2">
                    <p>Братский государственный университет, Братск</p>
                    <p>Факультет экономики и управления, Прикладная информатика в экономике (бакалавриат)</p>
                </td>
            </tr>
            <tr>
                <td class="pt-2 pb-2">2024</td>
                <td class="pt-2 pb-2">
                    <p>Братский государственный университет, Братск</p>
                    <p>Факультет энергетики и автоматики, Веб технологии и информационный анализ данных (магистратура)</p>
                </td>
            </tr>
            </tbody>
        </v-table>
    </div>
</template>

<script>
export default {
    name: "Education",
    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>
    .main-sheet-bg {
        background-color: #424242;
        color: #E0E0E0;
        text-decoration-color: #E0E0E0;
    }
</style>