New-site/resources/views/Resume.vue

<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">
            <div class="d-flex flex-row align-center">
                <p class="text-h4 w-75 ma-2 pa-2 justify-start">Белезов Павел</p>
                <div v-if="this.isWide" class="d-flex justify-end">
                    <v-btn v-for="item in linksData" :key="item" color="#21abf6" variant="text" class="ma-2 pa-2 justify-end" :href="item.link">{{ item.name }}</v-btn>
                </div>
                <div v-else class="d-flex justify-end w-25 pr-3">
                    <v-menu location="bottom" color="#424242">
                        <template class="justify-end" v-slot:activator="{ props }">
                            <v-btn color="#424242" icon="mdi-dots-vertical" v-bind="props"></v-btn>
                        </template>
                        <v-list>
                            <v-list-item v-for="item in linksData" :key="item" :href="item.link">
                                <v-list-item-title>
                                    {{ item.name }}
                                </v-list-item-title>
                            </v-list-item>
                        </v-list>
                    </v-menu>
                </div>
            </div>
            <div class="d-flex justify-end align-center">
                <v-table class="main-sheet-bg pl-5" :class="[this.isWide ? 'w-25' : 'w-66']" 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 class="w-33">
                    <v-img class="image-gradient" src="./resume.png"></v-img>
                </div>
            </div>
            <div class="pa-5">
                <div>
                    <p class="text-h5 pb-3">Профессиональные навыки</p>
                    <p style="text-indent: 1em; text-align: justify" class="pb-5">Хорошо знаю Java, на прошлом месте работы в основном занимался разработкой консольных/десктопных приложений на данном языке
                        (муниципальный сектор). Планирую в ближайшее время изучить Spring Framework. В работе активно использую Git. Из СУБД плотно работаю с
                        MySQL, Postgresql. Иногда по работе приходилось писать или дорабатывать небольшие сайты на HTML+CSS+JS (и иногда PHP) и
                        дорабатывать веб-приложение на ASP.NET (Жил. фонд). На текущем месте работы занимаюсь разработкой/дработкой сайтов и веб-приложений
                        на стеке Laravel+Vue. Так же переносил веб-приложение на десктоп с помощью фреймворка ElectronJs. В рамках программы ВУЗа изучал C#, Python, поверхностно проходил Django.
                        Владею английским языком на среднем уровне.</p>
                </div>
                <div>
                    <p class="text-h5 pb-3">Опыт работы</p>
                    <v-table class="pb-5 main-sheet-bg">
                        <tbody>
                        <tr>
                            <td>Февраль 2022 — август 2023</td>
                            <td><p>Муниципальное казенное учреждение «Центр информационно-технического и транспортного обслуживания» муниципального образования города Братска</p></td>
                        </tr>
                        <tr>
                            <td>Сентябрь 2023 — по настоящее время</td>
                            <td>Государственное Автономное Учреждение «Иркутский областной многофункциональный центр предоставления государственных и муниципальных услуг»</td>
                        </tr>
                        </tbody>
                    </v-table>
                </div>
                <div>
                    <p class="text-h5 pb-3">Образование</p>
                    <v-table class="pb-5 main-sheet-bg">
                        <tbody>
                        <tr>
                            <td>2020</td>
                            <td>
                                <p>Братский государственный университет, Братск</p>
                                <p>Факультет экономики и управления, Прикладная информатика в экономике (бакалавриат)</p>
                            </td>
                        </tr>
                        <tr>
                            <td>2024</td>
                            <td>
                                <p>Братский государственный университет, Братск</p>
                                <p>Факультет энергетики и автоматики, Веб технологии и информационный анализ данных (магистратура)</p>
                            </td>
                        </tr>
                        </tbody>
                    </v-table>
                </div>
            </div>
        </v-sheet>
    </v-sheet>
</template>

<script>
export default {
    name: "Resume",
    data: () => ({
        linksData: [
            {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: "Replit", link: "https://replit.com/@DHAVERD"},
            {name: "Резюме docx", link: "/download/resume.docx"}
        ],
        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 > 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;
}

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

</style>