New-site/resources/views/resume/PersonalInfo.vue

<template>
    <div class="d-flex justify-end align-center">
        <v-table class="main-sheet-bg text-xxl-h6 text-xl-body-1 text-lg-body-1 text-md-body-1 text-sm-body-1 text-caption pl-5" :class="[this.isMore700 ? this.isWide ? 'w-25' : 'w-66' : 'w-100']" style="text-align: left">
            <tbody>
            <tr>
                <td><v-icon :icon="`mdi-account`"></v-icon>Возраст</td>
                <td>{{ personalData.age }}</td>
            </tr>
            <tr>
                <td><v-icon :icon="`mdi-city`"></v-icon>Город</td>
                <td>{{ personalData.location }}</td>
            </tr>
            <tr>
                <td><v-icon :icon="`mdi-at`"></v-icon>E-mail</td>
                <td>{{ personalData.email }}</td>
            </tr>
            <tr>
                <td><v-icon :icon="`mdi-phone`"></v-icon>Телефон</td>
                <td>{{ personalData.phoneNumber }}</td>
            </tr>
            </tbody>
        </v-table>
        <div v-if="this.isMore700" class="w-33">
            <v-img class="image-gradient" src="./images/resume.png"></v-img>
        </div>
    </div>
</template>

<script>
export default {
    name: "PersonalInfo",
    data: () => ({
        personalData: {
            age: '25 лет',
            location: 'г. Иркутск',
            email: 'belezov.pavel@mail.ru',
            phoneNumber: '+7-914-919-21-17'
        },
        windowHeight: document.documentElement.clientHeight,
        windowWidth: document.documentElement.clientWidth,
        isWide: window.innerWidth > 1920,
        isMore700: window.innerWidth > 700,
        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 < 1750){
                this.isWide = false;
                this.tableClass = 'w-66';
            } else {
                this.isWide = true;
                this.tableClass = 'w-33';
            }
            if (this.windowWidth < 700){
                this.isMore700 = false;
            } else {
                this.isMore700 = true;
            }
        }
    }
}
</script>

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

    .image-gradient {
        mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    }
</style>