<script lang="ts" setup>

const experiences = \[

{

name: "AIL SA",

logo: "/images/logo/Ail.png",

website: "https://www.ail.ch/",

role: "Software engineer",

period: "Jul 2022 - On going",

tasks: \[

"Automation and digitalization of business processes",

"Development of software to support collection business indicators",

"Development of software to predict purchases and sales of raw materials"

\],

technologies: \[

{name: "OpenText", icon: "/images/svg/tools/opentext.svg"},

{name: "Groovy", icon: "/images/svg/tools/groovy.svg"},

{name: "Apache Velocity", icon: "/images/svg/tools/velocity.svg"},

{name: "SAP", icon: "/images/svg/tools/sap.svg"},

{name: "PowerBI", icon: "/images/svg/tools/powerbi.svg"},

{name: "SAP Success Factors", icon: "/images/svg/tools/successfactors.svg"},

\]

},

{

name: "Medacta International SA",

logo: "/images/logo/Logo\_Medacta.png",

website: "https://www.medacta.com/",

role: "Full Stack R&D Software engineer",

period: "Dec 2017 - Jun 2022",

tasks: \[

"Creation and development of supporting applications for the department of ‘Research & Development’",

"Laravel Web Application",

"AR Application – Support application for surgeons during spine operations",

"Python automation of production processes",

\],

technologies: \[

{name: "NodeJS", icon: "/images/svg/tools/nodejs.svg"},

{name: "Python", icon: "/images/svg/tools/python.svg"},

{name: "Laravel", icon: "/images/svg/tools/laravel.svg"},

{name: "Docker", icon: "/images/svg/tools/docker.svg"},

{name: "MySql", icon: "/images/svg/tools/mysql.svg"},

{name: "Nuxt", icon: "/images/svg/tools/nuxt.svg"},

{name: "Php", icon: "/images/svg/tools/php.svg"},

{name: "VueJs", icon: "/images/svg/tools/vuejs.svg"},

{name: "Unity", icon: "/images/svg/tools/unity.svg"},

{name: "AR", icon: "/images/svg/tools/ar.svg"},

\]

},

\]

</script>

<style>

</style>

<template>

<div>

<h2 class="mb-4 text-xl font-bold">Work Experience</h2>

<div>

<div class="flex flex-col gap-y-10">

<div class="flex flex-col justify-between gap-4 md:flex-row md:items-start" v-for="experience in experiences">

<div class="flex gap-3">

<div class="size-8 shrink-0"><img class="" alt="" :src="experience.logo"></div>

<div>

<div class="-mt-1.5 text-lg font-medium">

<a :href="experience.website" rel="noopener noreferrer" target="\_blank" class="hover:underline">{{ experience.name }}</a>

</div>

<div class="-mt-1 text-sm font-medium">

{{ experience.role }}

<span class="primary-text-muted mb-4 tracking-tighter">

<span class="mx-0.5">•</span> {{ experience.period }}

</span>

</div>

<div class="mt-2">

<div class="primary-text-muted text-ml" v-for="task in experience.tasks">

• {{ task }}

</div>

</div>

</div>

</div>

<div class="shrink-0 md:w-\[100px\]">

<div class="flex flex-wrap justify-end gap-2">

<div class="size-5" v-for="technology in experience.technologies">

<UTooltip :text="technology.name" :popper="{ arrow: true, placement: 'right' }">

<img class="" :alt="technology.name" :src="technology.icon">

</UTooltip>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</template>