moritzruth/moritzruth.de
1
0
Fork 0
Code Activity Actions

Add social media links

Browse source
This commit is contained in:
Moritz Ruth 2019-11-30 15:45:08 +01:00
parent 11e58a721b
commit 05c9afb3b5
No known key found for this signature in database
GPG key ID: FE38A0B03AA331BA
12 changed files with 202 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

74
pages/index.vue
View file

@ -1,26 +1,90 @@
<template>
<main class="index-page">
<div class="index-page__hero">
<AnimatedLogo/>
<AnimatedLogo/>
<div class="index-page__content">
<div class="index-page__name">
Moritz Ruth
</div>
<div class="index-page__socials">
<a class="index-page__social-link" href="https://github.com/moritzruth">
<GitHubIcon class="index-page__social-icon"/>
</a>
<a class="index-page__social-link" href="https://twitter.com/moritzruth_dev">
<TwitterIcon class="index-page__social-icon"/>
</a>
<a class="index-page__social-link" href="https://instagram.com/moritzruth_dev">
<InstagramIcon class="index-page__social-icon"/>
</a>
<a class="index-page__social-link" href="mailto:dev@moritz-ruth.de">
<EmailIcon class="index-page__social-icon"/>
</a>
</div>
</div>
</main>
</template>
<style>
.index-page__hero {
<style scoped lang="scss">
.index-page {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
.index-page__content {
animation: appear 400ms 4s ease both;
font-size: 1.5rem;
}
@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.index-page__socials {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}
.index-page__social-link {
&:not(:last-child) {
margin-right: 10px;
}
}
.index-page__social-icon {
width: 50px;
transition: 200ms linear opacity;
&:hover {
opacity: 0.8;
}
}
</style>
<script>
import AnimatedLogo from "../components/AnimatedLogo";
import GitHubIcon from "@/assets/icons/github.svg";
import TwitterIcon from "@/assets/icons/twitter.svg";
import InstagramIcon from "@/assets/icons/instagram.svg";
import EmailIcon from "@/assets/icons/email.svg";
export default {
name: "IndexPage",
components: { AnimatedLogo }
components: { AnimatedLogo, GitHubIcon, TwitterIcon, InstagramIcon, EmailIcon }
};
</script>