
<script>
  import FlyAnimate from '$lib/components/FlyAnimate.svelte'
  import TechItem from './TechItem.svelte'
  import {_} from 'svelte-i18n'
</script>

<h5 id="tech" class="center-align primary-text">{$_('stack.title')}</h5>
<div class="small-space"></div>
<FlyAnimate>
  <div class="grid">
    <TechItem title='Python' icon='python' highlight=true/>
    <TechItem title='Java' icon='java'/>
    <TechItem title='Kotlin' icon='kotlin'/>
    <div class="s12"></div>
    <TechItem title='FastAPI' icon='fastapi' highlight=true/>
    <TechItem title='Java Spring' icon='spring'/>
    <TechItem title='Javalin' icon='java'/>
    <div class="s12"></div>
    <TechItem title='Svelte' icon='svelte' highlight=true/>
    <TechItem title='React' icon='react'/>
    <TechItem title='NodeJS' icon='nodejs'/>
    <TechItem title='BeerCSS' icon='css3'/>
    <div class="s12"></div>
    <TechItem title='Docker' icon='docker'/>
    <TechItem title='NGINX' icon='nginx'/>
    <TechItem title='AWS' icon='amazonwebservices'/>
    <TechItem title='Linux' icon='linux'/>
    <div class="s12"></div>
    <TechItem title='MongoDB' icon='mongodb'/>
    <TechItem title='PostgreSQL' icon='postgresql'/>
    <TechItem title='Redis' icon='redis'/>
    <TechItem title='SQLite' icon='sqlite'/>
    <div class="s12"></div>
    <TechItem title='Playwright' icon='playwright'/>
    <TechItem title='Junit' icon='junit'/>
    <div class="s12"></div>
    <TechItem title='Git' icon='git'/>
    <TechItem title='Github Actions' icon='githubactions'/>
  </div>
  
</FlyAnimate>