From f704ba6e6ce93f45aee87256b602c79537fa3171 Mon Sep 17 00:00:00 2001
From: Ben <git@othyn.com>
Date: Sat, 19 Mar 2022 19:18:45 +0000
Subject: [PATCH] Update skills and a bit of a content refresher

---
 README.md                                 |  25 +++-
 assets/sass/app.scss                      |   3 +
 assets/sass/components.scss               |  21 +++
 assets/sass/overrides.scss                |   8 +
 components/core/Block.vue                 |   4 +-
 components/core/Header.vue                |  16 ++
 components/sections/home/Projects.vue     | 169 +++++++++-------------
 components/sections/home/Skills.vue       |  74 ----------
 components/sections/home/SkillsFooter.vue |  16 ++
 components/sections/home/SkillsOne.vue    |  47 ++++++
 components/sections/home/SkillsThree.vue  |  19 +++
 components/sections/home/SkillsTwo.vue    |  34 +++++
 components/sections/home/Social.vue       |   9 --
 components/sections/home/Version.vue      |   2 +-
 pages/index.vue                           |  12 +-
 15 files changed, 266 insertions(+), 193 deletions(-)
 create mode 100644 assets/sass/overrides.scss
 create mode 100644 components/core/Header.vue
 delete mode 100644 components/sections/home/Skills.vue
 create mode 100644 components/sections/home/SkillsFooter.vue
 create mode 100644 components/sections/home/SkillsOne.vue
 create mode 100644 components/sections/home/SkillsThree.vue
 create mode 100644 components/sections/home/SkillsTwo.vue

diff --git a/README.md b/README.md
index d06db15..87388c3 100644
--- a/README.md
+++ b/README.md
@@ -79,8 +79,6 @@ Roadmap for things I would like to change over time.
 
 ### Changes
 
-- Change `htop` progress bars into proficiency levels based around technologies, career experience and overall skill set.
-- Change the highlighted GitHub repos in `ls -lah ~/git` to newer projects.
 - Change `history | grep me` into tabbed sections going over my key interest pillars; career, hardware, networking, cars, photography.
 
 ---
@@ -91,6 +89,29 @@ Any and all project changes for releases should be documented below. Versioning
 
 ---
 
