Beta version

2023-11-18 20:28:27 +03:00
parent ff9cdcab1d
commit f16d54aa46
28 changed files with 16368 additions and 121 deletions
@@ -1,10 +1,13 @@
 <script setup lang="ts">
+const age =
+  new Date(Number(new Date()) - Number(new Date('2003-09-18'))).getFullYear() -
+  1970
+
 const meta = {
-  title: 'About',
-  description:
-    'A software engineer, a malware enthusiast and, most importantly, a weird tall creature.',
+  title: 'About Me',
+  description: `Nice to meet you!~ I'm Andrew, a ${age}-year-old developer from Kaluga, Russia.`,
  image: 'https://enderman.ch/images/logo.png',
-  url: 'https://enderman.ch/',
+  url: 'https://enderman.ch/about',
 }

 useSeoMeta({
@@ -36,6 +39,10 @@ useHead({
 })
 </script>

-<template><p>About page!</p></template>
+<template>
+  <section>
+    <p>This page shall be added in a future release.</p>
+  </section>
+</template>

 <style scoped lang="scss"></style>
@@ -22,7 +22,7 @@ useSeoMeta({
 })

 useHead({
-  titleTemplate: 'Enderman',
+  title: 'Enderman',
  htmlAttrs: {
    lang: 'en',
  },
@@ -37,13 +37,65 @@ useHead({
 </script>

 <template>
-  <p>
-    A software engineer, a malware enthusiast and most importantly, a weird tall
-    creature.
-    <ClientOnly fallback-tag="span" fallback="TikTok">
-      <FontAwesomeIcon icon="fa-brands fa-tiktok" />
-    </ClientOnly>
-  </p>
+  <section>
+    <h3 class="alex">Welcome 👋</h3>
+    <p>
+      I'm <strong>Enderman</strong> &ndash; a software engineer, a malware
+      enthusiast and most importantly, a weird tall creature. I have over 300K
+      subscribers on
+      <a class="link-hi" href="https://go.enderman.ch/youtube">YouTube</a> and
+      over 20K followers on
+      <a class="link-hi" href="https://go.enderman.ch/twitter">Twitter</a>.
+      Sometimes I wish there were 48 hours in a day.
+    </p>
+    <div class="row g-3">
+      <div class="col-12 col-md-8">
+        <h5 class="alex">What I do</h5>
+        <ul>
+          <li>
+            I develop cross-platform software. My language of choice is usually
+            <strong>C/C++</strong> for desktop applications and any common
+            backend stack with framework-loaded TypeScript for web. You can take
+            a look at my code on
+            <a class="link-hi" href="https://go.enderman.ch/github">GitHub</a>.
+          </li>
+          <li>
+            I have the most unnecessary, yet fascinating knowledge about
+            Microsoft Windows, and I absolutely love sharing it with my viewers
+            in an unorthodox comedic fashion.
+            <sub>
+              <em>*Microsoft still has not hired me as a software tester.</em>
+            </sub>
+          </li>
+          <li>
+            I research and analyze modern malware, educate computer users about
+            it and preserve history. The repository can be found
+            <a class="link-hi" href="https://go.enderman.ch/repository">here</a
+            >.
+          </li>
+          <li>I make videos for you to enjoy!</li>
+        </ul>
+      </div>
+      <div class="col-12 col-md-4">
+        <h5 class="alex">What I enjoy</h5>
+        <ul>
+          <li>Teaching</li>
+          <li>Mathematics</li>
+          <li>Philosophy</li>
+          <li>Geopolitics</li>
+          <li>
+            <a class="link-hi" href="https://go.enderman.ch/chess">Chess</a>
+          </li>
+          <li>Solitude</li>
+        </ul>
+      </div>
+    </div>
+    <p>
+      <strong>Want to learn more?</strong> Find out more about me using the
+      navigation bar!<br />
+      <em>See you there!~</em>
+    </p>
+  </section>
 </template>

 <style scoped lang="scss"></style>
@@ -1,5 +1,45 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const meta = {
+  title: "Enderman's Projects",
+  description:
+    "A display of my largest projects. Some of them aren't published on YouTube.",
+  image: 'https://enderman.ch/images/logo.png',
+  url: 'https://enderman.ch/projects',
+}

-<template><p>Project page!</p></template>
+useSeoMeta({
+  title: meta.title,
+  description: meta.description,
+  ogTitle: meta.title,
+  ogDescription: meta.description,
+  ogImage: meta.image,
+  ogUrl: meta.url,
+  ogType: 'website',
+  twitterTitle: meta.title,
+  twitterDescription: meta.description,
+  twitterImage: meta.image,
+  twitterCard: 'summary',
+})
+
+useHead({
+  title: 'Projects',
+  htmlAttrs: {
+    lang: 'en',
+  },
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+  ],
+})
+</script>
+
+<template>
+  <section>
+    <p>This page shall be added in a future release.</p>
+  </section>
+</template>

 <style scoped lang="scss"></style>
@@ -1,12 +1,110 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+const socials = [
+  {
+    name: 'YouTube',
+    url: 'https://go.enderman.ch/youtube',
+    icon: 'youtube',
+  },
+  {
+    name: 'Andrew',
+    url: 'https://go.enderman.ch/andrew',
+    icon: 'youtube',
+  },
+  {
+    name: 'Twitch',
+    url: 'https://go.enderman.ch/twitch',
+    icon: 'twitch',
+  },
+  {
+    name: 'TikTok',
+    url: 'https://go.enderman.ch/tiktok',
+    icon: 'tiktok',
+  },
+  {
+    name: 'Twitter',
+    url: 'https://go.enderman.ch/twitter',
+    icon: 'twitter',
+  },
+  {
+    name: 'Telegram',
+    url: 'https://go.enderman.ch/telegram',
+    icon: 'telegram',
+  },
+  {
+    name: 'Discord',
+    url: 'https://go.enderman.ch/discord',
+    icon: 'discord',
+  },
+  {
+    name: 'GitHub',
+    url: 'https://go.enderman.ch/github',
+    icon: 'github',
+  },
+  {
+    name: 'Steam',
+    url: 'https://go.enderman.ch/steam',
+    icon: 'steam',
+  },
+]
+
+const meta = {
+  title: 'Enderman Online',
+  description:
+    'Discover me on your favorite social media and find ways to contact me here.',
+  image: 'https://enderman.ch/images/logo.png',
+  url: 'https://enderman.ch/projects',
+}
+
+useSeoMeta({
+  title: meta.title,
+  description: meta.description,
+  ogTitle: meta.title,
+  ogDescription: meta.description,
+  ogImage: meta.image,
+  ogUrl: meta.url,
+  ogType: 'website',
+  twitterTitle: meta.title,
+  twitterDescription: meta.description,
+  twitterImage: meta.image,
+  twitterCard: 'summary',
+})
+
+useHead({
+  title: 'Socials',
+  htmlAttrs: {
+    lang: 'en',
+  },
+  link: [
+    {
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico',
+    },
+  ],
+})
+</script>

 <template>
-  <h3>Contact</h3>
-  <p>
-    Fanmail: contact@enderman.ch <br />
-    Manager: manager@enderman.ch<br />
-    Abuse: abuse@enderman.ch
-  </p>
+  <div>
+    <h3 class="alex">Social media</h3>
+    <ul class="list-style-type-none p-0">
+      <li v-for="(page, index) in socials" :key="index">
+        <FontAwesomeIcon :icon="`fa-brands fa-${page.icon}`" />
+        <a class="link-hi" target="_blank" rel="noopener" :href="page.url">{{
+          page.name
+        }}</a>
+      </li>
+    </ul>
+    <h3 class="alex">Contact me</h3>
+    <p>
+      Fanmail:
+      <EMail address="[email protected]" subject="Hey Enderman!" /><br />
+      Manager: <EMail address="[email protected]" /><br />
+      Abuse: <EMail address="[email protected]" />
+    </p>
+  </div>
 </template>

 <style scoped lang="scss"></style>