feat: add skill tags

vanessacor · Jun 8, 2024 · a378377 · a378377
1 parent b1e321e
commit a378377
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/src/components/jobItem.astro → src/components/JobItem.astro b/src/components/jobItem.astro → src/components/JobItem.astro
@@ -1,11 +1,14 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import Markdown from "./MarkdownComponent.astro";
+import TagList from "./TagList.astro";
+import JobTag from "./JobTag.astro";
 interface Props {
   job: CollectionEntry<"work">;
 }
 
 const { job } = Astro.props;
+const tags = job.data.skills;
 const { Content } = await job.render();
 ---
 
@@ -17,6 +20,9 @@ const { Content } = await job.render();
       >
     </h3>
     <p class="dates">{job.data.dates}</p>
+    <ul>
+      {tags && tags.map((tag) => <JobTag tag={tag} />)}
+    </ul>
   </header>
 
   <Markdown>
@@ -25,7 +31,6 @@ const { Content } = await job.render();
 </article>
 
 <style scoped>
-
   .job {
     margin-bottom: var(--space-extra-large);
   }
@@ -34,12 +39,18 @@ const { Content } = await job.render();
   }
   .title {
     font-weight: bolder;
-    font-style: italic;
     margin-bottom: var(--space-xxs);
   }
   .dates {
     line-height: 1em;
     font-size: var(--font-size-4);
+    font-weight: bolder;
     color: var(--secondary-color);
+    margin-bottom: var(--space-small);
+  }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-medium);
   }
 </style>
diff --git a/src/components/JobTag.astro b/src/components/JobTag.astro
@@ -0,0 +1,16 @@
+---
+import { getRandomColor } from "../helpers/colorGenerator";
+const { tag } = Astro.props;
+---
+
+<li class="tag">
+  <span style={{ color: `${getRandomColor()}` }}> # </span>
+  <span class="text"> {tag} </span>
+</li>
+
+<style scoped>
+  .tag span {
+    font-style: italic;
+    font-size: var(--font-size-4);
+  }
+</style>
diff --git a/src/pages/work.astro b/src/pages/work.astro
@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content";
 import PageLayout from "../layouts/PageLayout.astro";
-import JobItem from "../components/jobItem.astro";
+import JobItem from "../components/JobItem.astro";
 
 const jobs = await getCollection("work");
 ---
@@ -45,7 +45,8 @@ const jobs = await getCollection("work");
 </PageLayout>
 <style>
   .content {
-    padding-top: var(--space-extra-large);
+    padding-top: var(--space-extra-large);  <footer></footer>
+
     margin-bottom: var(--space-xxl);
   }
   @media (min-width: 950px) {
@@ -58,7 +59,7 @@ const jobs = await getCollection("work");
   }
 
   section h2 {
-    margin-bottom: var(--space-large);
+    margin-bottom: var(--space-extra-large);
   }
 
   .values h2 {
@@ -70,5 +71,4 @@ const jobs = await getCollection("work");
     flex-wrap: wrap;
     gap: var(--space-medium);
   }
-
 </style>