From 623fa7b7fd531dc701652634a02bc997c58c2b10 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 10 Nov 2022 16:21:06 +0600
Subject: [PATCH] made contacts page

---
 assets/svg/writing.svg                    | 98 +++++++++++++++++++++++
 components/bio/BioHeading.vue             | 16 +---
 components/contact/ContactInformation.vue | 38 +++++++++
 components/contact/ContactRow.vue         | 55 +++++++++++++
 components/home/HomeHeader.vue            | 17 ++--
 components/icons/IconsBook.vue            | 13 +++
 components/icons/IconsCode.vue            |  4 -
 components/icons/IconsGithub.vue          | 17 ++++
 components/icons/IconsSend.vue            | 14 ++++
 components/icons/IconsTelegram.vue        | 13 +++
 components/layout/LayoutHeader.vue        |  7 +-
 components/ui/UiButtonGroup.vue           | 15 ++++
 constants/contacts.ts                     |  5 ++
 layouts/landing.vue                       |  6 +-
 pages/{bio.vue => about.vue}              |  0
 pages/contacts.vue                        | 53 ++++++++++++
 16 files changed, 346 insertions(+), 25 deletions(-)
 create mode 100644 assets/svg/writing.svg
 create mode 100644 components/contact/ContactInformation.vue
 create mode 100644 components/contact/ContactRow.vue
 create mode 100644 components/icons/IconsBook.vue
 create mode 100644 components/icons/IconsGithub.vue
 create mode 100644 components/icons/IconsSend.vue
 create mode 100644 components/icons/IconsTelegram.vue
 create mode 100644 components/ui/UiButtonGroup.vue
 create mode 100644 constants/contacts.ts
 rename pages/{bio.vue => about.vue} (100%)
 create mode 100644 pages/contacts.vue

diff --git a/assets/svg/writing.svg b/assets/svg/writing.svg
new file mode 100644
index 0000000..f70d6a0
--- /dev/null
+++ b/assets/svg/writing.svg
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="400"
+   height="400"
+   viewBox="0 0 105.83333 105.83333"
+   version="1.1"
+   id="svg523"
+   inkscape:version="1.2 (dc2aeda, 2022-05-15)"
+   sodipodi:docname="writing.svg"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview525"
+     pagecolor="#16161c"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="1.0634643"
+     inkscape:cx="168.31783"
+     inkscape:cy="193.23639"
+     inkscape:window-width="1440"
+     inkscape:window-height="847"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs520"><linearGradient
+       inkscape:collect="always"
+       id="linearGradient35336"><stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop35332" /><stop
+         style="stop-color:#000000;stop-opacity:1"
+         offset="1"
+         id="stop35334" /></linearGradient><linearGradient
+       inkscape:collect="always"
+       id="linearGradient12854"><stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop12850" /><stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="0.35066351"
+         id="stop12982" /><stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="1"
+         id="stop12852" /></linearGradient><mask
+       maskUnits="userSpaceOnUse"
+       id="mask23724"><rect
+         style="fill:url(#linearGradient23728);fill-opacity:1;stroke-width:1.05833;stroke-linecap:round"
+         id="rect23726"
+         width="105.97196"
+         height="106.3355"
+         x="-0.18177007"
+         y="-0.18177016" /></mask><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient12854"
+       id="linearGradient23728"
+       gradientUnits="userSpaceOnUse"
+       x1="105.60842"
+       y1="54.803684"
+       x2="52.531563"
+       y2="54.803684"
+       spreadMethod="reflect" /><mask
+       maskUnits="userSpaceOnUse"
+       id="mask36981"><rect
+         style="opacity:1;fill:url(#linearGradient36985);fill-opacity:1;stroke:none;stroke-width:1.05833;stroke-linecap:round"
+         id="rect36983"
+         width="99.810249"
+         height="100.76689"
+         x="0.58485931"
+         y="0.043161567" /></mask><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient35336"
+       id="linearGradient36985"
+       gradientUnits="userSpaceOnUse"
+       x1="57.549629"
+       y1="77.886894"
+       x2="57.549629"
+       y2="113.3978"
+       gradientTransform="matrix(0.93642929,0,0,0.93642929,1.5415071,0.99980934)" /></defs><g
+     inkscape:label="Слой 1"
+     inkscape:groupmode="layer"
+     id="layer1"><circle
+       style="opacity:0.293956;fill:#323ba9;stroke-width:1.05833;stroke-linecap:round"
+       id="path717"
+       cx="52.916664"
+       cy="52.916664"
+       r="52.744289" /></g></svg>
diff --git a/components/bio/BioHeading.vue b/components/bio/BioHeading.vue
index 819fe7b..0f49925 100644
--- a/components/bio/BioHeading.vue
+++ b/components/bio/BioHeading.vue
@@ -17,15 +17,11 @@
         of doing <b>Typescript</b> and <b>Golang</b> backend.
       </p>
 
