75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
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">
|
|
<Header/>
|
|
<PersonalInfo/>
|
|
<About/>
|
|
</v-sheet>
|
|
</v-sheet>
|
|
</template>
|
|
|
|
<script>
|
|
import Header from "./Header.vue";
|
|
import PersonalInfo from "./PersonalInfo.vue";
|
|
import About from "./About.vue";
|
|
export default {
|
|
name: "Resume",
|
|
components: {About, PersonalInfo, Header},
|
|
data: () => ({
|
|
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;
|
|
}
|
|
</style>
|