made contacts page

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>

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>

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>

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>

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">

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>

components/icons/IconsCode.vue

@@ -11,7 +11,3 @@
     />
   </svg>
 </template>
-
-<script lang="ts" setup></script>
-
-<style lang="scss" module></style>

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>

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>

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>

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>

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>

constants/contacts.ts

@@ -0,0 +1,5 @@
+export const contacts = {
+  telegram: "vv4000",
+  email: "Z290aGFtNDhAZ21haWwuY29t",
+  github: "muerwre",
+} as const;

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;

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>