feat(tools): add a card deck of tools I use

shadow81627 · Dec 28, 2019 · 4c0a79e · 4c0a79e
1 parent dc8c1b4
commit 4c0a79e
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 4 deletions.
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -12,7 +12,7 @@
 - [Nuxt PWA](https://pwa.nuxtjs.org/) Progressive Web App
 - [Bootstrap Vue](https://bootstrap-vue.js.org/) Responsive, mobile-first, and ARIA accessible projects on the web using Vue.js and the world's most popular front-end CSS library
 - [Vuetify](https://vuetifyjs.com/) UI Library with beautifully handcrafted Material Components.
-- [VeeValidate](https://vuelidate.js.org/) Template Based Form Validation Framework for Vue.js
+- [VeeValidate](https://logaretm.github.io/vee-validate/) Template Based Form Validation Framework for Vue.js
 - [Fontawesome](https://fontawesome.com/) vector icons and social logos
 - [Cloudflare](https://www.cloudflare.com/) secure DNS, proxy, CDN, with DDos protection
 - [Cloudinary](https://cloudinary.com/) optimization, moderation, transformation image CDN

diff --git a/components/feature.vue b/components/feature.vue
@@ -1,15 +1,15 @@
 <template>
-  <b-col v-editable="blok" class="feature">
+  <b-col v-if="blok" v-editable="blok" class="feature">
     <v-card>
       <v-card-text>
-        <h3 class="text-nowrap">
+        <b-card-title class="text-nowrap">
           <font-awesome-icon
             v-if="blok.icon"
             :icon="blok.icon | split"
             title=""
           />
           {{ blok.name }}
-        </h3>
+        </b-card-title>
       </v-card-text>
     </v-card>
   </b-col>

diff --git a/components/tool.vue b/components/tool.vue
@@ -0,0 +1,42 @@
+<template>
+  <b-col v-if="blok" v-editable="blok">
+    <b-card>
+      <b-card-title class="text-nowrap" title-tag="h3">
+        <font-awesome-icon
+          v-if="blok.icon"
+          :icon="blok.icon | split"
+          title=""
+          class="text-muted"
+        />
+        {{ blok.heading }}
+      </b-card-title>
+      <b-card-sub-title class="mb-2">{{ blok.subheading }}</b-card-sub-title>
+      <v-card-text v-if="blok.text">{{ blok.text }}</v-card-text>
+      <b-button
+        :href="blok.href"
+        target="_blank"
+        rel="noopener"
+        variant="link"
+        size="sm"
+        class="text-decoration-none"
+      >
+        <span>Learn more about</span>
+        <span>{{ blok.heading }}</span>
+        <font-awesome-icon :icon="['fas', 'angle-right']" class="text-muted" />
+      </b-button>
+    </b-card>
+  </b-col>
+</template>
+
+<script>
+export default {
+  filters: {
+    split(value, sep = ' ') {
+      if (!value) return '';
+      value = value.toString();
+      return value.split(sep);
+    },
+  },
+  props: { blok: { type: Object, required: true } },
+};
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -73,6 +73,11 @@ export default {
           text: 'Resume',
           route: 'resume',
         },
+        {
+          icon: 'toolbox',
+          text: 'Tools',
+          route: 'tools',
+        },
       ],
     };
   },

diff --git a/pages/tools.vue b/pages/tools.vue
@@ -0,0 +1,160 @@
+<template>
+  <b-card-group columns>
+    <Feature
+      v-for="feature in features"
+      :key="feature.name"
+      :blok="feature"
+    ></Feature>
+  </b-card-group>
+</template>
+
+<script>
+import Feature from '~/components/tool';
+export default {
+  components: {
+    Feature,
+  },
+  data() {
+    return {
+      features: [
+        {
+          icon: 'fas mountain',
+          heading: 'Nuxt.js',
+          href: 'https://nuxtjs.org',
+          subheading: 'Progressive Vue.js Framework',
+          text:
+            'With Nuxt.js, your application will be optimized out of the box. We do our best to build performant applications by utilizing Vue.js and Node.js best practices. To squeeze every unnecessary bit out of your app Nuxt includes a bundle analyzer and lots of opportunities to fine-tune your app.',
+        },
+        {
+          icon: 'fab vuejs',
+          heading: 'Vue.js',
+          href: 'https://vuejs.org/',
+          subheading: 'Progressive JavaScript Framework',
+          text:
+            'Vue.js (commonly referred to as Vue; pronounced /vjuː/, like view) is an open-source Model–view–viewmodel JavaScript framework for building user interfaces and single-page applications.',
+        },
+        {
+          icon: 'fas server',
+          heading: 'Surge',
+          href: 'https://surge.sh',
+          subheading: 'Content delivery network (CDN)',
+          text: 'Free static web publishing',
+        },
+        {
+          icon: 'fab bootstrap',
+          heading: 'Bootstrap',
+          href: 'https://getbootstrap.com/',
+          subheading: 'Modern responsive component framework',
+          text:
+            "Responsive, mobile-first, and ARIA accessible projects on the web using Vue.js and the world's most popular front-end CSS library.",
+        },
+        {
+          icon: 'fas mobile-alt',
+          heading: 'Progressive Web Apps',
+          href: 'https://developers.google.com/web/progressive-web-apps',
+          subheading: 'Fast, reliable, engaging web apps',
+          text:
+            'Progressive Web Apps (PWA) are reliable, fast, and engaging, although there are many things that can take a PWA from a baseline to exemplary experience.',
+        },
+        {
+          icon: 'fas shapes',
+          heading: 'Vuetify',
+          href: 'https://vuetifyjs.com/',
+          subheading: 'Material Design Component Framework',
+          text: 'UI Library with beautifully handcrafted Material Components.',
+        },
+        {
+          icon: 'fas check-double',
+          heading: 'VeeValidate',
+          href: 'https://logaretm.github.io/vee-validate/',
+          subheading: 'Template Based Form Validation Framework for Vue.js',
+        },
+        {
+          icon: 'fab font-awesome',
+          heading: 'Fontawesome',
+          href: 'https://fontawesome.com/',
+          subheading: 'Vector icons and social logos',
+        },
+        {
+          icon: 'fas cloud',
+          heading: 'Cloudflare',
+          href: 'https://www.cloudflare.com/',
+          subheading: 'Secure DNS, proxy, CDN, with DDos protection',
+          text:
+            'Trusted by over 20 million Internet properties. Cloudflare provides a scalable, easy-to-use, unified control plane to deliver security, performance, and reliability for on-premises, hybrid, cloud, and SaaS applications.',
+        },
+        {
+          icon: 'fas images',
+          heading: 'Cloudinary',
+          href: 'https://cloudinary.com/',
+          subheading: 'Optimization, moderation, transformation image CDN',
+          text:
+            'Automate the entire image-processing pipeline: from uploads to on-the-fly manipulations to optimization to dynamic delivery with any CDN.',
+        },
+        {
+          icon: 'fas comment-alt',
+          heading: 'Storyblok',
+          href: 'https://www.storyblok.com/',
+          subheading: 'Headless CMS with a Visual Editor',
+        },
+        {
+          icon: 'fas lightbulb',
+          heading: 'Lighthouse',
+          href: 'https://github.com/GoogleChrome/lighthouse-ci',
+          text:
+            'Automate running Lighthouse for every commit, viewing the changes, and preventing regressions',
+        },
+        {
+          icon: 'fas hard-hat',
+          heading: 'Travis CI',
+          href: 'https://travis-ci.com/',
+          subheading: 'The simplest way to test and deploy your projects.',
+        },
+        {
+          icon: 'fas paint-roller',
+          heading: 'Renovate bot',
+          href: 'https://github.com/renovatebot/renovate',
+          subheading: 'Automated dependency updates',
+        },
+        {
+          icon: 'fas dog',
+          heading: 'Snyk',
+          href: 'https://snyk.io/',
+          subheading: 'Automated secutiry audits',
+          text:
+            'Snyk enables development teams to move quickly and securely by automatically finding and fixing issues faster than industry average.',
+        },
+        {
+          icon: 'fas cubes',
+          heading: 'Semantic Release',
+          href: 'https://github.com/semantic-release/semantic-release',
+          subheading:
+            'Fully automated version management and package publishing',
+        },
+        {
+          icon: 'fas code',
+          heading: 'Eslint',
+          href: 'https://eslint.org/',
+          subheading: 'static code analysis',
+        },
+        {
+          icon: 'fas file-code',
+          heading: 'Prettier',
+          href: 'https://prettier.io/',
+          subheading: 'opinionated code formatter',
+        },
+        {
+          icon: 'fas file-code',
+          heading: 'Docker',
+          href: 'https://www.docker.com/',
+          subheading: 'Debug your app, not your environment',
+          text: 'Securely build, share and run any application, anywhere',
+        },
+      ],
+    };
+  },
+};
+
+// - [Nginx](https://www.nginx.com/) Reverse proxy for caching, gzip and ssl local development
+// - [mkcert](https://github.com/FiloSottile/mkcert) make locally-trusted development certificates
+</script>
diff --git a/vuetify.options.js b/vuetify.options.js
@@ -14,6 +14,7 @@ import {
   mdiViewComfy,
   mdiHome,
   mdiAccountTie,
+  mdiToolbox,
 } from '@mdi/js';
 
 // vuetify.options.js
@@ -44,6 +45,7 @@ export default {
       view_comfy: mdiViewComfy,
       home: mdiHome,
       'account-tie': mdiAccountTie,
+      toolbox: mdiToolbox,
     },
   },
   // lang: {},