Подверстал резюме пода разные экраны
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