first commit

src/lib/components/CardList.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { inview } from 'svelte-inview'
+  import { fade } from 'svelte/transition'
+  import { _ } from 'svelte-i18n'
+
+  const CHIPS = [
+    ['intl', 'language'],
+    ['cicd', 'autorenew'],
+    ['auto', 'automation'],
+    ['test', 'bug_report'],
+    ['bd', 'database'],
+    ['android', 'android'],
+    ['web', 'bookmark'],
+    ['systems', 'terminal'],
+    ['mvp', 'experiment'],
+    ['design', 'edit'],
+  ]
+
+  let chips = $state([])
+
+  function addChip() {
+    const c = CHIPS.pop()
+    if (!c) return;
+    chips.push(c)
+    setTimeout(addChip, 250)
+  }
+
+</script>
+<div style="min-height: 80vh;" 
+  use:inview 
+  oninview_enter={()=>setTimeout(addChip, 300)}
+  >
+  <h5 id="capabilities" class="center-align primary-text">{$_('cards.title')}</h5>
+  <div class="grid large-margin large-space">
+    {#each chips as [title, icon]}
+    <article class="transparent s6 m4 l3 small-height" in:fade>
+      <nav class="vertical center-align">
+        <h6>{$_(`cards.${title}`)}</h6>
+        <i class="extra primary-text">{icon}</i>
+      </nav>
+    </article>
+    {/each}
+  </div>
+</div>