Adding tags for skills (#31)

* feat(skills): Adding tags for skills

Allows users to find pages by skills regardless of content type

* chore(grammar): Fixing grammar

src/components/Card.astro

@@ -9,10 +9,7 @@ const { href, title } = Astro.props;
 
 <li class="link-card">
   <a href={href}>
-    <h2>
-      {title}
-      <span>&rarr;</span>
-    </h2>
+    <h2>{title}</h2>
     <p>
       <slot />
     </p>

src/components/Footer.astro

@@ -7,11 +7,23 @@ const year = format(fullDate, "yyyy");
 <footer>
   <span class="sticky">
     © {year}
-    <a class="footer-link" href="https://biehlerj.xyz">Jacob Biehler</a>
+    <a
+      class="footer-link"
+      href="https://github.com/biehlerj/biehlerj.xyz"
+      target="_blank"
+      rel="noopener noreferrer me"
+    >
+      Jacob Biehler
+    </a>
   </span>
   <span>
     Powered by
-    <a class="footer-link" href="https://astro.build/">Astro</a>
+    <a
+      class="footer-link"
+      href="https://astro.build/"
+      target="_blank"
+      rel="noopener noreferrer me">Astro</a
+    >
   </span>
 </footer>
 

src/components/Menu.astro

@@ -17,6 +17,11 @@
       <span>Education</span>
     </a>
   </li>
+  <li>
+    <a href="/skills">
+      <span>Skills</span>
+    </a>
+  </li>
   <li>
     <a href="/resume.pdf">
       <span>Resume</span>

src/content/config.ts

@@ -5,13 +5,15 @@ const experienceCollection = defineCollection({
     title: z.string(),
     beginDate: z.date(),
     endDate: z.nullable(z.date()),
+    skills: z.string().array(),
   }),
 });
 
 const projectsCollection = defineCollection({
   schema: z.object({
     title: z.string(),
     date: z.date(),
+    skills: z.string().array(),
   }),
 });
 
@@ -22,6 +24,7 @@ const educationCollection = defineCollection({
     endDate: z.date(),
     location: z.string(),
     degree: z.string(),
+    skills: z.nullable(z.string().array()),
   }),
 });
 
@@ -36,4 +39,5 @@ export const collections = {
   experience: experienceCollection,
   projects: projectsCollection,
   education: educationCollection,
+  certs: certsCollection,
 };

src/content/education/code_school.md

@@ -4,6 +4,19 @@ beginDate: 2017-09-15
 endDate: 2019-12-15
 location: 'San Francisco, CA'
 degree: 'N/A'
+skills: [
+    "C",
+    "Shell Scripting",
+    "Python",
+    "Flask",
+    "SQLAlchemy",
+    "MySQL",
+    "Puppet",
+    "Nginx",
+    "JavaScript",
+    "JQuery",
+    "CSS",
+]
 ---
 
 At the coding school I attended in San Francisco I learned full stack software engineering. The curriculum covered shell
@@ -14,16 +27,3 @@ final project culminating in building a full stack clone of Airbnb.
 There was not only a focus on practical software engineering skills, but also theoretical knowledge and technical
 interview prep. The curriculum included learning common algorithms and data structures like breadth first search and
 linked lists.
-
-Technologies Learned:
-
-- C
-- Shell Scripting
-- Python
-- Flask
-- SQLAlchemy
-- MySQL
-- Puppet
-- Nginx
-- JavaScript
-- JQuery

src/content/education/mesa_college.md

@@ -4,6 +4,7 @@ beginDate: 2012-08-15
 endDate: 2017-06-15
 location: 'San Diego, CA'
 degree: "Associate's Degree of Science in Business Administration"
+skills: []
 ---
 
 At Mesa College I did general education for an undergraduate degree in Business Administration. I first got an Associate's

src/content/experience/moebius-solutions.md

@@ -2,6 +2,32 @@
 title: "Moebius Solutions"
 beginDate: 2019-12-03
 endDate: 2023-01-10
