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

Add navigation

Browse source
This commit is contained in:
Moritz Ruth 2019-11-30 18:20:08 +01:00
parent 05c9afb3b5
commit fb02b833cd
No known key found for this signature in database
GPG key ID: FE38A0B03AA331BA
7 changed files with 298 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

23
pages/index.vue
View file

@ -1,21 +1,22 @@
<template>
<main class="index-page">
<NavigationBar show-background/>
<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">
<a class="index-page__social-link" href="https://github.com/moritzruth" title="GitHub">
<GitHubIcon class="index-page__social-icon"/>
</a>
<a class="index-page__social-link" href="https://twitter.com/moritzruth_dev">
<a class="index-page__social-link" href="https://twitter.com/moritzruth_dev" title="Twitter">
<TwitterIcon class="index-page__social-icon"/>
</a>
<a class="index-page__social-link" href="https://instagram.com/moritzruth_dev">
<a class="index-page__social-link" href="https://instagram.com/moritzruth_dev" title="Instagram">
<InstagramIcon class="index-page__social-icon"/>
</a>
<a class="index-page__social-link" href="mailto:dev@moritz-ruth.de">
<a class="index-page__social-link" href="mailto:dev@moritz-ruth.de" title="Email">
<EmailIcon class="index-page__social-icon"/>
</a>
</div>
@ -33,10 +34,10 @@
height: 100vh;
}
.index-page__content {
animation: appear 400ms 4s ease both;
.index-page__name {
animation: appear 400ms 3.8s ease both;
font-size: 1.5rem;
font-size: 2rem;
}
@keyframes appear {
@ -62,12 +63,12 @@
.index-page__social-link {
&:not(:last-child) {
margin-right: 10px;
margin-right: 15px;
}
}
.index-page__social-icon {
width: 50px;
width: 40px;
transition: 200ms linear opacity;
&:hover {
@ -82,9 +83,11 @@
import TwitterIcon from "@/assets/icons/twitter.svg";
import InstagramIcon from "@/assets/icons/instagram.svg";
import EmailIcon from "@/assets/icons/email.svg";
import NavigationBar from "@/components/NavigationBar";
export default {
name: "IndexPage",
components: { AnimatedLogo, GitHubIcon, TwitterIcon, InstagramIcon, EmailIcon }
layout: "none",
components: { NavigationBar, AnimatedLogo, GitHubIcon, TwitterIcon, InstagramIcon, EmailIcon }
};
</script>