wip(front): style and component structure for Skill Breakdown

## Describe your changes Skill Breakdown graph component, styles, animations, and layout. ## Issue ticket number and link - closes #1191 - addresses https://github.com/dgrebb/dgrebb.com/security/dependabot/50 ## Checklist before requesting a review - [x] Code linting succeeds - [x] Visual Regression is Passing - [x] I have performed a self-review of my code - [x] Do we need to implement analytics? - [x] Have you tested with JavaScript off?
dgrebb · Jan 28, 2024 · c4078d0 · c4078d0
1 parent 2b4937d
commit c4078d0
Show file tree

Hide file tree

Showing 32 changed files with 565 additions and 364 deletions.
diff --git a/_ci/spell/dict.txt b/_ci/spell/dict.txt
@@ -64,6 +64,7 @@ rdquo
 regexall
 replacestate
 reportsdomain
+Résumé
 runneth
 shineth
 softlight

diff --git a/back/package.json b/back/package.json
@@ -37,5 +37,13 @@
   "strapi": {},
   "devDependencies": {
     "prop-types": "^15.8.1"
+  },
+  "overrides": {
+    "vite": "^4.5.2"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite@<5.0.12": ">=5.0.12"
+    }
   }
 }
diff --git a/back/pnpm-lock.yaml b/back/pnpm-lock.yaml
diff --git a/front/src/lib/components/cv/Award.svelte b/front/src/lib/components/cv/Award.svelte
@@ -8,21 +8,25 @@
   } = content.award;
 </script>
 
-<h1 class="collection-title">Awards</h1>
+<article>
+  <header class="experience__header">
+    <p class="collection__title">Awards</p>
+    <h1>{name}</h1>
+  </header>
 
