add job, project, and skill components

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>
+  )
+}

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>
+  )
+}

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>
+}