From 70230f477c13bf88f78bce4ab3eac2f01a8f77af Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritzruth.de>
Date: Sat, 7 Aug 2021 15:03:14 +0200
Subject: [PATCH] design changes

---
 src/App.vue                                   |  2 +-
 src/components/ClickToBounce.vue              | 55 ----------------
 src/components/NavigationMenu.vue             | 17 +++--
 src/main.css                                  |  4 +-
 src/pages/contact.vue                         | 63 +++++++------------
 src/pages/{legal-notice.vue => impressum.vue} | 23 ++++++-
 src/pages/index.vue                           | 25 +++-----
 7 files changed, 67 insertions(+), 122 deletions(-)
 delete mode 100644 src/components/ClickToBounce.vue
 rename src/pages/{legal-notice.vue => impressum.vue} (50%)

diff --git a/src/App.vue b/src/App.vue
index 44bf228..8a49330 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -60,7 +60,7 @@
     // },
     {
       labelKey: "footer.legal",
-      to: "/legal-notice"
+      to: "/impressum"
     }
   ]
 
diff --git a/src/components/ClickToBounce.vue b/src/components/ClickToBounce.vue
deleted file mode 100644
index b939683..0000000
--- a/src/components/ClickToBounce.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/NavigationMenu.vue b/src/components/NavigationMenu.vue
index 5282585..96c4421 100644
--- a/src/components/NavigationMenu.vue
+++ b/src/components/NavigationMenu.vue
@@ -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>
diff --git a/src/main.css b/src/main.css
index efc4f5b..b35dc10 100644
--- a/src/main.css
+++ b/src/main.css
@@ -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;
     }
   }
diff --git a/src/pages/contact.vue b/src/pages/contact.vue
index 5c841a4..22181ca 100644
--- a/src/pages/contact.vue
+++ b/src/pages/contact.vue
@@ -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 }
diff --git a/src/pages/legal-notice.vue b/src/pages/impressum.vue
similarity index 50%
rename from src/pages/legal-notice.vue
rename to src/pages/impressum.vue
index fd20ee0..a5a2e08 100644
--- a/src/pages/legal-notice.vue
+++ b/src/pages/impressum.vue
@@ -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>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 7e115fb..26f0ced 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -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 }