89 lines
1.8 KiB
Vue
89 lines
1.8 KiB
Vue
<template>
|
|
<main>
|
|
<CtexxxLogo :text="logoText"/>
|
|
<div class="horizontally-centered">
|
|
<SocialIcon
|
|
v-for="account in socialMedia" :key="account.name"
|
|
:name="account.name" :username="account.username" :invert="!!account.invertLogoColor"
|
|
@mouseover.native="logoText = account.username" @mouseleave.native="logoText = null"
|
|
/>
|
|
</div>
|
|
<div class="link-section">
|
|
<nuxt-link class="button" to="/projects">My Projects</nuxt-link>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script>
|
|
import CtexxxLogo from "@/components/CtexxxLogo";
|
|
import SocialIcon from "@/components/SocialIcon";
|
|
|
|
const socialMedia = [
|
|
{
|
|
name: "github",
|
|
username: "ctexxx",
|
|
invertLogoColor: true
|
|
},
|
|
{
|
|
name: "twitter",
|
|
username: "cte3x",
|
|
invertLogoColor: true
|
|
},
|
|
{
|
|
name: "instagram",
|
|
username: "cte3x",
|
|
invertLogoColor: true
|
|
},
|
|
{
|
|
name: "keybase",
|
|
username: "ctexxx"
|
|
}
|
|
];
|
|
|
|
export default {
|
|
name: "index",
|
|
components: { SocialIcon, CtexxxLogo },
|
|
data: () => ({
|
|
logoText: "ctexxx",
|
|
socialMedia
|
|
})
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "~@/assets/_responsive.scss";
|
|
|
|
main {
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-content: center;
|
|
|
|
.link-section {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.button {
|
|
margin: 10px;
|
|
|
|
&::before {
|
|
content: "→";
|
|
transform: translateY(-4px) scale(1.7);
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|