-<h1>{name}</h1>
-{#each experiences as { attributes: { name, slug: experienceSlug } }}
-  <h2><a href="/cv/experience/{experienceSlug}">{name}</a></h2>
-{/each}
+  {#each experiences as { attributes: { name, slug: experienceSlug } }}
+    <h2><a href="/cv/experience/{experienceSlug}">{name}</a></h2>
+  {/each}
 
-{#if body}
-  {body}
-{/if}
+  {#if body}
+    {body}
+  {/if}
 
-{#each projects as { attributes: { name, slug: projectSlug } }}
-  <h2><a href="/cv/project/{projectSlug}">{name}</a></h2>
-{/each}
+  {#each projects as { attributes: { name, slug: projectSlug } }}
+    <h2><a href="/cv/project/{projectSlug}">{name}</a></h2>
+  {/each}
 
-{#each experiences as { attributes: { name, slug: experienceSlug } }}
-  <h2><a href="/cv/experience/{experienceSlug}">{name}</a></h2>
-{/each}
+  {#each experiences as { attributes: { name, slug: experienceSlug } }}
+    <h2><a href="/cv/experience/{experienceSlug}">{name}</a></h2>
+  {/each}
+</article>
diff --git a/front/src/lib/components/cv/Certification.svelte b/front/src/lib/components/cv/Certification.svelte
@@ -7,13 +7,16 @@
   } = content.certification;
 </script>
 
-<h1 class="collection-title">Certifications</h1>
+<article>
+  <header class="experience__header">
+    <p class="collection__title">Certifications</p>
 
-<h1>{name}</h1>
-
-{#if body}
-  {body}
-{/if}
-{#each skills as { attributes: { name, slug: skillSlug } }}
-  <h2><a href="/cv/skill/{skillSlug}">{name}</a></h2>
-{/each}
+    <h1>{name}</h1>
+  </header>
+  {#if body}
+    {body}
+  {/if}
+  {#each skills as { attributes: { name, slug: skillSlug } }}
+    <h2><a href="/cv/skill/{skillSlug}">{name}</a></h2>
+  {/each}
+</article>
diff --git a/front/src/lib/components/cv/Classification.svelte b/front/src/lib/components/cv/Classification.svelte
@@ -9,25 +9,29 @@
   } = content.classification;
 </script>
 
-<h1 class="collection-title">Trades</h1>
+<article>
+  <header class="experience__header">
+    <p class="collection__title">Trades</p>
 
-<h1>{name}</h1>
-{#if summary}
-  <p>{summary}</p>
-{/if}
+    <h1>{name}</h1>
+    {#if summary}
+      <p>{summary}</p>
+    {/if}
+  </header>
 
-{#if body}
-  {body}
-{/if}
+  {#if body}
+    {body}
+  {/if}
 
-<!-- TODO: each of these should be placed in a single component and passed the data, or just the collection name -->
-{#if skills.length}
-  <h2>skills</h2>
-  <ul class="collection-attributes">
-    {#each skills as { attributes: { name, slug: skillSlug } }}
-      <li class="attribute">
-        <a href="/cv/skill/{skillSlug}">{name}</a>
-      </li>
-    {/each}
-  </ul>
-{/if}
+  <!-- TODO: each of these should be placed in a single component and passed the data, or just the collection name -->
+  {#if skills.length}
+    <h2>skills</h2>
+    <ul class="collection-attributes">
+      {#each skills as { attributes: { name, slug: skillSlug } }}
+        <li class="attribute">
+          <a href="/cv/skill/{skillSlug}">{name}</a>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</article>
diff --git a/front/src/lib/components/cv/Experience.svelte b/front/src/lib/components/cv/Experience.svelte
diff --git a/front/src/lib/components/cv/Experience/Experience.svelte b/front/src/lib/components/cv/Experience/Experience.svelte
@@ -0,0 +1,69 @@
+<script>
+  import Aside from '@components/general/Aside/Aside.svelte';
+  import AsideGroup from '@components/general/Aside/AsideGroup.svelte';
+  import SkillBreakdown from '@components/cv/SkillBreakdown/SkillBreakdown.svelte';
+  import './experience.css';
+
+  let collection = 'experience';
+
+  export let content;
+  let {
+    name,
+    title,
+    body,
+    skills: { data: skills },
+    highlightedSkills,
+    projects: { data: projects },
+    organizations: { data: orgs },
+  } = content.experience;
+</script>
+
+<article class="experience__article">
+  <header class="experience__header">
+    <p class="collection__title">Experience</p>
+    <h1 class="experience__title">
+      {name}
+    </h1>
+
+    {#if highlightedSkills.length}
+      <SkillBreakdown skills={highlightedSkills} />
+    {/if}
+  </header>
+
+  <Aside>
+    {#if orgs?.length}
+      <h2>Organizations</h2>
+      <p>
+        {#each orgs as { attributes: { name, slug } }, key}
+          <a href="/cv/organization/{slug}"
+            >{name}{key === orgs.length ? ',' : ''}</a
+          >
+        {/each}
+      </p>
+    {/if}
+    <h2>Title</h2>
+    <p>{title}</p>
+    {#if projects?.length}
+      <AsideGroup
+        {collection}
+        title={`Project${projects.length > 1 ? 's' : ''}`}
+        items={projects}
+        singleton="project"
+      />
+    {/if}
+    {#if skills?.length}
+      <AsideGroup
+        {collection}
+        title={`Skill${skills.length > 1 ? 's' : ''}`}
+        items={skills}
+        singleton="skill"
+      />
+    {/if}
+  </Aside>
+
+  <section class="experience__body">
+    {#if body}
+      {@html body}
+    {/if}
+  </section>
+</article>
diff --git a/front/src/lib/components/cv/Experience/experience.css b/front/src/lib/components/cv/Experience/experience.css
@@ -0,0 +1,35 @@
+.cv.experience {
+  position: relative;
+}
+
+.experience {
+  &__header {
+    margin-bottom: 3rem;
+    text-align: center;
+    & h1,
+    h2 {
+      filter: brightness(1);
+      transition-duration: var(--transition-duration);
+      transition-property: filter, opacity;
+      transition-timing-function: var(--transition-timing-function);
+    }
+    @media screen and (min-width: 640px) {
+      &:has(
+          .skill-graph:hover,
+          .skill-graph:active,
+          .skill-graph:focus-visible,
+          .skill-graph:focus
+        ) {
+        & h1,
+        h2 {
+          opacity: 0.3;
+          filter: brightness(0.2) blur(0.5rem);
+          transition-duration: var(--transition-duration-fast);
+        }
+      }
+    }
+  }
+  &__title {
+    padding: 0.25rem 0 2rem 0;
+  }
+}