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

update to use new logo

Browse source
This commit is contained in:
Moritz Ruth 2019-05-21 19:37:25 +02:00
parent 13fcb1da79
commit b109cc2031
10 changed files with 102 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/global.scss
View file

@ -12,7 +12,7 @@ body {
font-family: "Raleway", sans-serif;
font-size: 16px;
background-color: $c-background;
background: $c-background;
color: $c-text;
}

1
assets/images/logo.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 1024 1024" width="1024px" height="1024px"><defs><clipPath id="_clipPath_d2bOskswmA0mVXOx8R26QsMclQ9LofoO"><rect width="1024" height="1024"/></clipPath></defs><g clip-path="url(#_clipPath_d2bOskswmA0mVXOx8R26QsMclQ9LofoO)"><rect width="1024" height="1024" style="fill:rgb(31,244,255)" fill-opacity="0"/><g filter="url(#KrQT84F6yOHsypylGNaoM84QgPmWTkvR)"><path d=" M 551.098 917.387 L 496.021 917.387 L 387.227 781.092 L 387.227 781.092 Q 368.868 782.91 349.15 782.91 L 349.15 782.91 L 221.317 782.91 L 221.317 917.387 L 171 917.387 L 171 493.36 L 349.15 493.36 L 349.15 493.36 Q 440.264 493.36 491.941 532.128 L 491.941 532.128 L 491.941 532.128 Q 543.618 570.896 543.618 638.74 L 543.618 638.74 L 543.618 638.74 Q 543.618 688.412 515.4 722.637 L 515.4 722.637 L 515.4 722.637 Q 487.181 756.862 434.825 772.006 L 434.825 772.006 L 551.098 917.387 Z M 347.79 744.747 L 347.79 744.747 Q 418.505 744.747 455.903 716.883 L 455.903 716.883 L 455.903 716.883 Q 493.301 689.018 493.301 638.74 L 493.301 638.74 L 493.301 638.74 Q 493.301 587.251 455.903 559.69 L 455.903 559.69 L 455.903 559.69 Q 418.505 532.128 347.79 532.128 L 347.79 532.128 L 221.317 532.128 L 221.317 744.747 L 347.79 744.747 Z " fill-rule="evenodd" fill="rgb(255,255,255)"/><path d=" M 680.29 106.613 L 680.29 106.613 Q 761.885 106.613 807.443 148.41 L 807.443 148.41 L 807.443 148.41 Q 853 190.207 853 269.561 L 853 269.561 L 853 534.275 L 803.363 534.275 L 803.363 270.772 L 803.363 270.772 Q 803.363 208.985 768.345 177.789 L 768.345 177.789 L 768.345 177.789 Q 733.327 146.593 672.811 146.593 L 672.811 146.593 L 672.811 146.593 Q 608.894 146.593 572.856 179.606 L 572.856 179.606 L 572.856 179.606 Q 536.819 212.62 536.819 280.464 L 536.819 280.464 L 536.819 603.436 L 487.181 534.275 L 487.181 270.772 L 487.181 270.772 Q 487.181 208.985 453.183 177.789 L 453.183 177.789 L 453.183 177.789 Q 419.185 146.593 358.669 146.593 L 358.669 146.593 L 358.669 146.593 Q 294.073 146.593 257.695 179.606 L 257.695 179.606 L 257.695 179.606 Q 221.317 212.62 221.317 280.464 L 221.317 280.464 L 221.317 534.275 L 171 534.275 L 171 110.247 L 219.277 110.247 L 219.277 181.121 L 219.277 181.121 Q 238.996 144.775 277.754 125.694 L 277.754 125.694 L 277.754 125.694 Q 316.512 106.613 369.548 106.613 L 369.548 106.613 L 369.548 106.613 Q 425.305 106.613 465.083 127.511 L 465.083 127.511 L 465.083 127.511 Q 504.86 148.41 522.539 185.967 L 522.539 185.967 L 522.539 185.967 Q 542.938 147.198 584.076 126.906 L 584.076 126.906 L 584.076 126.906 Q 625.213 106.613 680.29 106.613 L 680.29 106.613 Z " fill="rgb(255,255,255)"/></g><defs><filter id="KrQT84F6yOHsypylGNaoM84QgPmWTkvR" x="-200%" y="-200%" width="400%" height="400%" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"><feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" stdDeviation="21.46804531419514"/><feOffset xmlns="http://www.w3.org/2000/svg" dx="40" dy="40" result="pf_100_offsetBlur"/><feFlood xmlns="http://www.w3.org/2000/svg" flood-color="#000000" flood-opacity="0.4"/><feComposite xmlns="http://www.w3.org/2000/svg" in2="pf_100_offsetBlur" operator="in" result="pf_100_dropShadow"/><feBlend xmlns="http://www.w3.org/2000/svg" in="SourceGraphic" in2="pf_100_dropShadow" mode="normal"/></filter></defs></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

109
components/CtexxxLogo.vue
View file

@ -1,109 +0,0 @@
<template>
<div class="fade-in">
<transition name="slide-vertical" mode="out-in">
<div class="logo" :key="debouncedLogoText">
<span class="text">{{ debouncedLogoText }}</span>
<div class="underline full-width"></div>
</div>
</transition>
</div>
</template>
<script>
import _debounce from "lodash.debounce";
const debounceLogoText = _debounce((self, newValue) => {
self.debouncedLogoText = newValue;
}, 100);
export default {
name: "CtexxxLogo",
created() {
this.debouncedLogoText = this.text || "ctexxx";
},
props: {
text: String
},
data() {
return {
debouncedLogoText: ""
}
},
watch: {
text(newValue) {
debounceLogoText(this, newValue || "ctexxx");
}
}
};
</script>
<style scoped lang="scss">
@import "~@/assets/css/_responsive";
@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates');
.slide-vertical-enter-active {
transition: all 0.3s ease-out;
}
.slide-vertical-leave-active {
transition: all 0.3s ease-in;
}
.slide-vertical-enter-to {
opacity: 1;
}
.slide-vertical-enter, .slide-vertical-leave-to {
opacity: 0;
}
.fade-in {
animation: fadeIn 4s ease-out;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.logo {
user-select: none;
margin: 0 auto;
width: fit-content;
& > .text {
font-family: 'Montserrat Alternates', sans-serif;
font-size: 5em;
color: #c34545;
text-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
@include desktop {
font-size: 12em;
}
}
& > .underline {
transform: translateY(-0.7em);
height: 3px;
background: white;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.75);
@include desktop {
transform: translateY(-2em);
height: 5px;
}
margin: 0 auto;
}
}
</style>

72
components/MyLogo.vue Normal file
View file

@ -0,0 +1,72 @@
<template>
<div class="logo">
<img src="@/assets/images/logo.svg" draggable="false"/>
<transition name="fade" mode="out-in">
<span class="name" :key="debouncedName">{{ debouncedName }}</span>
</transition>
</div>
</template>
<style scoped lang="scss">
.fade-enter-active {
transition: all 0.3s ease-out;
}
.fade-leave-active {
transition: all 0.3s ease-in;
}
.fade-enter-to {
opacity: 1;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.logo {
height: 40%;
user-select: none;
pointer-events: none;
& > img {
height: 90%;
display: block;
margin: 0 auto;
}
.name {
height: 10%;
display: block;
text-align: center;
font-size: 1.5rem;
font-family: "Raleway", monospace;
letter-spacing: 4px;
word-spacing: 6px;
}
padding-bottom: 20px;
}
</style>
<script>
import _debounce from "lodash.debounce";
export default {
name: "MyLogo",
props: {
name: String
},
data() {
return {
debouncedName: this.name
};
},
watch: {
name: _debounce(function(value) {
this.debouncedName = value;
}, 100)
}
};
</script>

12
components/SocialIcon.vue
View file

@ -9,7 +9,7 @@
</template>
<script>
const requireIcon = require.context("simple-icons/icons/", false, /(instagram|github|twitter|keybase)\.js/);
const requireIcon = require.context("simple-icons/icons/", false, /(instagram|github|twitter|keybase|npm)\.js/);
export default {
name: "SocialIcon",
@ -42,8 +42,7 @@
width: 50px;
&:focus {
outline-style: dashed;
outline-width: 2px;
outline: rgb(255, 169, 8) dashed 2px;
}
@include desktop {
@ -57,7 +56,8 @@
height: 100%;
width: 100%;
transition: 0.5s ease-out;
transition: box-shadow 0.2s linear;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
.icon {
height: 100%;
@ -92,6 +92,10 @@
.title {
opacity: 1;
}
.box {
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.5);
}
}
}
</style>

31
pages/index.vue
View file

@ -1,11 +1,11 @@
<template>
<main>
<CtexxxLogo :text="logoText"/>
<MyLogo :name="name || 'Moritz Ruth'"/>
<div class="horizontally-centered">
<SocialIcon
v-for="account in socialMedia" :key="account.name"
v-for="account in $options.socialMedia" :key="account.name"
:name="account.name" :username="account.username" :invert="!!account.invertLogoColor"
@mouseover.native="logoText = account.username" @mouseleave.native="logoText = null"
@mouseover.native="name = account.username" @mouseleave.native="name = null"
/>
</div>
<div class="link-section">
@ -16,38 +16,43 @@
</template>
<script>
import CtexxxLogo from "@/components/CtexxxLogo";
import SocialIcon from "@/components/SocialIcon";
import MyLogo from "@/components/MyLogo";
const socialMedia = [
{
name: "github",
username: "ctexxx",
username: "moritzruth",
invertLogoColor: true
},
{
name: "twitter",
username: "cte3x",
username: "moritzruth_dev",
invertLogoColor: true
},
{
name: "instagram",
username: "cte3x",
username: "moritzruth_dev",
invertLogoColor: true
},
{
name: "keybase",
username: "ctexxx"
username: "moritzruth"
},
{
name: "npm",
username: "moritzruth",
invertLogoColor: true
}
];
export default {
name: "index",
components: { SocialIcon, CtexxxLogo },
components: { MyLogo, SocialIcon },
data: () => ({
logoText: "ctexxx",
socialMedia
})
name: null,
}),
socialMedia
};
</script>
@ -64,6 +69,8 @@
justify-content: center;
align-content: center;
background: linear-gradient(135deg, rgba(31,244,255,1) 0%, rgba(91,100,166,1) 100%);
.link-section {
position: absolute;
bottom: 30px;

3
pages/uses.vue
View file

@ -19,10 +19,9 @@
Originally bought for gaming, I now only use it for coding.
</ImageCard>
<ImageCard
title="Ubuntu 18.04"
title="Ubuntu 19.04"
image="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png"
type="OS"
link="https://www.ubuntu.com/download/desktop"
>
It just works.
</ImageCard>

BIN
static/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 390 KiB

7
store/index.js
View file

@ -1,7 +0,0 @@
export const state = () => ({
});
export const mutations = {
};