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%;
|
||||
}
|
||||
|
||||
.full-vp-width {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
html, body, .full-height, #__nuxt, #__layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.full-vp-height {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
div, section {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Raleway", sans-serif;
|
||||
font-size: 16px;
|
||||
word-spacing: 1px;
|
||||
|
||||
position: relative;
|
||||
|
||||
user-select: none;
|
||||
background-color: $c-background;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
*::before,
|
||||
*::after {
|
||||
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;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #25acd7;
|
||||
color: $c-link;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,36 +10,35 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
import _debounce from "lodash.debounce";
|
||||
|
||||
const debounceLogoText = _debounce((self, newValue) => {
|
||||
self.debouncedLogoText = newValue;
|
||||
}, 100);
|
||||
}, 200);
|
||||
|
||||
export default {
|
||||
name: "Logo",
|
||||
name: "CtexxxLogo",
|
||||
created() {
|
||||
this.debouncedLogoText = this.$store.state.logoText;
|
||||
this.debouncedLogoText = this.text || "ctexxx";
|
||||
},
|
||||
props: {
|
||||
text: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
debouncedLogoText: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(["logoText"])
|
||||
},
|
||||
watch: {
|
||||
logoText(newValue) {
|
||||
debounceLogoText(this, newValue);
|
||||
text(newValue) {
|
||||
debounceLogoText(this, newValue || "ctexxx");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "~@/assets/_mq.scss";
|
||||
@import "~@/assets/_responsive";
|
||||
|
||||
.slide-vertical-enter-active {
|
||||
transition: all 0.5s ease-out;
|
||||
|
|
@ -65,6 +64,8 @@
|
|||
}
|
||||
|
||||
.logo {
|
||||
user-select: none;
|
||||
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
|
||||
|
|
@ -76,14 +77,12 @@
|
|||
color: #c34545;
|
||||
text-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include desktop {
|
||||
font-size: 12em;
|
||||
}
|
||||
}
|
||||
|
||||
& > .underline {
|
||||
transition: width 1s ease-in-out;
|
||||
|
||||
transform: translateY(-0.7em);
|
||||
|
||||
height: 3px;
|
||||
|
|
@ -91,11 +90,13 @@
|
|||
background: white;
|
||||
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.75);
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include desktop {
|
||||
transform: translateY(-2em);
|
||||
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
<a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank"
|
||||
@mouseenter="$store.commit('setLogoText', username)"
|
||||
@mouseleave="$store.commit('resetLogoText', username)"
|
||||
>
|
||||
<a id="root" rel="noopener" :href="`https://go.ctexxx.dev/${name}`" target="_blank">
|
||||
<div class="box" :style="{'background-color': '#' + simpleIcon.hex}">
|
||||
<div class="icon" v-html="simpleIcon.svg" :class="{inverted: invert}">
|
||||
</div>
|
||||
|
|
@ -34,7 +31,7 @@
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "~@/assets/_mq";
|
||||
@import "~@/assets/_responsive";
|
||||
|
||||
#root {
|
||||
display: inline-block;
|
||||
|
|
@ -44,7 +41,7 @@
|
|||
height: 50px;
|
||||
width: 50px;
|
||||
|
||||
@include mq($from: tablet) {
|
||||
@include desktop {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div class="full-height full-width">
|
||||
<nuxt/>
|
||||
</div>
|
||||
<nuxt/>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
122
pages/index.vue
122
pages/index.vue
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
export const state = () => ({
|
||||
logoText: "ctexxx"
|
||||
|
||||
});
|
||||
|
||||
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