-      <div :class="$style.buttons">
-        <UiActionButton
-          href="https://github.com/muerwre"
-          target="_blank"
-          variant="primary"
-        >
+      <UiButtonGroup :class="$style.buttons">
+        <UiActionButton href="/contacts" variant="primary">
           Contact me
           <template v-slot:suffix>
-            <IconsArrowRight width="22" height="22" fill="currentColor" />
+            <IconsSend width="22" height="22" fill="currentColor" />
           </template>
         </UiActionButton>
 
@@ -39,7 +35,7 @@
             <IconsCode width="22" height="22" fill="currentColor" />
           </template>
         </UiActionButton>
-      </div>
+      </UiButtonGroup>
     </div>
   </div>
 </template>
@@ -96,9 +92,5 @@
   @include desktop {
     margin-top: 20px;
   }
-
-  & > * {
-    margin: 0 15px 15px 0;
-  }
 }
 </style>
diff --git a/components/contact/ContactInformation.vue b/components/contact/ContactInformation.vue
new file mode 100644
index 0000000..4889259
--- /dev/null
+++ b/components/contact/ContactInformation.vue
@@ -0,0 +1,38 @@
+<template>
+  <div :class="$style.grid">
+    <ContactRow value="@vv4000" href="https://t.me/vv4000" label="Telegram">
+      <IconsTelegram :width="24" :height="24" />
+    </ContactRow>
+
+    <ContactRow
+      :value="`@${contacts.github}`"
+      :href="`https://github.com/${contacts.github}`"
+      label="Github"
+    >
+      <IconsGithub :width="24" :height="24" />
+    </ContactRow>
+
+    <ContactRow :value="mail" :href="`mailto:${mail}`" label="Mail">
+      <IconsSend :width="24" :height="24" />
+    </ContactRow>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { contacts } from "~~/constants/contacts";
+
+const mail = ref("...loading");
+
+onMounted(() => (mail.value = atob(contacts.email)));
+</script>
+
+<style lang="scss" module>
+.grid {
+  width: auto;
+  display: grid;
+  grid-auto-flow: row;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+</style>
diff --git a/components/contact/ContactRow.vue b/components/contact/ContactRow.vue
new file mode 100644
index 0000000..4206a51
--- /dev/null
+++ b/components/contact/ContactRow.vue
@@ -0,0 +1,55 @@
+<template>
+  <UiCard :class="$style.row" @click="openWindow">
+    <div :class="$style.grid">
+      <div :class="$style.icon"><slot /></div>
+      <div :class="$style.text">
+        <div :class="$style.label">{{ label }}</div>
+        <NuxtLink :to="href" target="_blank" :class="$style.link">
+          {{ value }}
+        </NuxtLink>
+      </div>
+    </div>
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  value: string;
+  href: string;
+  label: string;
+}
+
+const props = defineProps<Props>();
+
+const openWindow = () => window.open(props.href);
+</script>
+
+<style lang="scss" module>
+.row {
+  cursor: pointer;
+  padding: 10px 20px 10px 14px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  align-items: center;
+  gap: 16px;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.label {
+  font-size: 0.8em;
+  color: var(--color-text);
+  margin-bottom: 2px;
+}
+</style>
diff --git a/components/home/HomeHeader.vue b/components/home/HomeHeader.vue
index 1382572..dc467e7 100644
--- a/components/home/HomeHeader.vue
+++ b/components/home/HomeHeader.vue
@@ -22,14 +22,21 @@
           <p>There's also my Curriculum Vitae and contact info.</p>
         </div>
 
-        <div :class="$style.buttons">
-          <UiActionButton href="/bio" variant="outline">
-            Read about me
+        <UiButtonGroup :class="$style.buttons">
+          <UiActionButton href="/contacts" variant="primary">
+            Contact me
             <template v-slot:suffix>
-              <IconsArrowRight width="22" height="22" fill="currentColor" />
+              <IconsSend width="22" height="22" fill="currentColor" />
             </template>
           </UiActionButton>
-        </div>
+
+          <UiActionButton href="/about" variant="outline">
+            View Portfolio
+            <template v-slot:suffix>
+              <IconsBook width="22" height="22" fill="currentColor" />
+            </template>
+          </UiActionButton>
+        </UiButtonGroup>
       </div>
 
       <div :class="$style.image">
diff --git a/components/icons/IconsBook.vue b/components/icons/IconsBook.vue
new file mode 100644
index 0000000..7a70f38
--- /dev/null
+++ b/components/icons/IconsBook.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="48"
+    width="48"
+    viewBox="1 -2 50 50"
+  >
+    <path
+      xmlns="http://www.w3.org/2000/svg"
+      d="M12.4 33q2.7 0 5.225.625 2.525.625 4.975 1.875V14.15q-2.25-1.5-4.875-2.325Q15.1 11 12.4 11q-1.9 0-3.725.475Q6.85 11.95 5 12.65v21.7q1.55-.7 3.525-1.025Q10.5 33 12.4 33Zm13.2 2.5q2.5-1.25 4.9-1.875Q32.9 33 35.6 33q1.9 0 3.925.3t3.475.8V12.65q-1.7-.85-3.6-1.25-1.9-.4-3.8-.4-2.7 0-5.225.825-2.525.825-4.775 2.325ZM24.1 40q-2.55-1.9-5.55-2.925T12.4 36.05q-1.85 0-3.6.45t-3.5 1.1q-1.15.55-2.225-.15Q2 36.75 2 35.45V12.3q0-.75.35-1.375T3.4 9.95q2.1-1 4.375-1.475Q10.05 8 12.4 8q3.15 0 6.125.85t5.575 2.6q2.55-1.75 5.475-2.6Q32.5 8 35.6 8q2.35 0 4.6.475 2.25.475 4.35 1.475.7.35 1.075.975T46 12.3v23.15q0 1.4-1.125 2.125-1.125.725-2.225.025-1.7-.7-3.45-1.125-1.75-.425-3.6-.425-3.15 0-6.05 1.05T24.1 40ZM13.8 23.55Z"
+    />
+  </svg>
+</template>
diff --git a/components/icons/IconsCode.vue b/components/icons/IconsCode.vue
index 60bd2c8..b3eecb3 100644
--- a/components/icons/IconsCode.vue
+++ b/components/icons/IconsCode.vue
@@ -11,7 +11,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts" setup></script>
-
-<style lang="scss" module></style>
diff --git a/components/icons/IconsGithub.vue b/components/icons/IconsGithub.vue
new file mode 100644
index 0000000..9f22b08
--- /dev/null
+++ b/components/icons/IconsGithub.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="48"
+    width="48"
+    viewBox="0 0 1024 1024"
+    fill="currentColor"
+  >
+    <path
+      xmlns="http://www.w3.org/2000/svg"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
+      transform="scale(64)"
+    />
+  </svg>
+</template>
diff --git a/components/icons/IconsSend.vue b/components/icons/IconsSend.vue
new file mode 100644
index 0000000..318a343
--- /dev/null
+++ b/components/icons/IconsSend.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="48"
+    width="48"
+    viewBox="0 0 48 48"
+    fill="currentColor"
+  >
+    <path
+      xmlns="http://www.w3.org/2000/svg"
+      d="M7 34.05Q5.85 33.8 4.925 33 4 32.2 4 31.05V13.9q0-.6.25-1.125t.95-.875l16-7.9 15.35 7.9q.45.35.9 1.025.45.675.6 1.225h-3.7L21.2 7.35 7 14.4ZM11.5 42q-1.2 0-2.1-.925-.9-.925-.9-2.075V18.65q0-1.15.9-2.075.9-.925 2.1-.925H41q1.15 0 2.075.925Q44 17.5 44 18.65V39q0 1.15-.925 2.075Q42.15 42 41 42Zm14.75-12.9L11.5 21.85V39H41V21.85Zm0-3.35 14.45-7.1H11.8ZM41 18.65H11.5 41Z"
+    />
+  </svg>
+</template>
diff --git a/components/icons/IconsTelegram.vue b/components/icons/IconsTelegram.vue
new file mode 100644
index 0000000..f36e9c3
--- /dev/null
+++ b/components/icons/IconsTelegram.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="48"
+    width="48"
+    viewBox="0 0 240 240"
+    fill="currentColor"
+  >
+    <path
+      d="M222.51 19.53c-2.674.083-5.354.78-7.783 1.872-4.433 1.702-51.103 19.78-97.79 37.834C93.576 68.27 70.25 77.28 52.292 84.2 34.333 91.12 21.27 96.114 19.98 96.565c-4.28 1.502-10.448 3.905-14.582 8.76-2.066 2.428-3.617 6.794-1.804 10.53 1.812 3.74 5.303 5.804 10.244 7.69l.152.058.156.048c17.998 5.55 45.162 14.065 48.823 15.213.95 3.134 12.412 40.865 18.65 61.285 1.602 4.226 6.357 7.058 10.773 6.46.794.027 2.264.014 3.898-.378 2.383-.57 5.454-1.924 8.374-4.667l.002-.002c4.153-3.9 18.925-18.373 23.332-22.693l48.27 35.643.18.11s4.368 2.894 10.134 3.284c2.883.195 6.406-.33 9.455-2.556 3.05-2.228 5.25-5.91 6.352-10.71 3.764-16.395 29.428-138.487 33.83-158.837 2.742-10.348 1.442-18.38-3.7-22.872-2.59-2.26-5.675-3.275-8.827-3.395-.394-.015-.788-.016-1.183-.004zm.545 10.02c1.254.02 2.26.365 2.886.91 1.252 1.093 2.878 4.386.574 12.944-12.437 55.246-23.276 111.71-33.87 158.994-.73 3.168-1.752 4.323-2.505 4.873-.754.552-1.613.744-2.884.658-2.487-.17-5.36-1.72-5.488-1.79l-78.207-57.745c7.685-7.266 59.17-55.912 87.352-81.63 3.064-2.95.584-8.278-3.53-8.214-5.294 1.07-9.64 4.85-14.437 7.212-34.79 20.36-100.58 60.213-106.402 63.742-3.04-.954-30.89-9.686-49.197-15.332-2.925-1.128-3.962-2.02-4.344-2.36.007-.01.002.004.01-.005 1.362-1.6 6.97-4.646 10.277-5.807 2.503-.878 14.633-5.544 32.6-12.467 17.965-6.922 41.294-15.938 64.653-24.97 32.706-12.647 65.46-25.32 98.137-37.98 1.617-.75 3.12-1.052 4.375-1.032zM100.293 158.41l19.555 14.44c-5.433 5.32-18.327 17.937-21.924 21.322l2.37-35.762z"
+    />
+  </svg>
+</template>
diff --git a/components/layout/LayoutHeader.vue b/components/layout/LayoutHeader.vue
index 47b5910..c53da69 100644
--- a/components/layout/LayoutHeader.vue
+++ b/components/layout/LayoutHeader.vue
@@ -1,8 +1,9 @@
 <template>
-  <div :class="$style.header">
+  <header :class="$style.header">
     <NuxtLink to="/" :activeClass="$style.active">Home</NuxtLink>
-    <NuxtLink to="/bio" :activeClass="$style.active">About me</NuxtLink>
-  </div>
+    <NuxtLink to="/about" :activeClass="$style.active">About</NuxtLink>
+    <NuxtLink to="/contacts" :activeClass="$style.active">Contacts</NuxtLink>
+  </header>
 </template>
 
 <script lang="ts" setup></script>
diff --git a/components/ui/UiButtonGroup.vue b/components/ui/UiButtonGroup.vue
new file mode 100644
index 0000000..ccf69c3
--- /dev/null
+++ b/components/ui/UiButtonGroup.vue
@@ -0,0 +1,15 @@
+<template>
+  <div :class="[$attrs.class, $style.buttons]">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module>
+.buttons {
+  & > * {
+    margin: 0 15px 15px 0;
+  }
+}
+</style>
diff --git a/constants/contacts.ts b/constants/contacts.ts
new file mode 100644
index 0000000..d05cc59
--- /dev/null
+++ b/constants/contacts.ts
@@ -0,0 +1,5 @@
+export const contacts = {
+  telegram: "vv4000",
+  email: "Z290aGFtNDhAZ21haWwuY29t",
+  github: "muerwre",
+} as const;
diff --git a/layouts/landing.vue b/layouts/landing.vue
index 45202f9..3b43c7c 100644
--- a/layouts/landing.vue
+++ b/layouts/landing.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="$style.wrapper">
     <div :class="$style.header_container">
       <div :class="$style.header_content">
         <LayoutHeader />
@@ -15,6 +15,10 @@
 <style lang="scss" module>
 @import "@/assets/css/mixins";
 
+.wrapper {
+  height: 100%;
+}
+
 .header_container {
   position: sticky;
   top: 0;
diff --git a/pages/bio.vue b/pages/about.vue
similarity index 100%
rename from pages/bio.vue
rename to pages/about.vue
diff --git a/pages/contacts.vue b/pages/contacts.vue
new file mode 100644
index 0000000..a899d92
--- /dev/null
+++ b/pages/contacts.vue
@@ -0,0 +1,53 @@
+<template>
+  <article :class="$style.content">
+    <div :class="$style.grid">
+      <div :class="$style.text">
+        <h1>Write me a letter!</h1>
+
+        <div :class="$style.contacts">
+          <ContactInformation />
+        </div>
+      </div>
+
+      <div :class="$style.text">
+        <img src="@/assets/svg/writing.svg" alt="" />
+      </div>
+    </div>
+  </article>
+</template>
+
+<script lang="ts">
+export default {
+  scrollToTop: true,
+  head() {
+    return {
+      title: "Contacts",
+    };
+  },
+};
+
+definePageMeta({ layout: "landing" });
+</script>
+
+<style lang="scss" module>
+@import "@/assets/css/mixins";
+
+.content {
+  @include container;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-column-gap: 80px;
+
+  @include desktop {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+}
+
+.contacts {
+  margin-top: 40px;
+}
+</style>