Подверстал резюме пода разные экраны

This commit is contained in:
Dhaverd 2024-04-10 11:37:27 +08:00
parent 55221c066c
commit bc7509423d
5 changed files with 24 additions and 272 deletions

View File

@ -1,254 +0,0 @@
@media (min-width: 600px){
.text-xs-button-1 {
font-size: 6rem !important;
font-weight: 300;
line-height: 6rem;
letter-spacing: -0.015625em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xs-button-2 {
font-size: 3.75rem !important;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -0.0083333333em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xs-button-3 {
font-size: 3rem !important;
font-weight: 400;
line-height: 3.125rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xs-button-4 {
font-size: 2.125rem !important;
font-weight: 400;
line-height: 2.5rem;
letter-spacing: 0.0073529412em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xs-button-5 {
font-size: 1.5rem !important;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xs-button-6{
font-size: 1.25rem !important;
font-weight: 500;
line-height: 2rem;
letter-spacing: 0.0125em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
}
@media (min-width: 960px){
.text-sm-button-1 {
font-size: 6rem !important;
font-weight: 300;
line-height: 6rem;
letter-spacing: -0.015625em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-sm-button-2 {
font-size: 3.75rem !important;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -0.0083333333em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-sm-button-3 {
font-size: 3rem !important;
font-weight: 400;
line-height: 3.125rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-sm-button-4 {
font-size: 2.125rem !important;
font-weight: 400;
line-height: 2.5rem;
letter-spacing: 0.0073529412em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-sm-button-5 {
font-size: 1.5rem !important;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-sm-button-6{
font-size: 1.25rem !important;
font-weight: 500;
line-height: 2rem;
letter-spacing: 0.0125em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
}
@media (min-width: 1280px){
.text-md-button-1 {
font-size: 6rem !important;
font-weight: 300;
line-height: 6rem;
letter-spacing: -0.015625em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-md-button-2 {
font-size: 3.75rem !important;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -0.0083333333em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-md-button-3 {
font-size: 3rem !important;
font-weight: 400;
line-height: 3.125rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-md-button-4 {
font-size: 2.125rem !important;
font-weight: 400;
line-height: 2.5rem;
letter-spacing: 0.0073529412em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-md-button-5 {
font-size: 1.5rem !important;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-md-button-6{
font-size: 1.25rem !important;
font-weight: 500;
line-height: 2rem;
letter-spacing: 0.0125em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
}
@media (min-width: 1920px){
.text-lg-button-1 {
font-size: 6rem !important;
font-weight: 300;
line-height: 6rem;
letter-spacing: -0.015625em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-lg-button-2 {
font-size: 3.75rem !important;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -0.0083333333em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-lg-button-3 {
font-size: 3rem !important;
font-weight: 400;
line-height: 3.125rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-lg-button-4 {
font-size: 2.125rem !important;
font-weight: 400;
line-height: 2.5rem;
letter-spacing: 0.0073529412em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-lg-button-5 {
font-size: 1.5rem !important;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-lg-button-6{
font-size: 1.25rem !important;
font-weight: 500;
line-height: 2rem;
letter-spacing: 0.0125em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
}
@media (min-width: 2560px){
.text-xl-button-1 {
font-size: 6rem !important;
font-weight: 300;
line-height: 6rem;
letter-spacing: -0.015625em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xl-button-2 {
font-size: 3.75rem !important;
font-weight: 300;
line-height: 3.75rem;
letter-spacing: -0.0083333333em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xl-button-3 {
font-size: 3rem !important;
font-weight: 400;
line-height: 3.125rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xl-button-4 {
font-size: 2.125rem !important;
font-weight: 400;
line-height: 2.5rem;
letter-spacing: 0.0073529412em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xl-button-5 {
font-size: 1.5rem !important;
font-weight: 400;
line-height: 2rem;
letter-spacing: normal !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
.text-xl-button-6{
font-size: 1.25rem !important;
font-weight: 500;
line-height: 2rem;
letter-spacing: 0.0125em !important;
font-family: "Roboto", sans-serif !important;
text-transform: none !important;
}
}

View File

@ -1,18 +1,18 @@
<template>
<div>
<p class="text-h5 pb-3">Образование</p>
<v-table class="pb-5 main-sheet-bg">
<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>2020</td>
<td>
<td class="pb-2">2020</td>
<td class="pb-2">
<p>Братский государственный университет, Братск</p>
<p>Факультет экономики и управления, Прикладная информатика в экономике (бакалавриат)</p>
</td>
</tr>
<tr>
<td>2024</td>
<td>
<td class="pt-2 pb-2">2024</td>
<td class="pt-2 pb-2">
<p>Братский государственный университет, Братск</p>
<p>Факультет энергетики и автоматики, Веб технологии и информационный анализ данных (магистратура)</p>
</td>

View File

@ -1,15 +1,15 @@
<template>
<div>
<p class="text-h5 pb-3">Опыт работы</p>
<v-table class="pb-5 main-sheet-bg">
<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>Февраль 2022 август 2023</td>
<td><p>Муниципальное казенное учреждение «Центр информационно-технического и транспортного обслуживания» муниципального образования города Братска</p></td>
<td class="pb-2">Февраль 2022 август 2023</td>
<td class="pb-2"><p>Муниципальное казенное учреждение «Центр информационно-технического и транспортного обслуживания» муниципального образования города Братска</p></td>
</tr>
<tr>
<td>Сентябрь 2023 по настоящее время</td>
<td>Государственное Автономное Учреждение «Иркутский областной многофункциональный центр предоставления государственных и муниципальных услуг»</td>
<td class="pt-2 pb-2">Сентябрь 2023 по настоящее время</td>
<td class="pt-2 pb-2">Государственное Автономное Учреждение «Иркутский областной многофункциональный центр предоставления государственных и муниципальных услуг»</td>
</tr>
</tbody>
</v-table>

View File

@ -1,7 +1,7 @@
<template>
<div>
<p class="text-h5 pb-3">Профессиональные навыки</p>
<p style="text-indent: 1em; text-align: justify" class="pb-5">Хорошо знаю Java, на прошлом месте работы в основном занимался разработкой консольных/десктопных приложений на данном языке
<p class="text-xl-h3 text-md-h4 text-sm-h5 text-h6 pb-3">Профессиональные навыки</p>
<p style="text-indent: 1em; text-align: justify" class="pb-5 text-body-2 text-xl-h5 text-lg-h6 text-md-body-1 text-sm-body-1">Хорошо знаю Java, на прошлом месте работы в основном занимался разработкой консольных/десктопных приложений на данном языке
(муниципальный сектор). Планирую в ближайшее время изучить Spring Framework. В работе активно использую Git. Из СУБД плотно работаю с
MySQL, Postgresql. Иногда по работе приходилось писать или дорабатывать небольшие сайты на HTML+CSS+JS (и иногда PHP) и
дорабатывать веб-приложение на ASP.NET (Жил. фонд). На текущем месте работы занимаюсь разработкой, доработкой и поддержкой сайтов и веб-приложений

View File

@ -1,6 +1,6 @@
<template>
<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">
<v-table class="main-sheet-bg text-xl-h6 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>
@ -20,7 +20,7 @@
</tr>
</tbody>
</v-table>
<div class="w-33">
<div v-if="this.isMore700" class="w-33">
<v-img class="image-gradient" src="./resume.png"></v-img>
</div>
</div>
@ -38,7 +38,8 @@ export default {
},
windowHeight: document.documentElement.clientHeight,
windowWidth: document.documentElement.clientWidth,
isWide: window.innerWidth > 1000,
isWide: window.innerWidth > 1750,
isMore700: window.innerWidth > 700,
tableClass: 'w-25'
}),
created() {
@ -52,13 +53,18 @@ export default {
myEventHandler(e) {
this.windowHeight = document.documentElement.clientHeight;
this.windowWidth = document.documentElement.clientWidth;
if (this.windowWidth < 1000){
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;
}
}
}
}