163 lines
No EOL
3.5 KiB
Vue
163 lines
No EOL
3.5 KiB
Vue
<script setup lang="ts">
|
||
import SocialBtn from "./SocialBtn.vue";
|
||
import {ref} from "vue";
|
||
import ISocialBtn from "../ISocialBtn.ts";
|
||
const socialbtns = ref<ISocialBtn[]>([
|
||
{ id: 0, name: "github", link: "https://github.com/Mootfrost777", color: "#c9510c"},
|
||
{ id: 1, name: "telegram", link: "https://t.me/mootfrost", color: "#1f9bda"},
|
||
{ id: 2, name: "gitea", link: "https://git.mootfrost.dev/Mootfrost777", color: "#609926"}
|
||
])
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center overlay pe-none">
|
||
<div class="main-title text-uppercase text-wrap">
|
||
<span>mootfrost</span>
|
||
<p class="thin">Development</p>
|
||
</div>
|
||
<div class="social pe-auto">
|
||
<div class="social-icons flex-row justify-content-center align-items-center">
|
||
<SocialBtn v-for="el in socialbtns"
|
||
:btn="el"
|
||
:key="el.id"/>
|
||
|
||
<SocialBtn :btn="socialbtns[0]"/>
|
||
</div>
|
||
|
||
<div class="email flex-column flex-wrap pe-auto thin text-uppercase">
|
||
<a href="mailto:hello@mootfrost.dev">hello@mootfrost.dev</a>
|
||
</div>
|
||
<hr class="divider">
|
||
<div class="lower-buttons flex-column flex-wrap thin text-uppercase">
|
||
<router-link to="/about" class="pe-auto">Обо мне</router-link>
|
||
<router-link to="/projects" class="pe-auto">Проекты</router-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.main-title {
|
||
text-align: center;
|
||
font-size: 3em;
|
||
font-weight: 800;
|
||
color: white;
|
||
line-height: 0.9em;
|
||
letter-spacing: 0.1em;
|
||
margin: 5vh;
|
||
}
|
||
|
||
.main-title .thin {
|
||
font-family: "Comfortaa Light";
|
||
font-weight: 30;
|
||
}
|
||
|
||
.btn-social {
|
||
margin-left: 5px;
|
||
margin-right: 5px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.lower-buttons {
|
||
font-size: 1.3em;
|
||
margin-top: 15px;
|
||
display: flex;
|
||
text-align: center;
|
||
font-family: Comfortaa, sans-serif;
|
||
}
|
||
|
||
.lower-buttons a {
|
||
text-decoration: none;
|
||
color: lightgray;
|
||
margin-bottom: 3px;
|
||
margin-top: 3px;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.lower-buttons a:hover {
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.email {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
text-align: center;
|
||
font-family: Comfortaa, sans-serif;
|
||
}
|
||
|
||
.email a{
|
||
text-decoration: none;
|
||
color: lightgray;
|
||
margin-bottom: 3px;
|
||
margin-top: 3px;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.email a:hover {
|
||
color: #e6ca1c;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.lower-buttons a:hover {
|
||
color: white;
|
||
}
|
||
|
||
.lower-buttons a::before {
|
||
position: relative;
|
||
margin-right: 7px;
|
||
content: "";
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background-color: white;
|
||
background-repeat: no-repeat;
|
||
transition: 0.3s;
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.lower-buttons a::after {
|
||
position: relative;
|
||
margin-left: 7px;
|
||
content: "";
|
||
display: inline-block;
|
||
top: 50%;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background-color: white;
|
||
background-repeat: no-repeat;
|
||
transition: 0.3s;
|
||
opacity: 0.4;
|
||
}
|
||
|
||
.lower-buttons a:hover::before {
|
||
transform: translateX(-10px);
|
||
opacity: 1;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.lower-buttons a:hover::after {
|
||
transform: translateX(10px);
|
||
opacity: 1;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.divider {
|
||
background-color: white;
|
||
width: 100%;
|
||
border-top: 3px solid #bbb;
|
||
border-radius: 8px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
|
||
.lower-buttons a.email:hover::before {
|
||
background-color: #e6ca1c;
|
||
}
|
||
|
||
.lower-buttons a.email:hover::after {
|
||
background-color: #e6ca1c;
|
||
}
|
||
</style> |