refactor the index page
This commit is contained in:
Moritz Ruth
parent
c101d2b4d0
commit
0d834e2f57
9 changed files with 73 additions and 315 deletions
|
|
@ -1,26 +0,0 @@
|
||||||
// To enable support for browsers that do not support @media queries,
|
|
||||||
// (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
|
|
||||||
// Create a separate stylesheet served exclusively to these browsers,
|
|
||||||
// meaning @media queries will be rasterized, relying on the cascade itself
|
|
||||||
$mq-responsive: true;
|
|
||||||
|
|
||||||
// Name your breakpoints in a way that creates a ubiquitous language
|
|
||||||
// across team members. It will improve communication between
|
|
||||||
// stakeholders, designers, developers, and testers.
|
|
||||||
$mq-breakpoints: (
|
|
||||||
mobile: 320px,
|
|
||||||
tablet: 740px,
|
|
||||||
desktop: 980px,
|
|
||||||
wide: 1300px,
|
|
||||||
|
|
||||||
// Tweakpoints
|
|
||||||
mobileLandscape: 480px
|
|
||||||
);
|
|
||||||
|
|
||||||
// If you want to display the currently active breakpoint in the top
|
|
||||||
// right corner of your site during development, add the breakpoints
|
|
||||||
// to this list, ordered by width. For example: (mobile, tablet, desktop).
|
|
||||||
$mq-show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide);
|
|
||||||
|
|
||||||
// With webpack (and boilerplates such as create-react-app)
|
|
||||||
@import '~sass-mq';
|
|
||||||
|
|
@ -1,59 +1,27 @@
|
||||||
html, body, .full-width, #__nuxt, #__layout {
|
@import "./colors";
|
||||||
|
|
||||||
|
html, body, #__nuxt, #__layout {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.full-vp-width {
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body, .full-height, #__nuxt, #__layout {
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
overflow-x: hidden;
|
||||||
|
|
||||||
.full-vp-height {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
div, section {
|
|
||||||
width: inherit;
|
|
||||||
height: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Raleway", sans-serif;
|
font-family: "Raleway", sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
word-spacing: 1px;
|
|
||||||
|
|
||||||
position: relative;
|
background-color: $c-background;
|
||||||
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*:before,
|
*::before,
|
||||||
*:after {
|
*::after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
padding: 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 {
|
a {
|
||||||
color: #25acd7;
|
color: $c-link;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,36 +10,35 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from "vuex";
|
|
||||||
import _debounce from "lodash.debounce";
|
import _debounce from "lodash.debounce";
|
||||||
|
|
||||||
const debounceLogoText = _debounce((self, newValue) => {
|
const debounceLogoText = _debounce((self, newValue) => {
|
||||||
self.debouncedLogoText = newValue;
|
self.debouncedLogoText = newValue;
|
||||||
}, 100);
|
}, 200);
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Logo",
|
name: "CtexxxLogo",
|
||||||
created() {
|
created() {
|
||||||
this.debouncedLogoText = this.$store.state.logoText;
|
this.debouncedLogoText = this.text || "ctexxx";
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
text: String
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
debouncedLogoText: ""
|
debouncedLogoText: ""
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
...mapState(["logoText"])
|
|
||||||
},
|
|
||||||
watch: {
|
watch: {
|
||||||
logoText(newValue) {
|
text(newValue) {
|
||||||
debounceLogoText(this, newValue);
|
debounceLogoText(this, newValue || "ctexxx");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "~@/assets/_mq.scss";
|
@import "~@/assets/_responsive";
|
||||||
|
|
||||||
.slide-vertical-enter-active {
|
.slide-vertical-enter-active {
|
||||||
transition: all 0.5s ease-out;
|
transition: all 0.5s ease-out;
|
||||||
|
|
@ -65,6 +64,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
|
|
||||||
|
|
@ -76,14 +77,12 @@
|
||||||
color: #c34545;
|
color: #c34545;
|
||||||
text-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
|
text-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
@include mq($from: tablet) {
|
@include desktop {
|
||||||
font-size: 12em;
|
font-size: 12em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .underline {
|
& > .underline {
|
||||||
transition: width 1s ease-in-out;
|
|
||||||
|
|
||||||
transform: translateY(-0.7em);
|
transform: translateY(-0.7em);
|
||||||
|
|
||||||
height: 3px;
|
height: 3px;
|
||||||
|
|
@ -91,11 +90,13 @@
|
||||||
background: white;
|
background: white;
|
||||||
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.75);
|
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.75);
|
||||||
|
|
||||||
@include mq($from: tablet) {
|
@include desktop {
|
||||||
transform: translateY(-2em);
|
transform: translateY(-2em);
|
||||||
|
|
||||||
height: 5px;
|
height: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="project horizontally-centered">
|
|
||||||
<h2>{{ title }}</h2>
|
|
||||||
<p>
|
|
||||||
<template v-for="(name, index) in Object.keys(links)">
|
|
||||||
<a :href="links[name]" rel="noopener">
|
|
||||||
{{ name }}
|
|
||||||
</a>
|
|
||||||
<template v-if="index + 1 < Object.keys(links).length"> | </template>
|
|
||||||
</template>
|
|
||||||
</p>
|
|
||||||
<div class="line"></div>
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "Project",
|
|
||||||
props: {
|
|
||||||
title: String,
|
|
||||||
links: Object
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
@import "~@/assets/_mq.scss";
|
|
||||||
|
|
||||||
.project {
|
|
||||||
width: 75vw;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 40px;
|
|
||||||
|
|
||||||
@include mq($from: tablet) {
|
|
||||||
font-size: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line {
|
|
||||||
width: 150px;
|
|
||||||
height: 1px;
|
|
||||||
background-color: white;
|
|
||||||
margin: 5px auto 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -1,8 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank"
|
<a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank">
|
||||||
@mouseenter="$store.commit('setLogoText', username)"
|
|
||||||
@mouseleave="$store.commit('resetLogoText', username)"
|
|
||||||
>
|
|
||||||
<div class="box" :style="{'background-color': '#' + simpleIcon.hex}">
|
<div class="box" :style="{'background-color': '#' + simpleIcon.hex}">
|
||||||
<div class="icon" v-html="simpleIcon.svg" :class="{inverted: invert}">
|
<div class="icon" v-html="simpleIcon.svg" :class="{inverted: invert}">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -34,7 +31,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "~@/assets/_mq";
|
@import "~@/assets/_responsive";
|
||||||
|
|
||||||
#root {
|
#root {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -44,7 +41,7 @@
|
||||||
height: 50px;
|
height: 50px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|
||||||
@include mq($from: tablet) {
|
@include desktop {
|
||||||
height: 70px;
|
height: 70px;
|
||||||
width: 70px;
|
width: 70px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="full-height full-width">
|
|
||||||
<nuxt/>
|
<nuxt/>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
||||||
118
pages/index.vue
118
pages/index.vue
|
|
@ -1,98 +1,62 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="index">
|
<div id="index">
|
||||||
<section class="section section-hero vertically-centered-container">
|
<CtexxxLogo :text="logoText"/>
|
||||||
<div class="vertically-centered">
|
|
||||||
<Logo/>
|
|
||||||
<div class="horizontally-centered">
|
<div class="horizontally-centered">
|
||||||
<SocialIcon name="github" username="ctexxx" invert/>
|
<SocialIcon
|
||||||
<SocialIcon name="twitter" username="cte3x" invert/>
|
v-for="account in socialMedia" :key="account.name"
|
||||||
<SocialIcon name="instagram" username="cte3x" invert/>
|
:name="account.name" :username="account.username" :invert="!!account.invertLogoColor"
|
||||||
<SocialIcon name="keybase" username="ctexxx"/>
|
@mouseover.native="logoText = account.username" @mouseleave.native="logoText = null"
|
||||||
|
/>
|
||||||
</div>
|
</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">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Logo from "@/components/Logo";
|
import CtexxxLogo from "@/components/CtexxxLogo";
|
||||||
import SocialIcon from "@/components/SocialIcon";
|
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 {
|
export default {
|
||||||
name: "index",
|
name: "index",
|
||||||
components: { Project, ScrollDownArrow, SocialIcon, Logo }
|
components: { SocialIcon, CtexxxLogo },
|
||||||
|
data: () => ({
|
||||||
|
logoText: "ctexxx",
|
||||||
|
socialMedia
|
||||||
|
})
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "~@/assets/_mq.scss";
|
@import "~@/assets/_responsive.scss";
|
||||||
|
|
||||||
#index {
|
#index {
|
||||||
scroll-snap-type: y mandatory;
|
height: 100%;
|
||||||
|
|
||||||
overflow-y: scroll;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
.section {
|
justify-content: center;
|
||||||
position: relative;
|
align-content: center;
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,7 @@
|
||||||
export const state = () => ({
|
export const state = () => ({
|
||||||
logoText: "ctexxx"
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const mutations = {
|
export const mutations = {
|
||||||
setLogoText(state, value) {
|
|
||||||
state.logoText = value;
|
|
||||||
},
|
|
||||||
resetLogoText(state) {
|
|
||||||
state.logoText = "ctexxx";
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue