1
0
Fork 0

add projects section and fix firefox CSS prefixing

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

View file

@ -2,10 +2,23 @@ html, body, .full-width, #__nuxt, #__layout {
width: 100%;
}
.full-vp-width {
width: 100vw;
}
html, body, .full-height, #__nuxt, #__layout {
height: 100%;
}
.full-vp-height {
height: 100vh;
}
div, section {
width: inherit;
height: inherit;
}
body {
font-family: "Raleway", sans-serif;
font-size: 16px;
@ -22,3 +35,25 @@ body {
box-sizing: border-box;
margin: 0;
}
.vertically-centered-container {
display: table;
}
.vertically-centered {
display: table-cell;
vertical-align: middle;
height: fit-content;
}
.horizontally-centered {
margin: 0 auto;
width: fit-content;
}
a {
color: #25acd7;
text-decoration: none;
}

View file

@ -0,0 +1,89 @@
<template>
<div class="scroll-down-arrow">
<div id="arrow-container" @click="onClick">
<div id="left-line"></div>
<div id="right-line"></div>
</div>
</div>
</template>
<script>
export default {
name: "ScrollDownArrow",
mounted() {
this.$nextTick(() => {
this.elm = document.querySelector(this.to);
if(!this.elm) {
throw new Error("No matching element found");
}
});
},
data: () => ({
elm: null
}),
props: {
to: String,
container: String
},
methods: {
onClick() {
const container = this.container ? document.querySelector(this.container) : window;
container.scrollTo({
'behavior': "smooth",
'left': 0,
'top': this.elm.offsetTop
});
}
}
};
</script>
<style scoped lang="scss">
.scroll-down-arrow {
height: 40px;
position: absolute;
bottom: 10px;
right: 0;
left: 0;
display: table;
margin: 0 auto;
animation: moveVertical 2s alternate linear infinite;
}
#arrow-container {
position: relative;
margin: 0 auto;
width: fit-content;
}
#left-line, #right-line {
width: 20px;
height: 2px;
background-color: white;
display: inline-block;
}
#left-line {
transform: rotate(45deg) translateX(9px);
}
#right-line {
transform: rotate(-45deg) translateX(-9px);
}
@keyframes moveVertical {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
</style>

View file

@ -38,7 +38,8 @@ module.exports = {
/*
** Nuxt.js modules
*/
modules: [,
modules: [
"@nuxtjs/axios",
'@nuxtjs/pwa'
],
@ -54,7 +55,7 @@ module.exports = {
},
postcss: [
require("autoprefixer")({
browsers: ["> 5%"]
browsers: ["last 5 versions"]
})
]
}

View file

@ -10,12 +10,13 @@
"deploy": "push-dir --dir=dist --branch=master --cleanup"
},
"dependencies": {
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/pwa": "^2.6.0",
"cross-env": "^5.2.0",
"lodash.debounce": "^4.0.8",
"nuxt": "^2.4.0",
"simple-icons": "^1.9.20",
"sass-mq": "^5.0.0",
"lodash.debounce": "^4.0.8"
"simple-icons": "^1.9.20"
},
"devDependencies": {
"autoprefixer": "^9.4.7",

View file

@ -1,43 +1,111 @@
<template>
<div class="hero full-width">
<div id="centered">
<div id="index">
<section class="section section-hero vertically-centered-container">
<div class="vertically-centered">
<Logo/>
<div id="social-icons">
<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>
<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, Im 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;
padding: 20px;
h1 {
font-size: 50px;
@include mq($from: tablet) {
font-size: 80px;
}
}
#social-icons {
margin: 0 auto;
width: fit-content;
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>

View file

@ -1142,6 +1142,16 @@
webpack-node-externals "^1.7.2"
webpackbar "^3.1.5"
"@nuxtjs/axios@^5.3.6":
version "5.3.6"
resolved "https://registry.yarnpkg.com/@nuxtjs/axios/-/axios-5.3.6.tgz#1bad5af6e30977809cddd5248dd3b41271d1dc14"
integrity sha512-kxtiHW1QCYHaztKEkBnqH/GQoQoVubHdBWMC9+X0cVaA3AwOFsGI3Ef4/dSX8coSto7D+nV8LH3rVjbaFT+KUg==
dependencies:
"@nuxtjs/proxy" "^1.3.0"
axios "^0.18.0"
axios-retry "^3.1.1"
consola "^1.4.4"
"@nuxtjs/icon@^2.6.0":
version "2.6.0"
resolved "https://registry.yarnpkg.com/@nuxtjs/icon/-/icon-2.6.0.tgz#65295ee059794f01e41a52c4141c06e898e798bc"
@ -1163,6 +1173,14 @@
resolved "https://registry.yarnpkg.com/@nuxtjs/meta/-/meta-2.6.0.tgz#cc8fd2a019fb3e2e1feaa78abefee3a6a6aed477"
integrity sha512-DrH+kmFEEKxjtZjRi2R0hfHDni+Ba2v4a47V5TwftLeshP31no9KKc1Ae6whLB+X+caC1tv3lR5CHbFmBgLC7Q==
"@nuxtjs/proxy@^1.3.0":
version "1.3.2"
resolved "https://registry.yarnpkg.com/@nuxtjs/proxy/-/proxy-1.3.2.tgz#ca16e4b01e75917a01231d4b7c414f44802dd2b2"
integrity sha512-yZmbLgiKKDj3HZmrjwNQJ741q5wsfg5C8AP7Ol9RC1+FaDPryhGuevZTl3NQpfJSmtrFsUn6FyG4Yvf4EJOYlg==
dependencies:
consola "^2.4.1"
http-proxy-middleware "^0.19.1"
"@nuxtjs/pwa@^2.6.0":
version "2.6.0"
resolved "https://registry.yarnpkg.com/@nuxtjs/pwa/-/pwa-2.6.0.tgz#3138e1f32f4d080ccbe96dc0b206efea4e790199"
@ -1701,6 +1719,21 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
axios-retry@^3.1.1:
version "3.1.2"
resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.1.2.tgz#4f4dcbefb0b434e22b72bd5e28a027d77b8a3458"
integrity sha512-+X0mtJ3S0mmia1kTVi1eA3DAC+oWnT2A29g3CpkzcBPMT6vJm+hn/WiV9wPt/KXLHVmg5zev9mWqkPx7bHMovg==
dependencies:
is-retry-allowed "^1.1.0"
axios@^0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
dependencies:
follow-redirects "^1.3.0"
is-buffer "^1.1.5"
babel-extract-comments@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
@ -2416,7 +2449,17 @@ connect@^3.6.6:
parseurl "~1.3.2"
utils-merge "1.0.1"
consola@^2.0.0-1, consola@^2.3.0, consola@^2.3.2:
consola@^1.4.4:
version "1.4.5"
resolved "https://registry.yarnpkg.com/consola/-/consola-1.4.5.tgz#09732d07cb50af07332e54e0f42fafb92b962c4a"
integrity sha512-movqq3MbyXbSf7cG/x+EbO3VjKQVZPB/zeB5+lN1TuBYh9BWDemLQca9P+a4xpO4lXva9rz+Bd8XyqlH136Lww==
dependencies:
chalk "^2.3.2"
figures "^2.0.0"
lodash "^4.17.5"
std-env "^1.1.0"
consola@^2.0.0-1, consola@^2.3.0, consola@^2.3.2, consola@^2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/consola/-/consola-2.4.1.tgz#ad7209c306a2b6fa955b776f88f87bf92f491aa8"
integrity sha512-j6bIzpmyRGY2TDZVkAi3DM95CgC8hWx1A7AiJdyn4X5gls1bbpXIMpn3p8QsfaNu+ycNLXP+2DwKb47FXjw1ww==
@ -2873,7 +2916,7 @@ debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3:
dependencies:
ms "2.0.0"
debug@^3.1.0:
debug@^3.1.0, debug@^3.2.6:
version "3.2.6"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@ -3249,6 +3292,11 @@ etag@^1.8.1, etag@~1.8.1:
resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
eventemitter3@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.0.tgz#090b4d6cdbd645ed10bf750d4b5407942d7ba163"
integrity sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==
events@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
@ -3520,6 +3568,13 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
follow-redirects@^1.0.0, follow-redirects@^1.3.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
dependencies:
debug "^3.2.6"
for-each@^0.3.2:
version "0.3.3"
resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@ -4003,6 +4058,25 @@ http-errors@1.6.3, http-errors@~1.6.2, http-errors@~1.6.3:
setprototypeof "1.1.0"
statuses ">= 1.4.0 < 2"
http-proxy-middleware@^0.19.1:
version "0.19.1"
resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
dependencies:
http-proxy "^1.17.0"
is-glob "^4.0.0"
lodash "^4.17.11"
micromatch "^3.1.10"
http-proxy@^1.17.0:
version "1.17.0"
resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.17.0.tgz#7ad38494658f84605e2f6db4436df410f4e5be9a"
integrity sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==
dependencies:
eventemitter3 "^3.0.0"
follow-redirects "^1.0.0"
requires-port "^1.0.0"
http-signature@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@ -4215,7 +4289,7 @@ is-callable@^1.1.3, is-callable@^1.1.4:
resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
is-ci@^1.0.10:
is-ci@^1.0.10, is-ci@^1.1.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
@ -4402,7 +4476,7 @@ is-resolvable@^1.0.0:
resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
is-retry-allowed@^1.0.0:
is-retry-allowed@^1.0.0, is-retry-allowed@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
integrity sha1-EaBgVotnM5REAz0BJaYaINVk+zQ=
@ -6890,6 +6964,11 @@ require-main-filename@^1.0.1:
resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
requires-port@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
resolve-from@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
@ -7350,6 +7429,13 @@ statuses@~1.4.0:
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
integrity sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==
std-env@^1.1.0:
version "1.3.1"
resolved "https://registry.yarnpkg.com/std-env/-/std-env-1.3.1.tgz#4e1758412439e9ece1d437b1b098551911aa44ee"
integrity sha512-KI2F2pPJpd3lHjng+QLezu0eq+QDtXcv1um016mhOPAJFHKL+09ykK5PUBWta2pZDC8BVV0VPya08A15bUXSLQ==
dependencies:
is-ci "^1.1.0"
std-env@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/std-env/-/std-env-2.2.1.tgz#2ffa0fdc9e2263e0004c1211966e960948a40f6b"