Merge pull request #2 from kendallroth/minor_updates

Minor site updates

CHANGELOG.md

@@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.4.1] - 2022-02-26
+### Updated
+- Updated skills/technologies list
+- Minor content fixes/improvements
+- Fix broken Git commit reference
+
 ## [1.4.0] - 2022-01-20
 ### Updated
 - Updated PayMe project

config.js

@@ -1,11 +1,9 @@
 const { version } = require("./package.json");
 
 const nodeEnv = process.env.NODE_ENV || "development";
-const gitCommit = process.env.COMMIT_REF || null;
 
 module.exports = {
   isDevelopment: nodeEnv === "development",
-  gitCommit,
   version,
   node: {
     env: nodeEnv,

content/skills/skills.json

@@ -3,7 +3,7 @@
     {
       "name": "TypeScript",
       "description": "",
-      "image": "javascript",
+      "image": "typescript",
       "rating": 95,
       "tags": ["web"]
     },
@@ -22,11 +22,11 @@
       "tags": ["app"]
     },
     {
-      "name": "Node",
+      "name": "NestJS / Node",
       "description": "",
-      "image": "node",
-      "rating": 75,
-      "tags": ["scripting"]
+      "image": "nestjs",
+      "rating": 80,
+      "tags": ["server"]
     },
     {
       "name": "CSS / SCSS",
@@ -43,9 +43,9 @@
       "tags": ["web"]
     },
     {
-      "name": "GitHub / GitHub",
+      "name": "GitHub / GitLab",
       "description": "",
-      "image": "gitlab",
+      "image": "github",
       "rating": 90,
       "tags": ["management"]
     },

gridsome.server.js

@@ -7,15 +7,20 @@ function slugify(text) {
     .toString()
     .toLowerCase()
     .replace(/\s+/g, "-") // Replace spaces with -
-    .replace(/[^\w\-]+/g, "") // Remove all non-word chars
-    .replace(/\-\-+/g, "-") // Replace multiple - with single -
+    .replace(/[^\w-]+/g, "") // Remove all non-word chars
+    .replace(/--+/g, "-") // Replace multiple - with single -
     .replace(/^-+/, "") // Trim - from start of text
     .replace(/-+$/, ""); // Trim - from end of text
 }
 
 module.exports = function (api) {
   api.loadSource(({ addMetadata }) => {
+    const gitCommit = process.env.COMMIT_REF
+      ? process.env.COMMIT_REF.slice(0, 7)
+      : "N/A";
+
     addMetadata("site", siteMetadata);
+    addMetadata("gitCommit", gitCommit);
   });
 
   api.loadSource((actions) => {

src/components/aboutPage/AboutCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="{ 'is-primary': primary }" class="about-card card">
     <div class="about-card__header elevation-2">
-      <MdiIcon :icon="icons[icon]" class="about-card__icon" />
+      <mdi-icon :icon="icons[icon]" class="about-card__icon" />
       <div class="about-card__titles">
         <h2 class="about-card__title">
           {{ title }}

src/components/homePage/EmploymentCard.vue

@@ -17,12 +17,12 @@
               target="_blank"
               @click.stop
             >
-              <MdiIcon :icon="icons.mdiLink" />
+              <mdi-icon :icon="icons.mdiLink" />
             </a>
           </div>
           <div class="employment-card__header__position">
             {{ job.position }}
-            <span class="employment-card__header__types">
+            <span v-if="jobTypes" class="employment-card__header__types">
               ({{ jobTypes }})
             </span>
           </div>
@@ -36,7 +36,7 @@
           </div>
         </div>
       </div>
-      <MdiIcon
+      <mdi-icon
         v-if="!placeholder"
         :class="{ 'is-active': isShown }"
         :icon="icons.mdiChevronUp"

src/components/homePage/ProjectCard.vue

@@ -11,7 +11,7 @@
             :to="`/project/${project.slug}/`"
             class="project-card__overlay__action"
           >
-            <MdiIcon :icon="icons.mdiFileDocument" />
+            <mdi-icon :icon="icons.mdiFileDocument" />
             <span>Details</span>
           </g-link>
           <a
@@ -21,7 +21,7 @@
             rel="noreferrer"
             target="_blank"
           >
-            <MdiIcon :icon="icons.mdiLink" />
+            <mdi-icon :icon="icons.mdiLink" />
             <span>Visit</span>
           </a>
         </div>
@@ -36,7 +36,7 @@
         </span>
       </div>
       <div class="is-right">
-        <MdiIcon
+        <mdi-icon
           v-if="project.pinned"
           :icon="icons.mdiPin"
           class="project-card__pin"

src/components/layout/Modal.vue

@@ -20,7 +20,7 @@
             type="button"
             @click="close"
           >
-            <MdiIcon :icon="icons.close" />
+            <mdi-icon :icon="icons.close" />
           </button>
         </slot>
         <div id="modal__content" class="modal__body">

src/components/singleUse/TheAppFooter.vue → src/components/single/TheAppFooter.vue

@@ -22,7 +22,7 @@
         © Kendall Roth {{ new Date().getFullYear() }}
       </div>
       <div class="footer__info__developer">
-        Made with <MdiIcon :icon="icons.mdiHeart" class="has-text-love mx-xs" />
+        Made with <mdi-icon :icon="icons.mdiHeart" class="has-text-love mx-xs" />
         from scratch using&nbsp;
         <a
           class="has-text-gridsome"
@@ -35,8 +35,8 @@
       </div>
       <div class="footer__version">
         <span class="footer__version__number">v{{ version }}</span>
-        <span v-if="gitCommit || true" class="footer__version__commit">
-          &ensp;@&ensp;{{ gitCommit || "c92ka9e" }}
+        <span v-if="gitCommit" class="footer__version__commit">
+          &ensp;@&ensp;{{ gitCommit }}
         </span>
       </div>
     </div>
@@ -46,6 +46,7 @@
 <static-query>
 query {
   metadata {
+    gitCommit
     site {
       contactEmail
       siteName
@@ -86,7 +87,7 @@ export default {
       return this.$static.metadata.site.contactEmail;
     },
     gitCommit() {
-      return config.gitCommit;
+      return this.$static.metadata.gitCommit;
     },
     version() {
       return config.version;
@@ -124,7 +125,6 @@ $footer-icon-size: 48px;
 
   &:hover {
     background-color: $color-grey-dark;
-    font-weight: 500;
   }
 }
 

src/layouts/Default.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="app__layout">
-    <TheAppHeader :transparent="headerTransparent" />
+    <the-app-header :transparent="headerTransparent" />
     <!-- Default content slot -->
     <div :class="{ 'app__content--offset': headerOffset }" class="app__content">
       <slot />
     </div>
-    <TheAppFooter v-if="includeFooter" />
+    <the-app-footer v-if="includeFooter" />
     <div v-if="isDebugBreakpointShown" class="debug-breakpoint">
       {{ $breakpoint.name }}
     </div>
@@ -22,8 +22,8 @@ query {
 
 <script>
 // Components
-import TheAppFooter from "@components/singleUse/TheAppFooter";
-import TheAppHeader from "@components/singleUse/TheAppHeader";
+import TheAppFooter from "@components/single/TheAppFooter";
+import TheAppHeader from "@components/single/TheAppHeader";
 
 // Utilities
 import config from "@config";

src/main.js

@@ -23,7 +23,7 @@ export default function (Vue, { router }) {
   Vue.component("MdiIcon", MdiIcon);
   Vue.component("Hover", Hover);
   // Set default layout as a global component
-  Vue.component("Layout", DefaultLayout);
+  Vue.component("PageLayout", DefaultLayout);
   Vue.component("PageSection", PageSection);
 
   Vue.filter("capitalize", capitalizeFilter);

src/pages/404.vue

@@ -1,5 +1,5 @@
 <template>
-  <Layout :headerOffset="false" :includeFooter="false">
+  <page-layout :headerOffset="false" :includeFooter="false">
     <Hero>
       <div class="page-not-found">
         <h2 class="page-not-found__title mb-md">404</h2>
@@ -14,7 +14,7 @@
         </g-link>
       </div>
     </Hero>
-  </Layout>
+  </page-layout>
 </template>
 
 <script>

src/pages/About.vue

@@ -1,8 +1,8 @@
 <template>
-  <Layout>
-    <PageSection class="py-lg" size="sm-10 md-8">
+  <page-layout>
+    <page-section class="py-lg" size="sm-10 md-8">
       <div class="about-cards">
-        <AboutCard
+        <about-card
           v-for="(card, idx) in aboutCards"
           :key="card.title"
           :caption="card.caption"
@@ -12,8 +12,8 @@
           :title="card.title"
         />
       </div>
-    </PageSection>
-  </Layout>
+    </page-section>
+  </page-layout>
 </template>
 
 <page-query>

src/pages/Index.vue

@@ -1,24 +1,24 @@
 <template>
-  <Layout :headerOffset="false">
+  <page-layout :headerOffset="false">
     <Hero>
       <div class="hero__content">
         <h2 class="hero__title">
           Hi, I'm <span class="is-emphasized">Kendall Roth</span>.
         </h2>
         <h3 class="hero__subtitle">I'm a full-stack web developer.</h3>
         <button class="section-button hero__button" @click="scrollToPortfolio">
-          View My Portfolio<MdiIcon :icon="icons.mdiBriefcase" class="ml-xs" />
+          View My Portfolio<mdi-icon :icon="icons.mdiBriefcase" class="ml-xs" />
         </button>
       </div>
     </Hero>
 
     <div class="welcome-section">Welcome to my online portfolio!</div>
 
-    <PageSection ref="firstSectionRef" class="about-section py-lg">
+    <page-section ref="firstSectionRef" class="about-section py-lg">
       <h2 class="section-title mb-sm">What I Do</h2>
       <blockquote class="about-section__quote">
-        I‘m passionate about web design and development, focusing on clean and
-        simple design/functionality. I strive to be a dedicated team player
+        I&rsquo;m passionate about web design and development, focusing on clean
+        and simple design/functionality. I strive to be a dedicated team player
         while adapting to different environments and tasks.
       </blockquote>
       <div class="about-section__cards">
@@ -28,12 +28,12 @@
           :details="card"
         />
       </div>
-    </PageSection>
+    </page-section>
 
-    <PageSection class="projects-section py-lg">
+    <page-section class="projects-section py-lg">
       <h2 class="section-title mb-md">What I've Done</h2>
       <div class="projects-section__cards">
-        <ProjectCard
+        <project-card
           v-for="project in projectCards"
           :key="project.name"
           :project="project"
@@ -42,22 +42,26 @@
       <g-link class="section-button projects-section__button" to="/projects">
         All Projects
       </g-link>
-    </PageSection>
+    </page-section>
 
-    <PageSection class="skills-section py-lg" size="lg-10">
+    <page-section class="skills-section py-lg" size="lg-10">
       <h2 class="section-title mb-md">What I've Worked With</h2>
       <div class="skills-section__cards">
-        <SkillCard v-for="skill in skillCards" :key="skill.id" :skill="skill" />
+        <skill-card
+          v-for="skill in skillCards"
+          :key="skill.id"
+          :skill="skill"
+        />
       </div>
       <div class="skills-section__other">
-        * I have also experimented with Java, NestJS, Android, and a few others.
+        * I have also experimented with Electron, Java, and a few others.
       </div>
-    </PageSection>
+    </page-section>
 
-    <PageSection class="employment-section" size="sm-10 md-8 lg-7">
+    <page-section class="employment-section" size="sm-10 md-8 lg-7">
       <h2 class="section-title mb-md">Where I've Worked</h2>
       <div class="employment-section__cards">
-        <EmploymentCard
+        <employment-card
           :job="{
             name: '[ Your Name ]',
             position: '[ Interesting Title ]',
@@ -66,10 +70,10 @@
           placeholder
         />
         <hr class="employment-section__divider" />
-        <EmploymentCard v-for="job in jobCards" :key="job.title" :job="job" />
+        <employment-card v-for="job in jobCards" :key="job.title" :job="job" />
       </div>
-    </PageSection>
-  </Layout>
+    </page-section>
+  </page-layout>
 </template>
 
 <page-query>

src/pages/Projects.vue

@@ -1,6 +1,6 @@
 <template>
-  <Layout>
-    <PageSection class="projects-page py-lg">
+  <page-layout>
+    <page-section class="projects-page py-lg">
       <h2 class="section-title mb-md">What I've Done</h2>
       <blockquote class="projects-page__quote">
         These projects represent a wide variety of the items I've experimented
@@ -13,8 +13,8 @@
           :project="project"
         />
       </div>
-    </PageSection>
-  </Layout>
+    </page-section>
+  </page-layout>
 </template>
 
 <page-query>