45 lines
1.1 KiB
Svelte
45 lines
1.1 KiB
Svelte
<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>
|