make skill list less overwhelming

index.html

@@ -86,11 +86,24 @@
                   </h3>
                 </header>
 
-                <p class="description" x-text="skill.description"></p>
+                <template x-if="descriptions">
+                  <p class="description" x-text="skill.description"></p>
+                </template>
               </li>
             </template>
           </ul>
         </div>
+
+        <template x-if="descriptions">
+          <p>
+            To see a bit less information, <a href="#" x-on:click="toggleDescriptions" href="#">hide descriptions</a>.
+          </p>
+        </template>
+        <template x-if="!descriptions">
+          <p>
+            To see even more information, <a x-on:click="toggleDescriptions" href="#">show descriptions</a>.
+          </p>
+        </template>
       </section>
 
       <section id="work">

src/components/Skills.ts

@@ -7,6 +7,7 @@ export interface Skill {
 
 export interface SkillsState {
   currentTag: string | null
+  descriptions: boolean
   skills: Skill[]
   tags: string[]
   visibleSkills: Skill[]
@@ -14,6 +15,7 @@ export interface SkillsState {
   init(): void
   setCurrentTag(e: MouseEvent): void
   tagClass(value: string): string
+  toggleDescriptions(e: MouseEvent): void
 }
 
 export default function Skills(): SkillsState {
@@ -24,6 +26,11 @@ export default function Skills(): SkillsState {
     return usp.get('skill')
   }
 
+  function readCurrentDescriptions() {
+    const usp = new URLSearchParams(window.location.search)
+    return usp.get('descriptions') === '1'
+  }
+
   function updateVisibleSkills(this: SkillsState) {
     const tag = this.currentTag
     if (tag) this.visibleSkills = this.skills.filter(skill => skill.tags.includes(tag))
@@ -32,6 +39,7 @@ export default function Skills(): SkillsState {
 
   return {
     currentTag: null,
+    descriptions: false,
     skills: [],
     visibleSkills: [],
 
@@ -47,8 +55,8 @@ export default function Skills(): SkillsState {
     },
 
     async init() {
-      const tag = readCurrentTag()
-      this.currentTag = tag
+      this.currentTag = readCurrentTag()
+      this.descriptions = readCurrentDescriptions()
 
       try {
         const res = await fetch(url)
@@ -69,14 +77,19 @@ export default function Skills(): SkillsState {
 
       e.preventDefault()
 
+      const usp = new URLSearchParams(window.location.search)
       if (tag === this.currentTag) {
-        window.history.pushState({ tag }, '', window.location.pathname)
         this.currentTag = null
+        usp.delete('skill')
       } else {
-        window.history.pushState({ tag }, '', `${window.location.pathname}?skill=${tag}`)
         this.currentTag = tag
+        usp.set('skill', tag)
       }
 
+      const search = usp.toString()
+      if (search) window.history.pushState({ tag }, '', `${window.location.pathname}?${search}`)
+      else window.history.pushState({ tag }, '', window.location.pathname)
+
       updateVisibleSkills.apply(this)
       return tag
     },
@@ -85,5 +98,19 @@ export default function Skills(): SkillsState {
       if (value === this.currentTag) return 'tag active'
       return 'tag'
     },
+
+    toggleDescriptions(e) {
+      e.preventDefault()
+
+      const usp = new URLSearchParams(window.location.search)
+      if (this.descriptions) usp.delete('descriptions')
+      else usp.set('descriptions', '1')
+
+      const search = usp.toString()
+      if (search) window.history.pushState(null, '', `${window.location.pathname}?${search}`)
+      else window.history.pushState(null, '', window.location.pathname)
+
+      this.descriptions = !this.descriptions
+    },
   }
 }

src/style.scss

@@ -203,8 +203,10 @@ main {
       display: grid;
       gap: 1.5rem;
       grid-template-columns: 1fr;
+      height: min-content;
       list-style: none;
       padding: 2rem 0;
+      width: 100%;
 
       @media screen and (min-width: $bp-tablet) {
         grid-template-columns: 1fr 1fr;
@@ -229,6 +231,8 @@ main {
     }
 
     @media (min-width: $bp-tablet) {
+      border-bottom: solid 0.2rem var(--border-color);
+      border-top: solid 0.2rem var(--border-color);
       display: flex;
       flex-direction: row;
       gap: 2rem;
@@ -246,7 +250,6 @@ main {
 
       .data {
         border-bottom-width: 0;
-        border-left: solid 0.2rem var(--border-color);
         border-top-width: 0;
         padding: 0 0 0 2rem;
       }