contact, meta tags

tandpfun · Nov 28, 2021 · 9f7f92f · 9f7f92f
1 parent 1cc32f6
commit 9f7f92f
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 20 deletions.
diff --git a/components/About.vue b/components/About.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="max-w-xl">
+    <h1 class="mt-4 text-3xl font-bold">
+      Thijs/Coding <span class="text-lg">[he/they]</span>
+    </h1>
+    <p class="mt-4">
+      Hey there! I'm a fullstack developer, designer, moderator, and high school
+      student. I'm interested in development, moderation, and building thriving
+      online communities.
+    </p>
+    <p class="mt-4 text-xl">
+      <a
+        href="https://discord.gg/KWUxtWE8N5"
+        target="_blank"
+        class="hover:opacity-80 transition"
+        ><font-awesome-icon :icon="['fab', 'discord']"
+      /></a>
+      <a
+        href="https://twitter.com/cdngdev"
+        target="_blank"
+        class="hover:opacity-80 transition"
+        ><font-awesome-icon :icon="['fab', 'twitter']"
+      /></a>
+      <a
+        href="https://github.com/tandpfun"
+        target="_blank"
+        class="hover:opacity-80 transition"
+        ><font-awesome-icon :icon="['fab', 'github']"
+      /></a>
+    </p>
+  </div>
+</template>
diff --git a/components/AboutMe.vue b/components/AboutMe.vue
diff --git a/components/Contact.vue b/components/Contact.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h1 class="mt-4 text-2xl font-bold">Contact</h1>
+    <p class="mt-4">
+      Feel free to reach out to me! I check Discord most often, but any contact
+      method below works.
+    </p>
+    <div class="flex flex-col md:flex-row justify-center">
+      <a
+        href="https://discord.gg/KWUxtWE8N5"
+        target="_blank"
+        class="bg-indigo-500 bg-opacity-30 flex-1 md:mr-4 px-8 mt-6 py-4 rounded-md hover:scale-105 transform ease-in-out duration-300"
+      >
+        <font-awesome-icon :icon="['fab', 'discord']" /> @Coding#0001
+      </a>
+      <a
+        href="https://twitter.com/cdngdev"
+        target="_blank"
+        class="bg-blue-500 bg-opacity-30 flex-1 md:ml-4 mt-6 px-8 py-4 rounded-md hover:scale-105 transform ease-in-out duration-300"
+      >
+        <font-awesome-icon :icon="['fab', 'twitter']" /> @cdngdev
+      </a>
+    </div>
+    <div class="flex flex-col md:flex-row justify-center">
+      <a
+        href="mailto:[email protected]"
+        target="_blank"
+        class="bg-yellow-500 bg-opacity-30 flex-1 md:mr-4 px-8 mt-6 py-4 rounded-md hover:scale-105 transform ease-in-out duration-300"
+      >
+        <font-awesome-icon :icon="['fa', 'envelope']" /> [email protected]
+      </a>
+      <a
+        href="https://github.com/tandpfun"
+        target="_blank"
+        class="bg-purple-500 bg-opacity-30 flex-1 md:ml-4 mt-6 px-8 py-4 rounded-md hover:scale-105 transform ease-in-out duration-300"
+      >
+        <font-awesome-icon :icon="['fab', 'github']" /> tandpfun
+      </a>
+    </div>
+  </div>
+</template>
diff --git a/components/Project.vue b/components/Project.vue
@@ -13,7 +13,9 @@
       <div class="ml-4 flex flex-col justify-center">
         <h2 class="text-lg font-bold flex items-center">
           {{ name }}
-          <span v-if="year" class="text-sm font-normal ml-4">[{{ year }}]</span>
+          <span v-if="year" class="text-sm font-normal ml-4 hidden sm:block"
+            >[{{ year }}]</span
+          >
         </h2>
         <p class="text-sm">
           {{ description }}

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -11,10 +11,21 @@ export default {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' },
       { name: 'format-detection', content: 'telephone=no' },
+      {
+        name: 'description',
+        content:
+          "Hey there! I'm a fullstack developer, designer, moderator, and high school student. I'm interested in development, moderation, and building thriving online communities.",
+      },
+      {
+        name: 'og:description',
+        content:
+          "Hey there! I'm a fullstack developer, designer, moderator, and high school student. I'm interested in development, moderation, and building thriving online communities.",
+      },
+      { name: 'og:title', content: 'Thijs [he/they]' },
+      { name: 'og:image', content: '/favicon.png' },
     ],