+skills: [
+    "TypeScript",
+    "JavaScript",
+    "React",
+    "Redux",
+    "Ramda",
+    "Electron",
+    "Python",
+    "Flask",
+    "SQLAlchemy",
+    "Java",
+    "JaxRS",
+    "Flutter",
+    "HTML5",
+    "CSS",
+    "Less",
+    "LaTeX",
+    "PostgreSQL",
+    "Redis",
+    "Docker",
+    "OpenShift",
+    "Jenkins",
+    "Visual Studio Code",
+    "IntelliJ",
+    "Shell Scripting",
+]
 ---
 
 [Moebius Solutions, Inc.](https://www.moesol.com/) develops advanced Command and Control software, middleware, and integration platforms for the
@@ -21,29 +47,3 @@ React, and Redux
 * Documented test procedures for the customer end users using [LaTeX](https://www.latex-project.org/)
 * Created a Java class in existing code base to dynamically generate markdown with the status of an application and
 rendered the document in the browser using drawdown.js to convert the markdown to HTML
-
-## Technologies Used
-
-* TypeScript
-* JavaScript
-* React
-* Redux
-* Ramda
-* Electron
-* Python3
-* Flask
-* SQLAlchemy
-* Java
-* JaxRS
-* Flutter
-* HTML5
-* CSS
-* Less
-* LaTeX
-* PostgreSQL
-* Redis
-* Docker
-* OpenShift
-* Jenkins
-* Visual Studio Code
-* IntelliJ

src/content/experience/scoreshuttle.md

@@ -2,6 +2,14 @@
 title: "ScoreShuttle"
 beginDate: 2019-01-07
 endDate: 2019-05-10
+skills: [
+    "TypeScript",
+    "Hapi.js",
+    "Sequelize.js",
+    "PostgreSQL",
+    "Visual Studio Code",
+    "Insomnia",
+]
 ---
 
 ScoreShuttle is a service that helps manage credit and dispute management automatically. It helps users review their
@@ -13,12 +21,3 @@ At ScoreShuttle I was a Jr. Software Engineer and worked on the following things
 - Created administrator tools to manage customer accounts, get sales data, and allow for 3rd parties to be added
 to the service
 - Fixed a bug in the email template API to correctly format and send emails to customers
-
-Technologies used:
-
-- TypeScript
-- Hapi.js
-- Sequelize.js
-- PostgreSQL
-- Visual Studio Code
-- Insomnia

src/content/projects/cointop.md

@@ -1,6 +1,7 @@
 ---
 title: 'Cointop'
 date: 2020-08-10
+skills: ["Go"]
 ---
 
 [Cointop](https://github.com/cointop-sh/cointop) is a CLI utility written in Go to track cryptocurrencies.
@@ -13,7 +14,3 @@ defined the config.toml file for Cointop would be placed into `$XDG_CONFIG_HOME/
 `$XDG_CONFIG_HOME/cointop/`.
 
 You can find the code and subsequent tests that were added in [this PR on GitHub](https://github.com/cointop-sh/cointop/pull/58)
-
-Skills used:
-
-- Go

src/content/projects/conveyor.md

@@ -1,6 +1,13 @@
 ---
 title: 'Conveyor'
 date: 2020-01-17
+skills: [
+    "JavaScript",
+    "TypeScript",
+    "React",
+    "Redux",
+    "Ramda",
+]
 ---
 
 [Conveyor](https://github.com/autoinvent/conveyor) is a series of frontend libraries for building an [AutoInvent](https://github.com/autoinvent)
@@ -21,11 +28,3 @@ Footer component if there was an item that was summable (ie prices) and properly
 locale information.
 
 You can find all my commits to the repository on the [conveyor GitHub page](https://github.com/autoinvent/conveyor/commits?author=biehlerj)
-
-Skills used:
-
-- JavaScript
-- TypeScript
-- React
-- Redux
-- Ramda

src/content/projects/magql.md

@@ -1,6 +1,11 @@
 ---
 title: 'Magql'
 date: 2020-01-07
+skills: [
+    "Python",
+    "Flask",
+    "GraphQL",
+]
 ---
 
 [Magql](https://github.com/autoinvent/magql) is a GraphQL framework for Python. It generates full-featured, customizable
@@ -9,9 +14,3 @@ GraphQL API for your data.
 My contributions to Magql was to automatically generate the proper primary key types from SQL to GraphQL.
 
 You can find all my commits to magql on the [GitHub page](https://github.com/autoinvent/magql/commits?author=biehlerj)
-
-Skills used:
-
-- Python
-- Flask
-- GraphQL

src/layouts/EducationEntry.astro

@@ -20,6 +20,24 @@ const { frontmatter } = Astro.props;
         {frontmatter.location}
       </div>
       <slot />
+      <div>
+        Skills:
+        <br />
+        {
+          frontmatter.skills.sort().map((skill) => (
+            <li>
+              <a href={`/skills/${skill}`}>{skill}</a>
+            </li>
+          ))
+        }
+      </div>
     </article>
   </div>
 </Layout>
+
+<style>
+  li {
+    display: inline-block;
+    padding: 1px 2px;
+  }
+</style>

src/layouts/ExperienceEntry.astro

@@ -16,6 +16,24 @@ const { frontmatter } = Astro.props;
         />
       </div>
       <slot />
+      <div>
+        Skills:
+        <br />
+        {
+          frontmatter.skills.sort().map((skill) => (
+            <li>
+              <a href={`/skills/${skill}`}>{skill}</a>
+            </li>
+          ))
+        }
+      </div>
     </article>
   </div>
 </Layout>
+
+<style>
+  li {
+    display: inline-block;
+    padding: 1px 2px;
+  }
+</style>

src/layouts/ProjectEntry.astro

@@ -13,6 +13,24 @@ const { frontmatter } = Astro.props;
         <Date date={frontmatter.date} />
       </div>
       <slot />
+      <div>
+        Skills:
+        <br />
+        {
+          frontmatter.skills.sort().map((skill) => (
+            <li>
+              <a href={`/skills/${skill}`}>{skill}</a>
+            </li>
+          ))
+        }
+      </div>
     </article>
   </div>
 </Layout>
+
+<style>
+  li {
+    display: inline-block;
+    padding: 1px 2px;
+  }
+</style>

src/pages/education.astro

@@ -3,7 +3,6 @@ import "@styles/global.css";
 import Layout from "@layouts/Layout.astro";
 import { getCollection } from "astro:content";
 import MultiDate from "@components/MultiDate.astro";
-import MonthYearDate from "@components/MonthYearDate.astro";
 import Card from "@components/Card.astro";
 import Date from "@components/Date.astro";