design changes
This commit is contained in:
parent
21fc8bee9e
commit
70230f477c
7 changed files with 67 additions and 122 deletions
|
|
@ -60,7 +60,7 @@
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
labelKey: "footer.legal",
|
labelKey: "footer.legal",
|
||||||
to: "/legal-notice"
|
to: "/impressum"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<template>
|
|
||||||
<div ref="wrapper" class="select-none">
|
|
||||||
<slot :setTrigger="setTrigger"/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { ref, watchEffect } from "vue"
|
|
||||||
import KUTE from "kute.js"
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "ClickToBounce",
|
|
||||||
setup() {
|
|
||||||
const trigger = ref(null)
|
|
||||||
const wrapper = ref(null)
|
|
||||||
|
|
||||||
let current = null
|
|
||||||
|
|
||||||
watchEffect(onInvalidate => {
|
|
||||||
if (trigger.value !== null) {
|
|
||||||
const listener = () => {
|
|
||||||
current?.stop()
|
|
||||||
|
|
||||||
current = KUTE.to(wrapper.value, { scale: 0.9 }, {
|
|
||||||
duration: 100,
|
|
||||||
easing: "easingElasticInOut",
|
|
||||||
onComplete() {
|
|
||||||
current = KUTE.to(wrapper.value, { scale: 1 }, {
|
|
||||||
duration: 100,
|
|
||||||
easing: "easingElasticInOut",
|
|
||||||
onComplete() {
|
|
||||||
current = null
|
|
||||||
}
|
|
||||||
}).start()
|
|
||||||
}
|
|
||||||
}).start()
|
|
||||||
}
|
|
||||||
|
|
||||||
trigger.value.addEventListener("click", listener, { passive: true })
|
|
||||||
|
|
||||||
onInvalidate(() => {
|
|
||||||
trigger.value.removeEventListener("click", listener)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
setTrigger(element) {
|
|
||||||
trigger.value = element
|
|
||||||
},
|
|
||||||
wrapper
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<nav
|
<nav
|
||||||
class="fixed sm:sticky top-0 z-100 w-full h-screen sm:h-20 backdrop-filter bg-white transition duration-200 _blur-backdrop-or-hide"
|
class="fixed sm:sticky top-0 z-100 w-full h-screen sm:h-20 backdrop-filter bg-white transition duration-400 _blur-backdrop-or-hide"
|
||||||
:class="[scrolled && 'shadow-lg', active ? 'opacity-100' : '-sm:opacity-0 -sm:pointer-events-none']"
|
:class="[scrolled && 'shadow-lg', active ? 'opacity-100' : '-sm:opacity-0 -sm:pointer-events-none']"
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-between h-full max-w-1200px mx-auto flex-grow -sm:flex-col px-6 sm:px-10">
|
<div class="flex items-center justify-between h-full max-w-1200px mx-auto flex-grow -sm:flex-col px-6 sm:px-10">
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
:size="80"
|
:size="80"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<router-link class="uppercase font-special relative top-1 -sm:mt-20" to="/" @click="active = false">
|
<router-link class="uppercase font-special relative top-1 -sm:mt-20 transition duration-600 _home-link" to="/" @click="active = false">
|
||||||
Moritz Ruth
|
Moritz Ruth
|
||||||
</router-link>
|
</router-link>
|
||||||
<div class="flex -sm:flex-col -sm:mb-30vh justify-end items-center sm:space-x-20 -sm:space-y-10 relative">
|
<div class="flex -sm:flex-col -sm:mb-30vh justify-end items-center sm:space-x-20 -sm:space-y-10 relative">
|
||||||
|
|
@ -58,12 +58,19 @@
|
||||||
<style scoped>
|
<style scoped>
|
||||||
._blur-backdrop-or-hide {
|
._blur-backdrop-or-hide {
|
||||||
@apply bg-opacity-90;
|
@apply bg-opacity-90;
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (backdrop-filter: blur(20px)) {
|
@supports (backdrop-filter: blur(5px)) {
|
||||||
._blur-backdrop-or-hide {
|
._blur-backdrop-or-hide {
|
||||||
@apply bg-opacity-40;
|
@apply bg-opacity-70;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@screen sm {
|
||||||
|
._home-link.router-link-active {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -9,14 +9,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
@apply font-bold text-2xl sm:text-4xl text-blue-700 mt-8;
|
@apply font-bold text-2xl sm:text-4xl text-gray-600 mt-8;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol {
|
ol {
|
||||||
@apply list-decimal list-inside space-y-2;
|
@apply list-decimal list-inside space-y-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
address, p, ol {
|
:where(address, p, ol) {
|
||||||
@apply not-italic text-lg max-w-240;
|
@apply not-italic text-lg max-w-240;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<main class="text-2xl sm:text-3xl pt-26">
|
<main class="text-2xl sm:text-3xl pt-26">
|
||||||
<h1 class="font-bold text-3xl sm:text-5xl text-gray-900 mb-10">{{ t("heading") }}</h1>
|
<h1 class="font-bold text-3xl sm:text-5xl text-gray-900 mb-10">{{ t("heading") }}</h1>
|
||||||
<!-- <p>-->
|
<p>
|
||||||
<!-- {{ t("you_want") }}-->
|
{{ t("you_want") }}
|
||||||
<!-- </p>-->
|
</p>
|
||||||
<!-- <ul class="asterisk-list mt-5">-->
|
<ul class="asterisk-list mt-5">
|
||||||
<!-- <li>{{ t("develop_website") }}</li>-->
|
<li>{{ t("develop_website") }}</li>
|
||||||
<!-- <li>{{ t("program_tool") }}</li>-->
|
<li>{{ t("design_print") }}</li>
|
||||||
<!-- <li>{{ t("design_print") }}</li>-->
|
<li>{{ t("program_tool") }}</li>
|
||||||
<!-- <li>{{ t("help_server") }}</li>-->
|
<li>{{ t("else") }}</li>
|
||||||
<!-- </ul>-->
|
</ul>
|
||||||
<p class="mt-10 mb-10">
|
<p class="mt-10 mb-10">
|
||||||
{{ t("twitter") }}
|
{{ t("twitter") }}
|
||||||
<a
|
<a
|
||||||
|
|
@ -22,27 +22,14 @@
|
||||||
</a>
|
</a>
|
||||||
{{ t("or_email") }}
|
{{ t("or_email") }}
|
||||||
</p>
|
</p>
|
||||||
<div class="relative text-4xl group inline-block">
|
<p>
|
||||||
<BlurredBlobCanvas
|
<a class="text-blue-900 text-4xl" href="mailto:hey@m0.is">
|
||||||
class="absolute -top-10 left-22 pointer-events-none transition duration-400 opacity-0 group-hover:opacity-80"
|
<span class="mr-2 relative bottom-2px">→</span> hey@m0.is
|
||||||
:colors="['#818cff']"
|
|
||||||
:size="120"
|
|
||||||
:blur="20"
|
|
||||||
:minimum-duration="500"
|
|
||||||
:minimum-opacity="0.6"
|
|
||||||
:opacity-variation="0.4"
|
|
||||||
/>
|
|
||||||
→
|
|
||||||
<a class="text-blue-900 relative ml-2" href="mailto:hey@m0.is">
|
|
||||||
hey@m0.is
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</p>
|
||||||
<p class="mt-10 mb-10">
|
<p class="mt-10 mb-10">
|
||||||
{{ t("happy_to_hear") }}
|
{{ t("happy_to_hear") }}
|
||||||
</p>
|
</p>
|
||||||
<p class="mt-10 text-lg">
|
|
||||||
{{ t("disclaimer") }}
|
|
||||||
</p>
|
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -50,35 +37,31 @@
|
||||||
en:
|
en:
|
||||||
heading: Contact
|
heading: Contact
|
||||||
you_want: Want me to …
|
you_want: Want me to …
|
||||||
develop_website: develop your website (€ 1000),
|
develop_website: develop your website,
|
||||||
program_tool: program a tool (€ 500),
|
design_print: design a poster, brochure or business card,
|
||||||
design_print: design a poster, brochure or business card (€ 500),
|
program_tool: program a tool or
|
||||||
help_server: help you with your server or domain (€ 300)?
|
else: do something else which you think I can do?
|
||||||
twitter: Hit me up on Twitter
|
twitter: Hit me up on Twitter
|
||||||
or_email: "or send me an email (en/de):"
|
or_email: "or send me an email (en/de):"
|
||||||
happy_to_hear: I’m always happy to hear from you.
|
happy_to_hear: I'm looking forward to your message.
|
||||||
disclaimer: The prices listed above are not meant to be understood as a binding offer.
|
|
||||||
|
|
||||||
de:
|
de:
|
||||||
heading: Kontakt
|
heading: Kontakt
|
||||||
you_want: Willst du, dass ich …
|
you_want: Willst du, dass ich …
|
||||||
develop_website: deine Webseite entwickle (€ 1000),
|
develop_website: deine Webseite entwickle,
|
||||||
program_tool: ein Tool programmiere (€ 500),
|
design_print: ein Poster, eine Broschüre oder eine Visitenkarte designe,
|
||||||
design_print: ein Poster, eine Broschüre oder eine Visitenkarte designe (€ 500),
|
program_tool: ein Tool programmiere oder
|
||||||
help_server: dir mit deinem Server oder deiner Domain helfe (€ 300)?
|
else: etwas anderes tue, von dem du denkst, dass ich es kann?
|
||||||
twitter: Schreib mir auf Twitter
|
twitter: Schreib mir auf Twitter
|
||||||
or_email: "oder sende mir eine Email:"
|
or_email: "oder schicke mir eine Email:"
|
||||||
happy_to_hear: Ich freue mich auf deine Nachricht.
|
happy_to_hear: Ich freue mich auf deine Nachricht.
|
||||||
disclaimer: Die genannten Preise stellen kein verbindliches Angebot dar.
|
|
||||||
</i18n>
|
</i18n>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { useI18n } from "vue-i18n"
|
import { useI18n } from "vue-i18n"
|
||||||
import BlurredBlobCanvas from "../components/BlurredBlobCanvas.vue"
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "ContactPage",
|
name: "ContactPage",
|
||||||
components: { BlurredBlobCanvas },
|
|
||||||
setup() {
|
setup() {
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
return { t }
|
return { t }
|
||||||
|
|
|
||||||
|
|
@ -14,20 +14,41 @@
|
||||||
66539 Neunkirchen
|
66539 Neunkirchen
|
||||||
</address>
|
</address>
|
||||||
<p>
|
<p>
|
||||||
E-Mail-Adresse:
|
{{ t("email") }}:
|
||||||
<a class="text-blue-900" href="mailto:hey@m0.is">
|
<a class="text-blue-900" href="mailto:hey@m0.is">
|
||||||
hey@m0.is
|
hey@m0.is
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
<p class="text-sm mt-10">
|
||||||
|
{{ t("phone") }}: +49 176 46146329<br>
|
||||||
|
{{ t("phone-warning-1") }}<br>
|
||||||
|
{{ t("phone-warning-2") }}<br>
|
||||||
|
<a
|
||||||
|
class="text-blue-700"
|
||||||
|
href="https://byrslf.co/why-i-don-t-answer-most-phone-calls-4a71e1418854"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>{{ t("phone-warning-link") }}</a>
|
||||||
|
</p>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<i18n lang="yaml">
|
<i18n lang="yaml">
|
||||||
en:
|
en:
|
||||||
heading: Legal Notice
|
heading: Legal Notice
|
||||||
|
email: Email address
|
||||||
|
phone-warning-1: Please do not call this number.
|
||||||
|
phone-warning-2: The only reason I publish it is because the law may require doing so (noone knows).
|
||||||
|
phone-warning-link: Why emails are better
|
||||||
|
phone: Tel
|
||||||
|
|
||||||
de:
|
de:
|
||||||
heading: Impressum
|
heading: Impressum
|
||||||
|
email: Email-Adresse
|
||||||
|
phone-warning-1: Bitte rufe diese Nummer nicht an.
|
||||||
|
phone-warning-2: Der einzige Grund, warum ich sie hier veröffentliche, ist, dass es das Gesetz (vielleicht) verlangt (niemand weiß es so genau).
|
||||||
|
phone-warning-link: Warum Emails besser sind (englisch)
|
||||||
|
phone: Telefon
|
||||||
</i18n>
|
</i18n>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -2,16 +2,12 @@
|
||||||
<main class="flex -md:flex-col justify-between items-start md:items-center min-h-80vh">
|
<main class="flex -md:flex-col justify-between items-start md:items-center min-h-80vh">
|
||||||
<div class="relative -md:pt-20vh -md:pb-20">
|
<div class="relative -md:pt-20vh -md:pb-20">
|
||||||
<div class="_fade-2">
|
<div class="_fade-2">
|
||||||
<div class="_pattern transform rotate-179.5 absolute w-full h-40 -left-4 md:-left-10 top-20vh -md:-mt-10 md:-top-10 opacity-3 md:opacity-5"/>
|
<div class="_pattern transform rotate-179.5 absolute w-full h-35 -left-4 md:-left-10 top-20vh -md:-mt-10 md:-top-15 opacity-3 md:opacity-5"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="_slide">
|
<div class="_slide">
|
||||||
<ClickToBounce v-slot="{ setTrigger }" class="text-6xl md:text-7xl -md:-mt-2 mb-30 font-special" style="--delay: 0">
|
<div class="text-4xl sm:text-5xl -md:-mt-2 mb-10 md:mb-20 font-special" style="--delay: 0">
|
||||||
Hey <span :ref="setTrigger" class="_clap">👋</span>
|
Moritz Ruth
|
||||||
</ClickToBounce>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="font-special text-3xl sm:text-5xl mb-5 _slide" style="--delay: 200">
|
|
||||||
{{ t("i_am") }}<br>
|
|
||||||
<span class="text-1.1em text-transparent bg-clip-text bg-gradient-to-b from-blue-500 to-blue-900">Moritz Ruth</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text-gray-800 text-2xl sm:text-3xl">
|
<div class="text-gray-800 text-2xl sm:text-3xl">
|
||||||
<ul class="asterisk-list">
|
<ul class="asterisk-list">
|
||||||
|
|
@ -27,7 +23,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<router-link class="mt-10 text-2xl sm:text-3xl block text-blue-900 _slide" style="--delay: 1000" to="/contact">
|
<router-link class="mt-10 text-2xl sm:text-3xl block text-blue-900 _slide" style="--delay: 1000" to="/contact">
|
||||||
→ {{ t("contact_me") }}
|
<span class="mr-2">→</span> {{ t("contact_me") }}
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<BlurredBlobCanvas
|
<BlurredBlobCanvas
|
||||||
|
|
@ -55,7 +51,7 @@
|
||||||
i_am: ""
|
i_am: ""
|
||||||
software_developer: Software-Entwickler
|
software_developer: Software-Entwickler
|
||||||
designer: Web– und Print-Designer
|
designer: Web– und Print-Designer
|
||||||
typography_enthusiast: Typography-Enthusiast
|
typography_enthusiast: Typographie-Enthusiast
|
||||||
contact_me: Schreib mir!
|
contact_me: Schreib mir!
|
||||||
</i18n>
|
</i18n>
|
||||||
|
|
||||||
|
|
@ -65,12 +61,6 @@
|
||||||
fill='%23000000' fill-opacity='1'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
fill='%23000000' fill-opacity='1'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
/* created using emojicursor.app */
|
|
||||||
._clap {
|
|
||||||
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='90' viewport='0 0 100 100' style='fill:black;font-size:50px;'><text y='50%'>✋\
|
|
||||||
</text></svg>") 16 0,auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
._fade-1 {
|
._fade-1 {
|
||||||
animation: fade 2s ease-in both;
|
animation: fade 2s ease-in both;
|
||||||
}
|
}
|
||||||
|
|
@ -117,11 +107,10 @@
|
||||||
<script>
|
<script>
|
||||||
import { useI18n } from "vue-i18n"
|
import { useI18n } from "vue-i18n"
|
||||||
import BlurredBlobCanvas from "../components/BlurredBlobCanvas.vue"
|
import BlurredBlobCanvas from "../components/BlurredBlobCanvas.vue"
|
||||||
import ClickToBounce from "../components/ClickToBounce.vue"
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "IndexPage",
|
name: "IndexPage",
|
||||||
components: { ClickToBounce, BlurredBlobCanvas },
|
components: { BlurredBlobCanvas },
|
||||||
setup() {
|
setup() {
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
return { t }
|
return { t }
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue