From 74e960f14ee141b5745498f991ecc8bf46ebf177 Mon Sep 17 00:00:00 2001
From: Triston Armstrong <tarmstrong95@proton.me>
Date: Mon, 25 Dec 2023 19:28:08 -0600
Subject: [PATCH] add job, project, and skill components

---
 components/Job.js     | 14 ++++++++++++++
 components/Project.js | 18 ++++++++++++++++++
 components/Skill.js   | 31 +++++++++++++++++++++++++++++++
 3 files changed, 63 insertions(+)
 create mode 100644 components/Job.js
 create mode 100644 components/Project.js
 create mode 100644 components/Skill.js

diff --git a/components/Job.js b/components/Job.js
new file mode 100644
index 0000000..8ac7021
--- /dev/null
+++ b/components/Job.js
@@ -0,0 +1,14 @@
+export default function Job({ logo, name, details, dateFrom, dateTo }) {
+  return (
+    <div className="flex items-center gap-x-3 border rounded-xl w-full p-2 bg-gray-200">
+      <img src={logo} className="w-10 h-10 rounded-full" />
+      <div className="flex flex-col flex-1">
+        <div className="flex justify-between">
+          <span className="block text-sm font-bold text-gray-900">{name}</span>
+          <span className="block text-xs font-bold text-gray-500">{dateFrom} - {dateTo}</span>
+        </div>
+        <span className="block text-xs text-gray-700">{details}</span>
+      </div>
+    </div>
+  )
+}
diff --git a/components/Project.js b/components/Project.js
new file mode 100644
index 0000000..9827daf
--- /dev/null
+++ b/components/Project.js
@@ -0,0 +1,18 @@
+export default function Project({ label, date, url }) {
+  return (
+    <div className="flex flex-row items-baseline justify-between gap-2">
+      <p className="text-gray-900 text-sm ">{label}</p>
+      <div className="border border-dashed flex-1 border-gray-500 h-0"></div>
+      <div className="flex gap-1 items-baseline">
+        <i className="text-xs text-gray-800">{date}</i>
+        <a href={url}>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5"
+            stroke="currentColor" className="w-5 h-5 cursor-pointer text-blue-500 hover:text-blue-600">
+            <path strokeLinecap="round" strokeLinejoin="round"
+              d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  )
+}
diff --git a/components/Skill.js b/components/Skill.js
new file mode 100644
index 0000000..c669688
--- /dev/null
+++ b/components/Skill.js
@@ -0,0 +1,31 @@
+export default function Skill({ label, color }) {
+
+  switch (color) {
+    case "blue-500":
+      return <TypescriptSkill {...{ label }} />
+    case "green-800":
+      return <PythonSkill {...{ label }} />
+
+    case "yellow-800":
+      return <RustSkill {...{ label }} />
+
+    case "yellow-500":
+      return <JavascriptSkill {...{ label }} />
+
+    default:
+      return null
+  }
+}
+
+function TypescriptSkill({ label }) {
+  return <div className={`bg-blue-500 text-white rounded-xl px-2 py-1 text-xs`}>{label}</div>
+}
+function JavascriptSkill({ label }) {
+  return <div className={`bg-yellow-500 text-white rounded-xl px-2 py-1 text-xs`}>{label}</div>
+}
+function PythonSkill({ label }) {
+  return <div className={`bg-green-800 text-white rounded-xl px-2 py-1 text-xs`}>{label}</div>
+}
+function RustSkill({ label }) {
+  return <div className={`bg-yellow-800 text-white rounded-xl px-2 py-1 text-xs`}>{label}</div>
+}