-    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+    link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }],
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
@@ -30,11 +41,10 @@ export default {
 
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [
-    // https://go.nuxtjs.dev/eslint
     '@nuxtjs/eslint-module',
-    // https://go.nuxtjs.dev/tailwindcss
     '@nuxtjs/tailwindcss',
     '@nuxtjs/color-mode',
+    '@nuxtjs/fontawesome',
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
@@ -52,4 +62,11 @@ export default {
   colorMode: {
     classSuffix: '',
   },
+
+  fontawesome: {
+    icons: {
+      solid: true,
+      brands: true,
+    },
+  },
 }
diff --git a/package.json b/package.json
@@ -17,9 +17,12 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.14.7",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@nuxtjs/color-mode": "^2.1.1",
     "@nuxtjs/eslint-config": "^6.0.1",
     "@nuxtjs/eslint-module": "^3.0.2",
+    "@nuxtjs/fontawesome": "^1.1.2",
     "@nuxtjs/tailwindcss": "^4.2.0",
     "eslint": "^7.29.0",
     "eslint-config-prettier": "^8.3.0",

diff --git a/pages/index.vue b/pages/index.vue
@@ -9,12 +9,19 @@
         />
       </div>
 
-      <AboutMe />
+      <About />
       <Divider />
       <Projects />
       <Divider />
       <Donations />
       <Divider />
+      <Contact />
+      <Divider />
+
+      <div class="copyright text-center mb-8">
+        &copy; {{ new Date().getFullYear() }} Coding#0001 | Built with NuxtJS &
+        TailwindCSS
+      </div>
     </div>
   </div>
 </template>

diff --git a/static/favicon.ico b/static/favicon.ico
diff --git a/static/favicon.png b/static/favicon.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,7 +1,15 @@
 module.exports = {
   purge: {
     options: {
-      safelist: [],
+      safelist: [
+        'bg-indigo-500',
+        'bg-blue-400',
+        'bg-indigo-600',
+        'bg-blue-500',
+        'bg-yellow-500',
+        'bg-pink-500',
+        'bg-red-500',
+      ],
     },
   },
   darkMode: 'class', // or 'media' or 'class'

diff --git a/yarn.lock b/yarn.lock
@@ -947,6 +947,37 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
+"@fortawesome/fontawesome-svg-core@^1.2.27":
+  version "1.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
+  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-brands-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz#ec8a44dd383bcdd58aa7d1c96f38251e6fec9733"
+  integrity sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-solid-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
+  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/vue-fontawesome@^0.1.9":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.10.tgz#eeeec1e4e8850bed0468f938292b06cda793bf34"
+  integrity sha512-b2+SLF31h32LSepVcXe+BQ63yvbq5qmTCy4KfFogCYm2bn68H5sDWUnX+U7MBqnM2aeEk9M7xSoqGnu+wSdY6w==
+
 "@gar/promisify@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
@@ -1386,6 +1417,14 @@
     consola "^2.15.0"
     eslint-webpack-plugin "^2.4.1"
 
+"@nuxtjs/fontawesome@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/fontawesome/-/fontawesome-1.1.2.tgz#0add6519095b392bdffb6e3ad40f3026d20f5c44"
+  integrity sha512-QAfo7hdc6hiCOohdR861oNQ+riKW/kD22bYyvaC++xXiiC1hBQcrRQ6xXd5gln+6SKCwT09+C4kGjzTgrwtr7w==
+  dependencies:
+    "@fortawesome/fontawesome-svg-core" "^1.2.27"
+    "@fortawesome/vue-fontawesome" "^0.1.9"
+
 "@nuxtjs/proxy@^2.1.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@nuxtjs/proxy/-/proxy-2.1.0.tgz#fa7715a11d237fa1273503c4e9e137dd1bf5575b"