improve appearance, density of skills view

less garish now; also changed skill url format

index.html

@@ -60,29 +60,28 @@
           If you have any questions, or something you need isn't on the list, <a href="#contact">get in touch</a> and I'd be happy to talk about it.
         </p>
 
-        <nav id="skills-tags" class="tags">
-          <template x-for="tag in tags" :key="tag">
-            <a x-bind:class="tagClass(tag)" x-on:click="setCurrentTag" x-text="tag" x-bind:href="`?tag=${tag}`" x-bind:data-tag="tag"></a>
-          </template>
-        </nav>
-
-        <ul id="skills-list">
-          <template x-for="skill in visibleSkills">
-            <li>
-              <header>
-                <h3 x-text="skill.name"></h3>
-              </header>
-
-              <p class="description" x-text="skill.description"></p>
-
-              <nav class="tags">
-                <template x-for="tag in skill.tags" :key="tag">
-                  <a x-bind:class="tagClass(tag)" x-on:click="setCurrentTag" x-text="tag" x-bind:href="`?tag=${tag}#skills`" x-bind:data-tag="tag"></a>
-                </template>
-              </nav>
-            </li>
-          </template>
-        </ul>
+        <div class="data-view">
+          <nav class="tags filter">
+            <header>
+              <h3>Filter</h3>
+            </header>
+            <template x-for="tag in tags" :key="tag">
+              <a x-bind:class="tagClass(tag)" x-on:click="setCurrentTag" x-text="tag" x-bind:href="`?skill=${tag}`" x-bind:data-tag="tag"></a>
+            </template>
+          </nav>
+
+          <ul class="data">
+            <template x-for="skill in visibleSkills">
+              <li>
+                <header x-bind:title="`Tags: ${skill.tags.join(', ')}`">
+                  <h3 x-text="skill.name"></h3>
+                </header>
+
+                <p class="description" x-text="skill.description"></p>
+              </li>
+            </template>
+          </ul>
+        </div>
       </section>
 
       <section id="pricing">

src/components/Skills.ts

@@ -15,7 +15,7 @@ export interface SkillsState {
 export default function Skills(): SkillsState {
   function readCurrentTag() {
     const usp = new URLSearchParams(window.location.search)
-    return usp.get('tag')
+    return usp.get('skill')
   }
 
   function updateVisibleSkills(this: SkillsState) {
@@ -61,10 +61,10 @@ export default function Skills(): SkillsState {
       e.preventDefault()
 
       if (tag === this.currentTag) {
-        window.history.pushState({ tag }, '', `${window.location.pathname}#skills`)
+        window.history.pushState({ tag }, '', window.location.pathname)
         this.currentTag = null
       } else {
-        window.history.pushState({ tag }, '', `${window.location.pathname}?tag=${tag}#skills`)
+        window.history.pushState({ tag }, '', `${window.location.pathname}?skill=${tag}`)
         this.currentTag = tag
       }
 

src/style.scss

@@ -8,6 +8,7 @@ $link-border-width: 0.2rem;
   --bg-color: #e9e9e9;
   --border-color: #ccc;
   --cta-color: #e24350;
+  --cta-fg-color: #e9e9e9;
   --fg-color: #333333;
   --tag-bg-color: #e9e9e9;
 }
@@ -16,6 +17,7 @@ $link-border-width: 0.2rem;
   --bg-color: #333333;
   --border-color: #999;
   --cta-color: #e24350;
+  --cta-fg-color: #e9e9e9;
   --fg-color: #e9e9e9;
   --tag-bg-color: #e9e9e9;
 }
@@ -137,121 +139,87 @@ main {
 }
 
 #skills {
-  #skills-tags {
-    margin-top: 2rem;
-  }
-
-  .tags {
-    $ph: 0.4rem;
-    $pv: 0.2rem;
+  .data-view {
+    .filter {
+      header {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0.2rem 0.4rem;
+      }
+    }
 
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+    .tags {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
 
     .tag {
       border-radius: 0.3rem;
       border-width: 0;
-      display: inline-block;
-      padding: $pv $ph;
-    }
-
-    @mixin tag($bg, $fg) {
-      background-color: $bg;
-      border-color: $bg;
-      color: $fg;
+      padding: 0.2rem 0.4rem;
 
       &.active {
-        @include link($bg);
-        background-color: var(--tag-bg-color);
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        padding-bottom: $pv - $link-border-width;
+        background-color: var(--cta-color);
+        color: var(--cta-fg-color);
       }
     }
 
-    [data-tag="database"] {
-      @include tag(red, white);
-    }
-
-    [data-tag="design"] {
-      @include tag(darkgreen, white);
-    }
-
-    [data-tag="ecommerce"] {
-      @include tag(orange, black);
-    }
-
-    [data-tag="framework"] {
-      @include tag(teal, white);
-    }
-
-    [data-tag="js"] {
-      @include tag(green, white);
-    }
-
-    [data-tag="knowledge"] {
-      @include tag(salmon, black);
-    }
-
-    [data-tag="language"] {
-      @include tag(navy, white);
-    }
-
-    [data-tag="office"] {
-      @include tag(maroon, white);
-    }
+    .data {
+      border-bottom: solid 0.2rem var(--border-color);
+      border-top: solid 0.2rem var(--border-color);
+      display: grid;
+      gap: 1.5rem;
+      grid-template-columns: 1fr;
+      list-style: none;
+      padding: 2rem 0;
 
-    [data-tag="operations"] {
-      @include tag(orangered, white);
-    }
-
-    [data-tag="payments"] {
-      @include tag(orchid, black);
-    }
+      @media screen and (min-width: $bp-tablet) {
+        grid-template-columns: 1fr 1fr;
+      }
 
-    [data-tag="php"] {
-      @include tag(indigo, white);
-    }
+      @media screen and (min-width: $bp-desktop) {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
 
-    [data-tag="platform"] {
-      @include tag(cornflowerblue, white);
-    }
+      @media screen and (min-width: $bp-super) {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+      }
 
-    [data-tag="web3"] {
-      @include tag(darkslategray, white);
-    }
-  }
+      .description {
+        font-size: 0.8rem;
+      }
 
-  #skills-list {
-    border-bottom: solid 0.2rem var(--border-color);
-    border-top: solid 0.2rem var(--border-color);
-    display: grid;
-    gap: 1.5rem;
-    grid-template-columns: 1fr;
-    list-style: none;
-    padding: 2rem 0;
-
-    @media screen and (min-width: $bp-tablet) {
-      grid-template-columns: 1fr 1fr;
+      .tags {
+        font-size: 0.8rem;
+        padding: 0.1rem 0.2rem;
+      }
     }
 
-    @media screen and (min-width: $bp-desktop) {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
+    @media (min-width: $bp-tablet) {
+      display: flex;
+      flex-direction: row;
+      gap: 2rem;
 
-    @media screen and (min-width: $bp-super) {
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-    }
+      .filter {
+        flex-direction: column;
+        margin: 1rem 0;
 
-    .description {
-      font-size: 0.8rem;
-    }
+        header {
+          display: initial;
+          padding: 0;
+          margin-bottom: 0.5rem;
+        }
+      }
 
-    .tags {
-      font-size: 0.8rem;
-      padding: 0.1rem 0.2rem;
+      .data {
+        border-bottom-width: 0;
+        border-left: solid 0.2rem var(--border-color);
+        border-top-width: 0;
+        padding: 0 0 0 2rem;
+      }
     }
   }
 }