2022-10-15 15:20:33 +00:00
|
|
|
<template>
|
|
|
|
|
<div class="language-list">
|
|
|
|
|
<span
|
|
|
|
|
v-for="item in langList"
|
|
|
|
|
:title="item.title"
|
|
|
|
|
:class="item.icon"
|
|
|
|
|
></span>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
interface LangListItem {
|
|
|
|
|
icon: string;
|
|
|
|
|
title: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const langList: LangListItem[] = [
|
|
|
|
|
{ icon: 'icon-html5', title: 'Web development (HTML5 / CSS3 / SASS)' },
|
|
|
|
|
{ icon: 'icon-language-javascript', title: 'JavaScript' },
|
|
|
|
|
{ icon: 'icon-language-typescript', title: 'TypeScript' },
|
|
|
|
|
{ icon: 'icon-nodejs', title: 'Node.js' },
|
|
|
|
|
{ icon: 'icon-nestjs', title: 'Nest.js' },
|
|
|
|
|
{ icon: 'icon-angular', title: 'Angular' },
|
|
|
|
|
{ icon: 'icon-vuejs', title: 'Vue.js (version 3+)' },
|
|
|
|
|
{ icon: 'icon-react', title: 'React' },
|
2022-10-16 12:56:18 +00:00
|
|
|
{ icon: 'icon-nuxt', title: 'Nuxt' },
|
2022-10-15 15:20:33 +00:00
|
|
|
{ icon: 'icon-flutter', title: 'Flutter' },
|
|
|
|
|
{ icon: 'icon-language-python', title: 'Python' },
|
|
|
|
|
{ icon: 'icon-language-lua-variant', title: 'Lua' },
|
|
|
|
|
];
|
|
|
|
|
</script>
|
