From 4018fd33343dd6753afeafd8dda071cdef0d4844 Mon Sep 17 00:00:00 2001
From: "p.belezov" <p.belezov@mfc38.ru>
Date: Thu, 29 Feb 2024 15:51:25 +0800
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B7=D0=B1=D0=B8=D0=BB=20=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20=D1=81=20=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B7=D1=8E=D0=BC=D0=B5=20=D0=BD=D0=B0=20=D0=BE=D1=82?=
 =?UTF-8?q?=D0=B4=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5=20=D0=B2=D1=8C=D1=8E?=
 =?UTF-8?q?=D1=88=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |   2 +-
 resources/App.vue                             |   2 +-
 resources/views/Resume/About.vue              |  21 +++
 resources/views/Resume/About/Education.vue    |  63 +++++++
 resources/views/Resume/About/Experience.vue   |  57 ++++++
 resources/views/Resume/About/Skills.vue       |  21 +++
 resources/views/Resume/Header.vue             |  65 +++++++
 resources/views/Resume/PersonalInfo.vue       |  77 ++++++++
 resources/views/Resume/Resume.vue             |  74 ++++++++
 .../views/{resume => Resume}/resume.blade.php |   0
 resources/views/Schedule.vue                  |   4 +-
 resources/views/resume/Resume.vue             | 177 ------------------
 12 files changed, 382 insertions(+), 181 deletions(-)
 create mode 100644 resources/views/Resume/About.vue
 create mode 100644 resources/views/Resume/About/Education.vue
 create mode 100644 resources/views/Resume/About/Experience.vue
 create mode 100644 resources/views/Resume/About/Skills.vue
 create mode 100644 resources/views/Resume/Header.vue
 create mode 100644 resources/views/Resume/PersonalInfo.vue
 create mode 100644 resources/views/Resume/Resume.vue
 rename resources/views/{resume => Resume}/resume.blade.php (100%)
 delete mode 100644 resources/views/resume/Resume.vue

diff --git a/package-lock.json b/package-lock.json
index c761c33..e4b0d56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "new-site",
+    "name": "new.site",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
diff --git a/resources/App.vue b/resources/App.vue
index ca74cc9..f331fe4 100644
--- a/resources/App.vue
+++ b/resources/App.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Resume from "./views/resume/Resume.vue";
+import Resume from "./views/Resume/Resume.vue";
 
 export default {
     name: "App",
diff --git a/resources/views/Resume/About.vue b/resources/views/Resume/About.vue
new file mode 100644
index 0000000..8bc568e
--- /dev/null
+++ b/resources/views/Resume/About.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="pa-5">
+        <Skills/>
+        <Experience/>
+        <Education/>
+    </div>
+</template>
+
+<script>
+import Skills from "./About/Skills.vue";
+import Experience from "./About/Experience.vue";
+import Education from "./About/Education.vue";
+export default {
+    name: "About",
+    components: {Education, Experience, Skills}
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/views/Resume/About/Education.vue b/resources/views/Resume/About/Education.vue
new file mode 100644
index 0000000..9af03ee
--- /dev/null
+++ b/resources/views/Resume/About/Education.vue
@@ -0,0 +1,63 @@
+<template>
+    <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>
+</template>
+
+<script>
+export default {
+    name: "Education",
+    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>
+    .main-sheet-bg {
+        background-color: #424242;
+        color: #E0E0E0;
+        text-decoration-color: #E0E0E0;
+    }
+</style>
diff --git a/resources/views/Resume/About/Experience.vue b/resources/views/Resume/About/Experience.vue
new file mode 100644
index 0000000..31aec87
--- /dev/null
+++ b/resources/views/Resume/About/Experience.vue
@@ -0,0 +1,57 @@
+<template>
+    <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>
+</template>
+
+<script>
+export default {
+    name: "Experience",
+    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>
+    .main-sheet-bg {
+        background-color: #424242;
+        color: #E0E0E0;
+        text-decoration-color: #E0E0E0;
+    }
+</style>
diff --git a/resources/views/Resume/About/Skills.vue b/resources/views/Resume/About/Skills.vue
new file mode 100644
index 0000000..4b0b52c
--- /dev/null
+++ b/resources/views/Resume/About/Skills.vue
@@ -0,0 +1,21 @@
+<template>
+    <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>
+</template>
+
+<script>
+export default {
+    name: "Skills"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/views/Resume/Header.vue b/resources/views/Resume/Header.vue
new file mode 100644
index 0000000..03cb202
--- /dev/null
+++ b/resources/views/Resume/Header.vue
@@ -0,0 +1,65 @@
+<template>
+    <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>
+</template>
+
+<script>
+export default {
+    name: "Header",
+    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"}
+        ],
+        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>
+
+</style>
diff --git a/resources/views/Resume/PersonalInfo.vue b/resources/views/Resume/PersonalInfo.vue
new file mode 100644
index 0000000..07b1dad
--- /dev/null
+++ b/resources/views/Resume/PersonalInfo.vue
@@ -0,0 +1,77 @@
+<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">
+            <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>
+</template>
+
+<script>
+export default {
+    name: "PersonalInfo",
+    data: () => ({
+        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>
+    .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>
diff --git a/resources/views/Resume/Resume.vue b/resources/views/Resume/Resume.vue
new file mode 100644
index 0000000..4106de0
--- /dev/null
+++ b/resources/views/Resume/Resume.vue
@@ -0,0 +1,74 @@
+<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>
diff --git a/resources/views/resume/resume.blade.php b/resources/views/Resume/resume.blade.php
similarity index 100%
rename from resources/views/resume/resume.blade.php
rename to resources/views/Resume/resume.blade.php
diff --git a/resources/views/Schedule.vue b/resources/views/Schedule.vue
index d896420..7d1989c 100644
--- a/resources/views/Schedule.vue
+++ b/resources/views/Schedule.vue
@@ -3,9 +3,9 @@
         <v-sheet class="mt-5 mb-5 rounded-lg w-75">
             <p class="text-h3 ma-5">Расписание стримов</p>
             <p class="ma-5 text-h4">{{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
-            <ScheduleTable></ScheduleTable>
+            <ScheduleTable/>
             <p class="text-h3 ma-5">Ссылочки</p>
-            <Links></Links>
+            <Links/>
         </v-sheet>
     </v-sheet>
 </template>
diff --git a/resources/views/resume/Resume.vue b/resources/views/resume/Resume.vue
deleted file mode 100644
index 36ca925..0000000
--- a/resources/views/resume/Resume.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<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>