+### Version 1.1.1
+
+[[Git Changes]](https://github.com/othyn/othyn.com/compare/v1.1.0...v1.1.1) Alteration of skills.
+
+#### Added
+
+- More easter eggs. It's the time of year!
+
+#### Changed
+
+- Altered the skills section to add up to date skills
+- Presentation of skills has been updated to be a much better visual representation
+
+#### Fixed
+
+- Nothing.
+
+#### Removed
+
+- Discord from social
+
+---
+
 ### Version 1.1.0
 
 [[Git Changes]](https://github.com/othyn/othyn.com/compare/v1.0.0...v1.1.0) Re-containerisation into a static NuxtJS image served by NGINX, this will significantly shrink the image and hosting overhead for such a simple site.
diff --git a/assets/sass/app.scss b/assets/sass/app.scss
index a20c71a..1dac8a3 100644
--- a/assets/sass/app.scss
+++ b/assets/sass/app.scss
@@ -24,3 +24,6 @@
 
 // Component styling
 @import 'components';
+
+// Override styling
+@import 'overrides';
diff --git a/assets/sass/components.scss b/assets/sass/components.scss
index 8a69089..ae27ad2 100644
--- a/assets/sass/components.scss
+++ b/assets/sass/components.scss
@@ -1 +1,22 @@
 // Blade components
+div.skills {
+  small {
+    display: block;
+    margin-bottom: 25px;
+  }
+
+  dl {
+    margin-bottom: 25px;
+    column-count: 3;
+    column-width: 250px;
+    //   column-rule: 1px dashed var(--secondary-color);
+
+    dd {
+      margin-bottom: 5px;
+
+      span {
+        color: var(--primary-color);
+      }
+    }
+  }
+}
diff --git a/assets/sass/overrides.scss b/assets/sass/overrides.scss
new file mode 100644
index 0000000..a40e88f
--- /dev/null
+++ b/assets/sass/overrides.scss
@@ -0,0 +1,8 @@
+table {
+  tbody {
+    td:first-child {
+      font-weight: inherit;
+      color: inherit;
+    }
+  }
+}
diff --git a/components/core/Block.vue b/components/core/Block.vue
index ca4684c..3ff8eb9 100644
--- a/components/core/Block.vue
+++ b/components/core/Block.vue
@@ -1,9 +1,7 @@
 <template>
   <div>
     <section :id="id">
-      <header>
-        <h1 class="terminal-prompt">{{ title }}</h1>
-      </header>
+      <CoreHeader :title="title"></CoreHeader>
 
       <slot></slot>
     </section>
diff --git a/components/core/Header.vue b/components/core/Header.vue
new file mode 100644
index 0000000..460878f
--- /dev/null
+++ b/components/core/Header.vue
@@ -0,0 +1,16 @@
+<template>
+  <header>
+    <h1 class="terminal-prompt">{{ title }}</h1>
+  </header>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
diff --git a/components/sections/home/Projects.vue b/components/sections/home/Projects.vue
index 27d0eb6..9cc1ed3 100644
--- a/components/sections/home/Projects.vue
+++ b/components/sections/home/Projects.vue
@@ -1,113 +1,78 @@
 <template>
   <div>
     <p>
-      A sample of some of the projects I've contributed to, not everything
-      listed here, in which for a full list - check out
+      I'm pretty active on
       <a
         href="https://github.com/othyn"
         target="_blank"
         rel="noopener noreferrer"
-        >my github</a
-      >.
+        >GitHub</a
+      >
+      and will try to contribute in what ever way I can, no matter the language.
+      I love the Open Source community and what we all stand for. I try to
+      contribute my fair share to make good software available to all. I've
+      learned some invaluable skills by taking this approach and it helps me
+      keep an open mind.
+    </p>
+    <p>
+      I've done things like
+      <a
+        href="https://github.com/jrmadsen67/laravel-route-coverage-test"
+        target="_blank"
+        rel="noopener noreferrer"
+        >implement an entire release pipeline for certain projects</a
+      >
+      to ease the development burden on the maintainer. I've released
+      <a
+        href="https://github.com/othyn/php-enum-enhancements"
+        target="_blank"
+        rel="noopener noreferrer"
+        >several</a
+      >
+      <a
+        href="https://github.com/othyn/DateStrings"
+        target="_blank"
+        rel="noopener noreferrer"
+        >packages</a
+      >
+      and
+      <a
+        href="https://github.com/othyn/macos-auto-clicker"
+        target="_blank"
+        rel="noopener noreferrer"
+        >applications</a
+      >
+      across multiple languages and platforms (and thats just what is public.)
+      If its not that, then I'll be throwing up
+      <a
+        href="https://gist.github.com/othyn"
+        target="_blank"
+        rel="noopener noreferrer"
+        >Gist's</a
+      >
+      throughout the day with useful
+      <a
+        href="https://gist.github.com/othyn/5f92f92f904ed59860012a92a29af26e"
+        target="_blank"
+        rel="noopener noreferrer"
+        >code snippets</a
+      >
+      and
+      <a
+        href="https://gist.github.com/othyn/29b82e39eb8cdd98adf1be77cbb62700"
+        target="_blank"
+        rel="noopener noreferrer"
+        >scripts</a
+      >. Funnily enough both of my favorite
+      <a
+        href="https://gist.github.com/othyn/5c7dc991d32b2db358f17fb1dc6e7f1f"
+        target="_blank"
+        rel="noopener noreferrer"
+        >scripts</a
+      >
+      on there being related to getting OS images mountable or bootable on
+      macOS, the later being from my days building custom Raspberry Pi images.
     </p>
-
-    <div class="terminal-card-container">
-      <div class="terminal-card">
-        <header>this website</header>
-        <div>The website you are seeing right now, it's source.</div>
-        <a
-          href="https://github.com/othyn/othyn.com"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="btn btn-block btn-ghost btn-default"
-          >view on github</a
-        >
-      </div>
-
-      <div class="terminal-card">
-        <header>emilyraisin.com</header>
-        <div>
-          A website for a very special person, but one created to be
-          professional and allow for expansion.
-        </div>
-        <a
-          href="https://github.com/othyn/emilyraisin.com"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="btn btn-block btn-ghost btn-default"
-          >view on github</a
-        >
-      </div>
-    </div>
-
-    <div class="terminal-card-container">
-      <div class="terminal-card">
-        <header>docker-compose-laravel</header>
-        <div>A Docker Compose setup for Laravel projects.</div>
-        <a
-          href="https://github.com/othyn/docker-compose-laravel"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="btn btn-block btn-ghost btn-default"
-          >view on github</a
-        >
-      </div>
-
-      <div class="terminal-card">
-        <header>char-count-es6</header>
-        <div>
-          A very simple and light weight ES library for managing input lengths.
-        </div>
-        <a
-          href="https://github.com/othyn/char-count-es6"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="btn btn-block btn-ghost btn-default"
-          >view on github</a
-        >
-      </div>
-    </div>
-
-    <div class="terminal-card-container">
-      <div class="terminal-card">
-        <header>factorio-mods</header>
-        <div>
-          Enjoy a spot of modding from time to time. Here are a few mods for the
-          game factorio, which is a bloody good game.
-        </div>
-        <a
-          href="https://github.com/othyn?utf8=%E2%9C%93&tab=repositories&q=factorio"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="btn btn-block btn-ghost btn-default"
-          >view on github</a
-        >
-      </div>
-
-      <div class="terminal-card">
-        <header>dotfiles</header>
-        <div>
-          My dotfiles which follow me where ever I go! Stores my complete setup,
-          with automated installation and management scripts. Although these may
-          be private at the time of viewing...
-        </div>
-        <a
-          href="https://github.com/othyn/dotfiles"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="btn btn-block btn-ghost btn-default"
-          >view on github</a
-        >
-      </div>
-    </div>
-
-    <a
-      href="https://github.com/othyn"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="btn btn-block btn-primary"
-      >my github</a
-    >
   </div>
 </template>
 
diff --git a/components/sections/home/Skills.vue b/components/sections/home/Skills.vue
deleted file mode 100644
index b491ba2..0000000
--- a/components/sections/home/Skills.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div>
-    <p>
-      A quick breakdown of how I rate my technical skills, not everything, but
-      the core stuff.
-    </p>
-
-    <p>PHP 5-7 [Symfony, Laravel, CodeIgniter, PHPUnit, Composer]</p>
-    <WidgetsProgressBar
-      :delay="5"
-      :progress="95"
-      label="There's always room for learning."
-    ></WidgetsProgressBar>
-
-    <p>JavaScript ES5-7 [Vue.js, Vuex, webpack]</p>
-    <WidgetsProgressBar
-      :delay="6"
-      :progress="65"
-      label="The rabbit hole is deep."
-    ></WidgetsProgressBar>
-
-    <p>Swift 1-5 & SwiftUI</p>
-    <WidgetsProgressBar
-      :delay="7"
-      :progress="45"
-      label="UI Components ♥."
-    ></WidgetsProgressBar>
-
-    <p>MySQL 5-8</p>
-    <WidgetsProgressBar
-      :delay="8"
-      :progress="80"
-      label="Big data. Big smarts."
-    ></WidgetsProgressBar>
-
-    <p>HTML 5 & CSS 3 [SASS, LESS]</p>
-    <WidgetsProgressBar
-      :delay="9"
-      :progress="95"
-      label="The basics."
-    ></WidgetsProgressBar>
-
-    <p>
-      Tooling [ZSH, dotfiles, Git, Docker, Vagrant, Sublime Suite, Hyper,
-      TablePlus]
-    </p>
-    <WidgetsProgressBar
-      :delay="10"
-      :progress="95"
-      label="I know how I like it. Today."
-    ></WidgetsProgressBar>
-
-    <p>AWS [EB, CD, EC2, S3, RDS] & DO</p>
-    <WidgetsProgressBar
-      :delay="12"
-      :progress="75"
-      label="Cloud. Bigly."
-    ></WidgetsProgressBar>
-
-    <p>
-      Computers [Hardware, Linux, macOS, Windows, virtualisation, network &
-      systems admin]
-    </p>
-    <WidgetsProgressBar
-      :delay="13"
-      :progress="85"
-      label="Anything with a plug."
-    ></WidgetsProgressBar>
-  </div>
-</template>
-
-<script>
-export default {}
-</script>
diff --git a/components/sections/home/SkillsFooter.vue b/components/sections/home/SkillsFooter.vue
new file mode 100644
index 0000000..26554ef
--- /dev/null
+++ b/components/sections/home/SkillsFooter.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="skills">
+    <small>
+      Wanna know something <i>neat?</i> This site is running on a homelab
+      cluster provisioned with Rancher!<br />There is a load more stuff to
+      mention here, but its less skills and more things like; dotfiles,
+      environments, homelab and supportive tooling, which are less about skills
+      and more about effective/efficient development, getting things just how
+      you like them all wrapped up in a GitOps, automatable fashion.
+    </small>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
diff --git a/components/sections/home/SkillsOne.vue b/components/sections/home/SkillsOne.vue
new file mode 100644
index 0000000..e2468ae
--- /dev/null
+++ b/components/sections/home/SkillsOne.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="skills">
+    <small>... and forever honing.</small>
+
+    <dl>
+      <dd><span>♥</span> | Articulate</dd>
+      <dd><span>♥</span> | Bash</dd>
+      <dd><span>♥</span> | Composer</dd>
+      <dd><span>♥</span> | <span class="rainbow rainbow-text">Docker</span></dd>
+      <dd><span>♥</span> | Elucidator</dd>
+      <dd><span>♥</span> | Empathetic</dd>
+      <dd><span>♥</span> | Git & GitOps</dd>
+      <dd>
+        <span>♥</span> | <span class="rainbow rainbow-text">Hardware</span>
+      </dd>
+      <dd><span>♥</span> | <WidgetsDomfetti>Humble</WidgetsDomfetti></dd>
+      <dd>
+        <span>♥</span> | <span class="rainbow rainbow-text">Kubernetes</span>
+      </dd>
+      <dd>
+        <span>♥</span> | <span class="rainbow rainbow-text">Laravel</span>
+      </dd>
+      <dd><span>♥</span> | <span class="rainbow rainbow-text">Linux</span></dd>
+      <dd><span>♥</span> | <span class="rainbow rainbow-text">macOS</span></dd>
+      <dd><span>♥</span> | MariaDB</dd>
+      <dd><span>★️</span> | MySQL</dd>
+      <dd><span>♥</span> | People</dd>
+      <dd><span>♥</span> | Perspicacity</dd>
+      <dd><span>♥</span> | <span class="rainbow rainbow-text">PHP</span></dd>
+      <dd><span>★️</span> | PHPUnit</dd>
+      <dd><span>★️</span> | PostgreSQL</dd>
+      <dd><span>★️</span> | Redis</dd>
+      <dd><span>★️</span> | Symfony</dd>
+      <dd>
+        <span>♥</span> |
+        <span class="rainbow rainbow-text">System Architecture</span>
+      </dd>
+      <dd><span>♥</span> | Unraid</dd>
+      <dd><span>★️</span> | Windows</dd>
+      <dd><span>♥</span> | ZSH</dd>
+    </dl>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
diff --git a/components/sections/home/SkillsThree.vue b/components/sections/home/SkillsThree.vue
new file mode 100644
index 0000000..31f74af
--- /dev/null
+++ b/components/sections/home/SkillsThree.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="skills">
+    <small>... and sometimes even learning.</small>
+
+    <dl>
+      <dd><span>★️</span> | Assembly</dd>
+      <dd><span>★️</span> | CoreML</dd>
+      <dd><span>♥</span> | Grafana</dd>
+      <dd><span>★️</span> | InfluxDB (+ Telegraf)</dd>
+      <dd><span>★️</span> | TensorFlow</dd>
+      <dd><span>★️</span> | Unity</dd>
+      <dd><span>★️</span> | WebGL</dd>
+    </dl>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
diff --git a/components/sections/home/SkillsTwo.vue b/components/sections/home/SkillsTwo.vue
new file mode 100644
index 0000000..aa9f0c9
--- /dev/null
+++ b/components/sections/home/SkillsTwo.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="skills">
+    <small>... and seeking second nature.</small>
+
+    <dl>
+      <dd><span>★️</span> | AWS (Acronym City)</dd>
+      <dd><span>★️</span> | CI / CD Pipelines</dd>
+      <dd><span>♥</span> | Cloudflare</dd>
+      <dd><span>♥</span> | Digital Ocean</dd>
+      <dd><span>★️</span> | GitHub Actions</dd>
+      <dd><span>★️</span> | JavaScript</dd>
+      <dd><span>♥</span> | LESS</dd>
+      <dd><span>♥</span> | Linode</dd>
+      <dd><span>♥</span> | Linux Administration</dd>
+      <dd><span>★</span> | Networking</dd>
+      <dd><span>★</span> | Nginx</dd>
+      <dd><span>♥</span> | NuxtJS</dd>
+      <dd><span>♥</span> | Python</dd>
+      <dd><span>★️</span> | SASS</dd>
+      <dd><span>♥</span> | Swift</dd>
+      <dd><span>♥</span> | SwiftUI</dd>
+      <dd><span>♥</span> | TypeScript</dd>
+      <dd><span>♥</span> | UniFi</dd>
+      <dd><span>♥</span> | Virtualisation</dd>
+      <dd><span>♥</span> | Vue.js</dd>
+      <dd><span>★️</span> | Vuex</dd>
+      <dd><span>♥</span> | Windows Server</dd>
+    </dl>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
diff --git a/components/sections/home/Social.vue b/components/sections/home/Social.vue
index 480ff47..00ce3e8 100644
--- a/components/sections/home/Social.vue
+++ b/components/sections/home/Social.vue
@@ -17,15 +17,6 @@
           ><WidgetsScramble>othyn</WidgetsScramble></a
         >
       </p>
-      <p>
-        discord:
-        <a
-          href="https://discordapp.com"
-          target="_blank"
-          rel="noopener noreferrer"
-          ><WidgetsScramble>othyn</WidgetsScramble></a
-        >
-      </p>
       <p>
         email:
         <a
diff --git a/components/sections/home/Version.vue b/components/sections/home/Version.vue
index 3886bf0..64d0ad7 100644
--- a/components/sections/home/Version.vue
+++ b/components/sections/home/Version.vue
@@ -6,7 +6,7 @@
         href="https://github.com/othyn/othyn.com/releases"
         target="_blank"
         rel="noopener noreferrer"
-        >1.1</a
+        >1.1.1</a
       >
       <a class="pull-right" href="#top">Top</a>
     </p>
diff --git a/pages/index.vue b/pages/index.vue
index 3deb073..c8a758f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,8 +4,16 @@
       <SectionsHomeAbout />
     </CoreBlock>
 
-    <CoreBlock id="skills" title="htop">
-      <SectionsHomeSkills />
+    <CoreBlock id="skills" title="htop | grep 'Second nature'">
+      <SectionsHomeSkillsOne />
+      <br />
+      <CoreHeader title="htop | grep 'Proficient'"></CoreHeader>
+      <SectionsHomeSkillsTwo />
+      <br />
+      <CoreHeader title="htop | grep 'Exploring & Loving'"></CoreHeader>
+      <SectionsHomeSkillsThree />
+      <br />
+      <SectionsHomeSkillsFooter />
     </CoreBlock>
 
     <CoreBlock id="projects" title="ls -lah ~/git">