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;
|
||||
justify-content: space-between;
|
||||
padding: 0 30px 0 20px;
|
||||
|
||||
background: colors.$background;
|
||||
}
|
||||
|
||||
.navigation-bar__toggle {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<template>
|
||||
<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">
|
||||
<AnimatedLogo/>
|
||||
<Logo class="index-page__logo"/>
|
||||
<span class="index-page__name">Moritz Ruth</span>
|
||||
<div class="index-page__socials">
|
||||
<a
|
||||
class="index-page__social"
|
||||
|
|
@ -49,6 +53,17 @@
|
|||
left: 0;
|
||||
right: 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 {
|
||||
|
|
@ -61,6 +76,22 @@
|
|||
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 {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
|
|
@ -109,21 +140,21 @@
|
|||
|
||||
<script>
|
||||
import { ShapedCanvas } from "shaped.js"
|
||||
import AnimatedLogo from "@/components/AnimatedLogo"
|
||||
import { footerItems } from "assets/js/footer-items"
|
||||
import InstagramIcon from "@/assets/icons/instagram.svg"
|
||||
import TwitterIcon from "@/assets/icons/twitter.svg"
|
||||
import NPMIcon from "@/assets/icons/npm.svg"
|
||||
import GitHubIcon from "@/assets/icons/github.svg"
|
||||
import EmailIcon from "@/assets/icons/email.svg"
|
||||
import Logo from "@/assets/icons/logo.svg"
|
||||
|
||||
export default {
|
||||
name: "IndexPage",
|
||||
components: { AnimatedLogo, InstagramIcon, TwitterIcon, NPMIcon, GitHubIcon, EmailIcon },
|
||||
components: { Logo, InstagramIcon, TwitterIcon, NPMIcon, GitHubIcon, EmailIcon },
|
||||
mounted() {
|
||||
const shaped = new ShapedCanvas(this.$refs.canvas, {
|
||||
useWindowSize: true,
|
||||
colors: ["#BB2081", "#14AAD8"],
|
||||
colors: ["#d21b8d", "#14AAD8"],
|
||||
minCount: 8,
|
||||
probability: 1 / 30000,
|
||||
height: 1,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue