Подверстал резюме пода разные экраны
This commit is contained in:
parent
55221c066c
commit
bc7509423d
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 (Жил. фонд). На текущем месте работы занимаюсь разработкой, доработкой и поддержкой сайтов и веб-приложений
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue