Skills! And completed resume!

Signed-off-by: Shauna Gordon <[email protected]>

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "chart.js": "^4.4.3",
     "d3": "^7.9.0",
+    "dayjs": "^1.11.13",
     "marked": "^15.0.3",
     "pinia": "^2.2.2",
     "ramda": "^0.30.1",

public/css/print.css

@@ -35,6 +35,12 @@ h1 {
   border-bottom: 1px solid var(--color-accent-light);
 }
 
+.skill-entry {
+  li {
+    list-style-type: disc;
+  }
+}
+
 .job-entry {
   margin-bottom: var(--gutter-wide);
 }
@@ -89,3 +95,7 @@ ul {
 .job-entry, .education-entry {
   margin-bottom: var(--gutter-normal);
 }
+
+.job-entry, .education-entry, .skill-entry, .project-entry {
+  break-inside: avoid;
+}

src/components/sections/PrintFriendly.vue

@@ -18,9 +18,15 @@
     <div v-if="resume?.basics?.summary" v-html="fromMarkdown(resume?.basics?.summary)" class="summary"></div>
 
     <h2 class="section-title">Skills</h2>
-    <ul>
-        <li class="skill-entry" v-for="(skill, i) in getSkills(resume?.skills)" :key="i">{{ skill.name }}: {{ skill.level }}</li>
-    </ul>
+    <div class="skill-entry" v-for="(level, i) in getSkillLevels()" :key="i">
+        <h3>{{ level }}</h3>
+        <ul>
+            <li v-for="(items, category) in resume?.skills?.[level.toLowerCase()]" :key="category">
+                <strong>{{ category }}: </strong>
+                {{ items.join(', ') }}
+            </li>
+        </ul>
+    </div>
 
     <h2 class="section-title">Experience</h2>
     <div v-for="(job, i) in resume?.work" :key="i" class="job-entry">
@@ -38,16 +44,18 @@
     </div>
 
     <h2 class="section-title">Projects</h2>
-    <div v-for="(project, i) in resume?.projects" :key="i" class="project-entry">
-        <h3>{{ project.name }}</h3>
-        <div class="company-line">
-            <span class="company">{{ project.entity }}</span>
-            <span class="date">{{ toWordMonthFormat(project.startDate) }} - {{ toWordMonthFormat(project.endDate) || 'Ongoing' }}</span>
+    <template v-for="(project, i) in resume?.projects" :key="i">
+        <div class="project-entry" v-if="isCurrent(project.startDate)">
+            <h3>{{ project.name }}</h3>
+            <div class="company-line">
+                <span class="company">{{ project.entity }}</span>
+                <span class="date">{{ toWordMonthFormat(project.startDate) }} - {{ toWordMonthFormat(project.endDate) || 'Ongoing' }}</span>
+            </div>
+            <ul>
+                <li v-for="(item, i) in project.highlights" :key="i" v-html="fromInlineMarkdown(item)"></li>
+            </ul>
         </div>
-        <ul>
-            <li v-for="(item, i) in project.highlights" :key="i" v-html="fromInlineMarkdown(item)"></li>
-        </ul>
-    </div>
+    </template>
 
     <h2 class="section-title">Education</h2>
     <div v-for="(school, i) in resume?.education" :key="i" class="education-entry">
@@ -64,15 +72,15 @@ import { useProfiles } from '../../utils/profiles';
 import { useMarkdown } from '../../utils/markdown';
 import { useDateUtils } from '../../utils/dateUtils';
 import { useSkills } from '../../utils/skills';
-import { onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
 
 const { networks, getProfileIcon } = useProfiles();
 const { fromMarkdown, fromInlineMarkdown } = useMarkdown();
-const { toWordMonthFormat } = useDateUtils();
-const { getSkills } = useSkills();
+const { toWordMonthFormat, isCurrent } = useDateUtils();
+const { getSkillLevels } = useSkills();
 
 onMounted(() => {
-    getSkills(props.resume.skills)
+    getSkillLevels(props?.resume?.skills)
 })
 
 </script>

src/utils/dateUtils.js

@@ -1,17 +1,14 @@
+import dayjs from "dayjs";
+
 export const useDateUtils = () => {
-    const isCurrent = (date, cutoff = 5) => !date || Date.parse(date) >= Date.parse((new Date()).getFullYear() - cutoff);
+    const isCurrent = (date, cutoff = 5) => !date || dayjs(date, 'YYYY-MM') >= (dayjs().year() - cutoff);
 
     const toWordMonthFormat = (rawDate) => {
         if(!rawDate) return;
 
-        const date = new Date(Date.parse(rawDate));
-
-        const options = {
-            month: 'short',
-            year: 'numeric'
-        };
+        const date = dayjs(rawDate, 'YYYY-MM');
 
-        return date.toLocaleString('default', options);
+        return date.format('MMMM YYYY')
     }
 
     return { isCurrent, toWordMonthFormat };

src/utils/skills.js

@@ -9,20 +9,17 @@ export const useSkills = () => {
         'Foundational', // Confident on basics, but still learning, 1-3 months regular hands-on (C++)
         'Experienced', // Confident on common aspects of language, knowledgeable about some of the more language-specific things, 3-12 months regular hands-on (Shell scripting)
         'Advanced', // Knowledgeable enough to teach to others, knows about some of the quirks and inner workings, 1-3 years regular hands-on (Python)
-        'Master' // Can bend to my will, 3+ years regular hands-on, 1+ full time jobs with focus on it (PHP, JS)
+        'Expert' // Can bend to my will, 3+ years regular hands-on, 1+ full time jobs with focus on it (PHP, JS)
     ];
 
     /**
      *
-     * @param {array[object]} allSkills
      * @param {int} minLevel | Index of skill level to filter starting at
-     * @returns array[object]
+     * @returns array[string]
      */
-    const getSkills = (allSkills, minLevel = 2) => {
-        const selectedLevels = R.slice(minLevel, Infinity, skillLevels);
-
-        return Object.values(allSkills).filter(item => selectedLevels.includes(item.level));
+    const getSkillLevels = (minLevel = 3) => {
+        return R.reverse(R.slice(minLevel, Infinity, skillLevels));
     };
 
-    return { skillLevels, getSkills };
+    return { skillLevels, getSkillLevels };
 }

vite.config.js

@@ -1,14 +1,9 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import PDF from 'vite-plugin-pdf';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
-    PDF({
-      outDir: './',
-      pages: '/'
-    })
+    vue()
   ],
 })

yarn.lock

@@ -1204,6 +1204,11 @@ d3@^7.9.0:
     d3-transition "3"
     d3-zoom "3"
 
+dayjs@^1.11.13:
+  version "1.11.13"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
 debug@^4.1.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.7:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
@@ -1518,11 +1523,6 @@ fs-extra@^11.2.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
-[email protected]:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -1926,20 +1926,6 @@ pinia@^2.2.2:
     "@vue/devtools-api" "^6.6.3"
     vue-demi "^0.14.10"
 
-[email protected]:
-  version "1.49.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.49.1.tgz#32c62f046e950f586ff9e35ed490a424f2248015"
-  integrity sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==
-
-playwright@^1.49.1:
-  version "1.49.1"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.49.1.tgz#830266dbca3008022afa7b4783565db9944ded7c"
-  integrity sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==
-  dependencies:
-    playwright-core "1.49.1"
-  optionalDependencies:
-    fsevents "2.3.2"
-
 postcss-selector-parser@^6.0.15:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
@@ -2204,13 +2190,6 @@ [email protected]:
     picocolors "^1.1.1"
     sirv "^3.0.0"
 
-vite-plugin-pdf@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/vite-plugin-pdf/-/vite-plugin-pdf-0.1.0.tgz#38327d665e41b7d4eba1d3df8b668dc90d84e036"
-  integrity sha512-6chMMAfBVzEJBTw2QlYRDjfp/7gVTL9l1K3hyBDW5ZR3jVbOlkEUFdZpKFbbZjl0vY+LN2K+0b8Hv4FLgjZZTA==
-  dependencies:
-    picocolors "^1.0.0"
-
 vite-plugin-vue-devtools@^7.3.1:
   version "7.6.7"
   resolved "https://registry.yarnpkg.com/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.6.7.tgz#dce3162f50cf6798811692a59928f25c6893c004"