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

add projects section and fix firefox CSS prefixing

Browse source
This commit is contained in:
Moritz Ruth 2019-03-03 13:01:56 +01:00
parent 380f9cb5f9
commit b20150c782
6 changed files with 311 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

114
pages/index.vue
View file

@ -1,43 +1,111 @@
<template>
<div class="hero full-width">
<div id="centered">
<Logo/>
<div id="social-icons">
<SocialIcon icon="github" to="https://github.com/ctexxx" username="ctexxx" invert/>
<SocialIcon icon="twitter" to="https://twitter.com/cte3x" username="cte3x" invert/>
<SocialIcon icon="instagram" to="https://instagram.com/cte3x" username="cte3x" invert/>
<SocialIcon icon="keybase" to="https://keybase.io/ctexxx" username="cte3x"/>
<div id="index">
<section class="section section-hero vertically-centered-container">
<div class="vertically-centered">
<Logo/>
<div class="horizontally-centered">
<SocialIcon icon="github" to="https://github.com/ctexxx" username="ctexxx" invert/>
<SocialIcon icon="twitter" to="https://twitter.com/cte3x" username="cte3x" invert/>
<SocialIcon icon="instagram" to="https://instagram.com/cte3x" username="cte3x" invert/>
<SocialIcon icon="keybase" to="https://keybase.io/ctexxx" username="cte3x"/>
</div>
</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">
<h2>pzl</h2>
<p>
<a href="https://github.com/ctexxx/pzl" rel="noopener">GitHub</a>
|
<a href="https://www.npmjs.com/package/@ctexxx/pzl" rel="noopener">NPM</a></p>
A pretty zero-configuration console logger
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script>
import Logo from "../components/Logo";
import Logo from "@/components/Logo";
import SocialIcon from "@/components/SocialIcon";
import ScrollDownArrow from "@/components/ScrollDownArrow";
export default {
name: "index",
components: { SocialIcon, Logo }
components: { ScrollDownArrow, SocialIcon, Logo }
};
</script>
<style scoped lang="scss">
.hero {
height: 100vh;
@import "~@/assets/_mq.scss";
#index {
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.section {
position: relative;
scroll-snap-align: start;
}
.section-hero {
background-color: #1C1C1C;
display: table;
}
#centered {
display: table-cell;
vertical-align: middle;
}
.section-1 {
background-color: #202020;
color: white;
#social-icons {
margin: 0 auto;
width: fit-content;
padding: 20px;
h1 {
font-size: 50px;
@include mq($from: tablet) {
font-size: 80px;
}
}
h2 {
font-size: 35px;
@include mq($from: tablet) {
font-size: 50px;
}
margin-bottom: 10px;
}
p {
font-size: 18px;
@include mq($from: tablet) {
font-size: 20px;
}
}
.projects {
text-align: center;
margin-top: 100px;
.horizontally-centered {
width: 75%;
}
}
}
</style>