wip(front): float CV collection aside

front/src/lib/components/cv/Experience.svelte → front/src/lib/components/cv/Experience/Experience.svelte

@@ -1,57 +1,64 @@
 <script>
   import Aside from '@components/general/Aside/Aside.svelte';
   import AsideGroup from '@components/general/Aside/AsideGroup.svelte';
-  import SkillBreakdown from './SkillBreakdown/SkillBreakdown.svelte';
-  import '@styles/pages/experience.css';
+  import SkillBreakdown from '@components/cv/SkillBreakdown/SkillBreakdown.svelte';
+  import './experience.css';
+
+  let collection = 'experience';
 
   export let content;
   let {
     name,
     title,
     body,
-    // skills: { data: skills },
+    skills: { data: skills },
     highlightedSkills,
     projects: { data: projects },
     organizations: { data: orgs },
   } = content.experience;
 </script>
 
-<article>
+<article class="experience__article">
   <header class="experience__header">
     <p class="collection__title">Experience</p>
     <h1 class="experience__title">{name}</h1>
     {#if title}<h2>{title}</h2>{/if}
 
     {#if highlightedSkills.length}
       <SkillBreakdown skills={highlightedSkills} />
-      <!-- <div class="skill-graph">
-      {#each highlightedSkills as skill}
-        <p>{skill.name} - {skill.percentage}</p>
-      {/each}
-    </div> -->
     {/if}
   </header>
 
   <Aside>
     {#if orgs?.length}
       <AsideGroup
-        collection="experience"
+        {collection}
         title={`Organization${orgs.length > 1 ? 's' : ''}`}
         items={orgs}
         singleton="organization"
       />
     {/if}
+    {#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>
 
-  {#if body}
-    {@html body}
-  {/if}
-
-  <!-- {#each skills as { attributes: { name, slug: skillSlug } }}
-  <h2><a href="/cv/skill/{skillSlug}">{name}</a></h2>
-{/each} -->
-
-  {#each projects as { attributes: { name, slug: projectSlug } }}
-    <h2><a href="/cv/project/{projectSlug}">{name}</a></h2>
-  {/each}
+  <section class="experience__body">
+    {#if body}
+      {@html body}
+    {/if}
+  </section>
 </article>

front/src/lib/styles/pages/experience.css → front/src/lib/components/cv/Experience/experience.css

@@ -4,6 +4,7 @@
 
 .experience {
   &__header {
+    margin-bottom: 3rem;
     text-align: center;
     & h1,
     h2 {

front/src/lib/components/general/Aside/Aside.svelte

@@ -42,3 +42,10 @@
     </ul>
   {/if} -->
 </aside>
+
+<style lang="postcss">
+  .collection__aside {
+    float: right;
+    padding-left: 2rem;
+  }
+</style>

front/src/lib/components/general/PageNav/PageNav.svelte

@@ -4,7 +4,7 @@
   import { categoryClick, relatedClick } from '@utils/uiHelpers.js';
   import { focusTrap } from '@utils/actions.js';
   import ListIcon from '~icons/gg/list';
-  import '@styles/components/page-nav.css';
+  import './page-nav.css';
 
   export let toc = false;
   export let categories = false;

front/src/routes/cv/[collection]/[slug]/+page.svelte

@@ -6,7 +6,7 @@
   import Classification from '@components/cv/Classification.svelte';
   import Industry from '@components/cv/Industry.svelte';
   import Organization from '@components/cv/Organization.svelte';
-  import Experience from '@components/cv/Experience.svelte';
+  import Experience from '@components/cv/Experience/Experience.svelte';
   import Project from '@components/cv/Project.svelte';
   import Skill from '@components/cv/Skill.svelte';
   import '@styles/pages/cv.css';