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",
|
||||
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>
|
||||
<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']"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</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
|
||||
</router-link>
|
||||
<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>
|
||||
._blur-backdrop-or-hide {
|
||||
@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 {
|
||||
@apply bg-opacity-40;
|
||||
@apply bg-opacity-70;
|
||||
}
|
||||
}
|
||||
|
||||
@screen sm {
|
||||
._home-link.router-link-active {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
}
|
||||
|
||||
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 {
|
||||
@apply list-decimal list-inside space-y-2;
|
||||
}
|
||||
|
||||
address, p, ol {
|
||||
:where(address, p, ol) {
|
||||
@apply not-italic text-lg max-w-240;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<template>
|
||||
<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>
|
||||
<!-- <p>-->
|
||||
<!-- {{ t("you_want") }}-->
|
||||
<!-- </p>-->
|
||||
<!-- <ul class="asterisk-list mt-5">-->
|
||||
<!-- <li>{{ t("develop_website") }}</li>-->
|
||||
<!-- <li>{{ t("program_tool") }}</li>-->
|
||||
<!-- <li>{{ t("design_print") }}</li>-->
|
||||
<!-- <li>{{ t("help_server") }}</li>-->
|
||||
<!-- </ul>-->
|
||||
<p>
|
||||
{{ t("you_want") }}
|
||||
</p>
|
||||
<ul class="asterisk-list mt-5">
|
||||
<li>{{ t("develop_website") }}</li>
|
||||
<li>{{ t("design_print") }}</li>
|
||||
<li>{{ t("program_tool") }}</li>
|
||||
<li>{{ t("else") }}</li>
|
||||
</ul>
|
||||
<p class="mt-10 mb-10">
|
||||
{{ t("twitter") }}
|
||||
<a
|
||||
|
|
@ -22,27 +22,14 @@
|
|||
</a>
|
||||
{{ t("or_email") }}
|
||||
</p>
|
||||
<div class="relative text-4xl group inline-block">
|
||||
<BlurredBlobCanvas
|
||||
class="absolute -top-10 left-22 pointer-events-none transition duration-400 opacity-0 group-hover:opacity-80"
|
||||
: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
|
||||
<p>
|
||||
<a class="text-blue-900 text-4xl" href="mailto:hey@m0.is">
|
||||
<span class="mr-2 relative bottom-2px">→</span> hey@m0.is
|
||||
</a>
|
||||
</div>
|
||||
</p>
|
||||
<p class="mt-10 mb-10">
|
||||
{{ t("happy_to_hear") }}
|
||||
</p>
|
||||
<p class="mt-10 text-lg">
|
||||
{{ t("disclaimer") }}
|
||||
</p>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
|
@ -50,35 +37,31 @@
|
|||
en:
|
||||
heading: Contact
|
||||
you_want: Want me to …
|
||||
develop_website: develop your website (€ 1000),
|
||||
program_tool: program a tool (€ 500),
|
||||
design_print: design a poster, brochure or business card (€ 500),
|
||||
help_server: help you with your server or domain (€ 300)?
|
||||
develop_website: develop your website,
|
||||
design_print: design a poster, brochure or business card,
|
||||
program_tool: program a tool or
|
||||
else: do something else which you think I can do?
|
||||
twitter: Hit me up on Twitter
|
||||
or_email: "or send me an email (en/de):"
|
||||
happy_to_hear: I’m always happy to hear from you.
|
||||
disclaimer: The prices listed above are not meant to be understood as a binding offer.
|
||||
happy_to_hear: I'm looking forward to your message.
|
||||
|
||||
de:
|
||||
heading: Kontakt
|
||||
you_want: Willst du, dass ich …
|
||||
develop_website: deine Webseite entwickle (€ 1000),
|
||||
program_tool: ein Tool programmiere (€ 500),
|
||||
design_print: ein Poster, eine Broschüre oder eine Visitenkarte designe (€ 500),
|
||||
help_server: dir mit deinem Server oder deiner Domain helfe (€ 300)?
|
||||
develop_website: deine Webseite entwickle,
|
||||
design_print: ein Poster, eine Broschüre oder eine Visitenkarte designe,
|
||||
program_tool: ein Tool programmiere oder
|
||||
else: etwas anderes tue, von dem du denkst, dass ich es kann?
|
||||
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.
|
||||
disclaimer: Die genannten Preise stellen kein verbindliches Angebot dar.
|
||||
</i18n>
|
||||
|
||||
<script>
|
||||
import { useI18n } from "vue-i18n"
|
||||
import BlurredBlobCanvas from "../components/BlurredBlobCanvas.vue"
|
||||
|
||||
export default {
|
||||
name: "ContactPage",
|
||||
components: { BlurredBlobCanvas },
|
||||
setup() {
|
||||
const { t } = useI18n()
|
||||
return { t }
|
||||
|
|
|
|||
|
|
@ -14,20 +14,41 @@
|
|||
66539 Neunkirchen
|
||||
</address>
|
||||
<p>
|
||||
E-Mail-Adresse:
|
||||
{{ t("email") }}:
|
||||
<a class="text-blue-900" href="mailto:hey@m0.is">
|
||||
hey@m0.is
|
||||
</a>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<i18n lang="yaml">
|
||||
en:
|
||||
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:
|
||||
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>
|
||||
|
||||
<script>
|
||||
|
|
@ -2,16 +2,12 @@
|
|||
<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="_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 class="_slide">
|
||||
<ClickToBounce v-slot="{ setTrigger }" class="text-6xl md:text-7xl -md:-mt-2 mb-30 font-special" style="--delay: 0">
|
||||
Hey <span :ref="setTrigger" class="_clap">👋</span>
|
||||
</ClickToBounce>
|
||||
</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 class="text-4xl sm:text-5xl -md:-mt-2 mb-10 md:mb-20 font-special" style="--delay: 0">
|
||||
Moritz Ruth
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-gray-800 text-2xl sm:text-3xl">
|
||||
<ul class="asterisk-list">
|
||||
|
|
@ -27,7 +23,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<BlurredBlobCanvas
|
||||
|
|
@ -55,7 +51,7 @@
|
|||
i_am: ""
|
||||
software_developer: Software-Entwickler
|
||||
designer: Web– und Print-Designer
|
||||
typography_enthusiast: Typography-Enthusiast
|
||||
typography_enthusiast: Typographie-Enthusiast
|
||||
contact_me: Schreib mir!
|
||||
</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");
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
animation: fade 2s ease-in both;
|
||||
}
|
||||
|
|
@ -117,11 +107,10 @@
|
|||
<script>
|
||||
import { useI18n } from "vue-i18n"
|
||||
import BlurredBlobCanvas from "../components/BlurredBlobCanvas.vue"
|
||||
import ClickToBounce from "../components/ClickToBounce.vue"
|
||||
|
||||
export default {
|
||||
name: "IndexPage",
|
||||
components: { ClickToBounce, BlurredBlobCanvas },
|
||||
components: { BlurredBlobCanvas },
|
||||
setup() {
|
||||
const { t } = useI18n()
|
||||
return { t }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue