feat(front): adds svg implementation to skills pages (#991)

Closes: #991
dgrebb · Nov 15, 2023 · f821c68 · f821c68
1 parent ea34ce6
commit f821c68
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/front/src/lib/_utils/shape-shifters/shapeSkillData.js b/front/src/lib/_utils/shape-shifters/shapeSkillData.js
@@ -2,9 +2,9 @@ export async function shapeSkillData(data) {
   let skill,
     hero,
     slug,
+    svg,
     summary,
     proficiency,
-    icon,
     classifications,
     projects,
     positions,
@@ -14,9 +14,9 @@ export async function shapeSkillData(data) {
   skill = {
     hero,
     slug,
+    svg,
     summary,
     proficiency,
-    icon,
     classifications,
     projects,
     positions,

diff --git a/front/src/lib/components/cv/Skill.svelte b/front/src/lib/components/cv/Skill.svelte
@@ -5,9 +5,9 @@
     skill,
     hero,
     slug: skillSlug,
+    svg,
     summary,
     proficiency,
-    icon,
     classifications: { data: classifications },
     certifications: { data: certifications },
     projects: { data: projects },
@@ -17,7 +17,10 @@
   } = content.skill;
 </script>
 
-<h1 class="collection-title">{skill}</h1>
+<h1 class="collection-title">
+  {#if svg}<span class="skill-icon">{@html svg}</span>{/if}
+  {skill}
+</h1>
 {#if summary}
   <p>{summary}</p>
 {/if}

diff --git a/front/src/lib/styles/pages/cv.css b/front/src/lib/styles/pages/cv.css
@@ -33,6 +33,18 @@
   }
 }
 
-.main h1.collection-title {
-  font-size: 12rem;
+.main .meat h1.collection-title {
+  position: relative;
+  height: auto;
+  font-size: 9rem;
+  line-height: 1;
+  .skill-icon {
+    display: inline-block;
+    padding-right: 1rem;
+    width: 3rem;
+    height: 3rem;
+    svg {
+      height: 100%;
+    }
+  }
 }
diff --git a/front/src/routes/cv/+page.svelte b/front/src/routes/cv/+page.svelte
@@ -18,16 +18,20 @@
     {#if hero}
       <img src={hero.url} alt={hero.alternativeText} />
     {/if}
-    <div class="summary">
-      {intro}
-    </div>
+    {#if intro}
+      <div class="summary">
+        {intro}
+      </div>
+    {/if}
     {#each positions as { title, slug, startDate, endDate, summary, awards, industries, organizations, projects, skills }, i}
       <div class="position-timeline-item">
         <h1><a href="/cv/position/{slug}">{title}</a></h1>
         <date class="position-timeline-date"
           >{#if endDate}{startDate}{:else}Current{/if}</date
         >
-        <p>{summary}</p>
+        {#if summary}
+          <p>{summary}</p>
+        {/if}
         {#each awards as { attributes: { award, slug: awardSlug, URL }, i }}
           <a href="/cv/award/{awardSlug}">
             <h3>{award}</h3>
@@ -42,9 +46,12 @@
           <a href="/cv/project/{projectSlug}"> <h3>{name}</h3></a>
           <a href={URL}>Check it out</a>
         {/each}
-        {#each skills as { attributes: { skill, slug: skillSlug, proficiency, summary }, i }}
+        {#each skills as { attributes: { skill, slug: skillSlug, svg, proficiency, summary }, i }}
           <a href="/cv/skill/{skillSlug}">
-            <h3>{skill} ➔ {proficiency}</h3>
+            <h3>
+              {#if svg}<span class="skill-icon">{@html svg}</span>{/if}{skill} ➔
+              {proficiency}
+            </h3>
           </a>
         {/each}
         {#each industries as { attributes: { industry, slug: industrySlug }, i }}