Use new logo
This commit is contained in:
parent
fb80854230
commit
ae828752b5
4 changed files with 66 additions and 136 deletions
30
assets/icons/logo.svg
Normal file
30
assets/icons/logo.svg
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xml:space="preserve"
|
||||||
|
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
|
||||||
|
>
|
||||||
|
<g transform="matrix(1,0,0,1,-545.224,-0.534483)">
|
||||||
|
<g id="Black" transform="matrix(1,0,0,1.00392,545.224,0.534483)">
|
||||||
|
<rect x="0" y="0" width="512" height="510" style="fill:none;"/>
|
||||||
|
<g transform="matrix(1.27586,0,0,1.27586,-53.8276,-82.3151)">
|
||||||
|
<g transform="matrix(1,0,0,1,-42.5,4.98047)">
|
||||||
|
<g transform="matrix(0.596154,-2.4259e-18,9.91409e-19,1.0791,243.308,-21.582)">
|
||||||
|
<path d="M145,200L210,320L80,320L145,200ZM97.099,312.986L192.901,312.986L145,224.554L97.099,312.986Z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(-0.596154,7.51485e-17,-1.33661e-16,-1.0791,470.192,539.551)">
|
||||||
|
<path d="M145,200L210,320L80,320L145,200ZM192.901,312.986L145,224.554L97.099,312.986L192.901,312.986Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(0.898337,0,0,1,-6.61642,5.81503)">
|
||||||
|
<g transform="matrix(6.12323e-17,-0.996094,0.541667,3.3038e-17,81.6667,403.418)">
|
||||||
|
<path d="M145,200L210,320L80,320L145,200ZM145,220.991L99.829,304.384L190.171,304.384L145,220.991Z"/>
|
||||||
|
</g>
|
||||||
|
<g transform="matrix(6.12323e-17,0.996094,-0.541667,3.3038e-17,298.333,114.551)">
|
||||||
|
<path d="M145,200L210,320L80,320L145,200ZM190.171,304.384L145,220.991L99.829,304.384L190.171,304.384Z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -1,129 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="animated-logo">
|
|
||||||
<svg class="animated-logo__svg" xmlns="http://www.w3.org/2000/svg" viewBox="76.75 182.661 358.5 146.679">
|
|
||||||
<path
|
|
||||||
class="animated-logo__m1"
|
|
||||||
d=" M 121.75 182.749 L 166.75 329.339 L 76.75 329.339 L 121.75 182.749 Z "
|
|
||||||
fill-rule="evenodd"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
class="animated-logo__m2"
|
|
||||||
d=" M 206.75 182.749 L 251.75 329.339 L 161.75 329.339 L 206.75 182.749 Z "
|
|
||||||
fill-rule="evenodd"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
class="animated-logo__r1"
|
|
||||||
d=" M 327.25 182.705 L 372.25 329.295 L 282.25 329.295 L 327.25 182.705 Z "
|
|
||||||
fill-rule="evenodd"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
class="animated-logo__r2"
|
|
||||||
d=" M 390.537 329.339 L 345.25 182.837 L 435.25 182.661 L 390.537 329.339 Z "
|
|
||||||
fill-rule="evenodd"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<div class="animated-logo__name">
|
|
||||||
Moritz Ruth
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
@use "~@/assets/styles/colors";
|
|
||||||
|
|
||||||
$scale-up-duration: 800ms;
|
|
||||||
$slide-delay: 200ms;
|
|
||||||
$slide-duration: 800ms;
|
|
||||||
$fade-duration: 400ms;
|
|
||||||
$fade-delay: $slide-delay + 300ms;
|
|
||||||
$slide-length: 37.5%;
|
|
||||||
$fade-name-delay: $fade-delay;
|
|
||||||
$fade-name-duration: 300ms;
|
|
||||||
|
|
||||||
.animated-logo {
|
|
||||||
width: 300px;
|
|
||||||
max-width: 60vw;
|
|
||||||
padding: 40px 40px 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated-logo__svg {
|
|
||||||
width: 100%;
|
|
||||||
color: colors.$background-c;
|
|
||||||
|
|
||||||
margin-bottom: 20px;
|
|
||||||
animation: scaleUp $scale-up-duration ease-out both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated-logo__m1, .animated-logo__r2 {
|
|
||||||
animation: slideFromRight $slide-duration $slide-delay ease both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated-logo__r2 {
|
|
||||||
animation-name: slideFromLeft;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated-logo__m2, .animated-logo__r1 {
|
|
||||||
animation: fadeIn $fade-duration $fade-delay ease both;
|
|
||||||
transform: translateX(5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated-logo__m2 {
|
|
||||||
animation-delay: $fade-delay + 100ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated-logo__name {
|
|
||||||
font-size: 2rem;
|
|
||||||
animation: fadeIn $fade-name-duration $fade-name-delay ease both;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scaleUp {
|
|
||||||
from {
|
|
||||||
transform: scale(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideFromRight {
|
|
||||||
from {
|
|
||||||
transform: translateX(#{$slide-length});
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideFromLeft {
|
|
||||||
from {
|
|
||||||
transform: translateX(#{$slide-length * -1});
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "AnimatedLogo"
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -70,8 +70,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 30px 0 20px;
|
padding: 0 30px 0 20px;
|
||||||
|
|
||||||
background: colors.$background;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation-bar__toggle {
|
.navigation-bar__toggle {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="index-page">
|
<div class="index-page">
|
||||||
<canvas ref="canvas" class="index-page__background"/>
|
<div class="index-page__background">
|
||||||
|
<canvas ref="canvas"/>
|
||||||
|
<div class="index-page__background-vignette"></div>
|
||||||
|
</div>
|
||||||
<main class="index-page__content">
|
<main class="index-page__content">
|
||||||
<AnimatedLogo/>
|
<Logo class="index-page__logo"/>
|
||||||
|
<span class="index-page__name">Moritz Ruth</span>
|
||||||
<div class="index-page__socials">
|
<div class="index-page__socials">
|
||||||
<a
|
<a
|
||||||
class="index-page__social"
|
class="index-page__social"
|
||||||
|
|
@ -49,6 +53,17 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page__background-vignette {
|
||||||
|
background: radial-gradient(transparent, colors.$background 80%);
|
||||||
|
position: absolute;
|
||||||
|
top: -100px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: -100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-page__content {
|
.index-page__content {
|
||||||
|
|
@ -61,6 +76,22 @@
|
||||||
height: calc(90vh - var(--navigation-bar-height));
|
height: calc(90vh - var(--navigation-bar-height));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.index-page__logo {
|
||||||
|
height: 400px;
|
||||||
|
margin: -120px 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
left: 12px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-page__name {
|
||||||
|
font-size: 2.4rem;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.index-page__socials {
|
.index-page__socials {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -109,21 +140,21 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ShapedCanvas } from "shaped.js"
|
import { ShapedCanvas } from "shaped.js"
|
||||||
import AnimatedLogo from "@/components/AnimatedLogo"
|
|
||||||
import { footerItems } from "assets/js/footer-items"
|
import { footerItems } from "assets/js/footer-items"
|
||||||
import InstagramIcon from "@/assets/icons/instagram.svg"
|
import InstagramIcon from "@/assets/icons/instagram.svg"
|
||||||
import TwitterIcon from "@/assets/icons/twitter.svg"
|
import TwitterIcon from "@/assets/icons/twitter.svg"
|
||||||
import NPMIcon from "@/assets/icons/npm.svg"
|
import NPMIcon from "@/assets/icons/npm.svg"
|
||||||
import GitHubIcon from "@/assets/icons/github.svg"
|
import GitHubIcon from "@/assets/icons/github.svg"
|
||||||
import EmailIcon from "@/assets/icons/email.svg"
|
import EmailIcon from "@/assets/icons/email.svg"
|
||||||
|
import Logo from "@/assets/icons/logo.svg"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "IndexPage",
|
name: "IndexPage",
|
||||||
components: { AnimatedLogo, InstagramIcon, TwitterIcon, NPMIcon, GitHubIcon, EmailIcon },
|
components: { Logo, InstagramIcon, TwitterIcon, NPMIcon, GitHubIcon, EmailIcon },
|
||||||
mounted() {
|
mounted() {
|
||||||
const shaped = new ShapedCanvas(this.$refs.canvas, {
|
const shaped = new ShapedCanvas(this.$refs.canvas, {
|
||||||
useWindowSize: true,
|
useWindowSize: true,
|
||||||
colors: ["#BB2081", "#14AAD8"],
|
colors: ["#d21b8d", "#14AAD8"],
|
||||||
minCount: 8,
|
minCount: 8,
|
||||||
probability: 1 / 30000,
|
probability: 1 / 30000,
|
||||||
height: 1,
|
height: 1,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue