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

refactor the index page

Browse source
This commit is contained in:
Moritz Ruth 2019-03-09 20:18:16 +01:00
parent c101d2b4d0
commit 0d834e2f57
9 changed files with 73 additions and 315 deletions
Download patch file Download diff file Expand all files Collapse all files

122
pages/index.vue
View file

@ -1,98 +1,62 @@
<template>
<div id="index">
<section class="section section-hero vertically-centered-container">
<div class="vertically-centered">
<Logo/>
<div class="horizontally-centered">
<SocialIcon name="github" username="ctexxx" invert/>
<SocialIcon name="twitter" username="cte3x" invert/>
<SocialIcon name="instagram" username="cte3x" invert/>
<SocialIcon name="keybase" username="ctexxx"/>
</div>
</div>
<ScrollDownArrow to=".section-1" container="#index"/>
</section>
<section class="section section-1">
<div class="vertically-centered-container">
<div class="vertically-centered">
<div class="horizontally-centered">
<h1>Hi, I’m Moritz</h1>
<p>
I create code and photos.
</p>
</div>
<div class="projects">
<div class="horizontally-centered">
<Project
title="pzl"
:links="{GitHub: 'https://github.com/ctexxx/pzl', NPM: 'https://www.npmjs.com/package/@ctexxx/pzl'}"
>
A pretty zero-configuration console logger
</Project>
</div>
</div>
</div>
</div>
</section>
<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>
</template>
<script>
import Logo from "@/components/Logo";
import CtexxxLogo from "@/components/CtexxxLogo";
import SocialIcon from "@/components/SocialIcon";
import ScrollDownArrow from "@/components/ScrollDownArrow";
import Project from "@/components/Project";
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: { Project, ScrollDownArrow, SocialIcon, Logo }
components: { SocialIcon, CtexxxLogo },
data: () => ({
logoText: "ctexxx",
socialMedia
})
};
</script>
<style scoped lang="scss">
@import "~@/assets/_mq.scss";
@import "~@/assets/_responsive.scss";
#index {
scroll-snap-type: y mandatory;
height: 100%;
overflow-y: scroll;
}
.section {
position: relative;
scroll-snap-align: start;
}
.section-hero {
background-color: #1C1C1C;
}
.section-1 {
background-color: #202020;
color: white;
padding: 20px;
h1 {
font-size: 50px;
@include mq($from: tablet) {
font-size: 80px;
}
}
p {
font-size: 18px;
@include mq($from: tablet) {
font-size: 20px;
}
}
.projects {
text-align: center;
margin-top: 100px;
}
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
align-content: center;
}
</style>