Skip to content

Commit

Permalink
Update skills data and UI . .
Browse files Browse the repository at this point in the history
  • Loading branch information
@krlan2789
krlan2789 committed Jun 23, 2024
1 parent 9ca8113 commit 1de0607
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 39 deletions.
24 changes: 16 additions & 8 deletions public/data_user.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,35 +113,43 @@
"skills": [
{
"name": "csharp",
"title": "C#",
"year": 2017
},
{
"name": "unity",
"title": "Unity3D",
"year": 2017
},
{
"name": "arduino",
"title": "Arduino",
"year": 2021
},
{
"name": "php",
"title": "PHP",
"year": 2018
},
{
"name": "postgresql",
"title": "PostgreSQL",
"year": 2021
},
{
"name": "firebase",
"title": "Google Firebase",
"year": 2021
},
{
"name": "onesignal",
"year": 2023
},
{
"name": "nodejs",
"title": "Node.js",
"year": 2020
},
{
"name": "tailwind",
"title": "Tailwind CSS",
"year": 2023
}
]
},
Expand All @@ -151,22 +159,22 @@
"topics": [
{
"name": "maxst",
"title": "Maxst",
"year": 2022
},
{
"name": "laravel",
"title": "Laravel",
"year": 2022
},
{
"name": "tailwind",
"year": 2023
},
{
"name": "vue",
"title": "Vue.js",
"year": 2023
},
{
"name": "xamarin",
"title": "Xamarin / MAUI",
"year": 2024
}
]
Expand Down
78 changes: 47 additions & 31 deletions src/components/SkillsComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,54 +7,70 @@
</div>
</div>
<!-- Current Ability -->
<div class="w-full p-4">
<div class="mx-auto mb-4 text-center">
<h2 class="lan-section-subtitle" v-html="dataUser.skill.title"></h2>
<p class="font-medium text-md text-secondary md:text-lg" v-html="dataUser.skill.description"></p>
<template v-if="dataUser.skill">
<div v-if="dataUser.skill.title" class="w-full p-4">
<div class="mx-auto mb-4 text-center">
<h2 class="lan-section-subtitle" v-html="dataUser.skill.title"></h2>
<p class="font-medium text-md text-secondary md:text-lg" v-html="dataUser.skill.description">
</p>
</div>
</div>
</div>
<div class="w-full px-4">
<div class="flex flex-wrap items-center justify-center">
<!-- Skill Icon -->
<div v-if="dataUser.skill.skills && dataUser.skill.skills.length > 0" class="w-full px-4">
<div
v-for="skill in dataUser.skill.skills"
class="max-w-[52px] mx-4 py-4 text-[#FFCA28] lan-50-to-100 xl:mx-6 flex flex-col"
>
<!-- Icon -->
<TechnologyIcon :techName="skill.name"></TechnologyIcon>
<!-- Icon -->
<h4 class="mt-3 text-xs font-bold text-center min-w-max text-secondary">
{{ getYearDiff(skill.year) < 1 ? "<" : "" }}{{ getYearDiff(skill.year) > 0 ? getYearDiff(skill.year) : 1 }}
{{ getYearDiff(skill.year) > 1 ? "years" : "year" }}
</h4>
class="grid items-center justify-center grid-cols-2 gap-2 md:grid-cols-3 md:gap-5 xl:grid-cols-4 xl:gap-8">
<!-- Skill Icon -->
<div v-for="skill in dataUser.skill.skills"
class="grid justify-between h-16 lg:h-20 grid-cols-[2fr_5fr] gap-3 p-2 text-secondary lan-50-to-100">
<!-- Icon -->
<div class="flex items-center justify-center w-12 h-12 lg:h-16 lg:w-16">
<TechnologyIcon :techName="skill.name"></TechnologyIcon>
</div>
<!-- Icon -->

<div class="flex flex-col text-xs text-left justify-evenly">
<h3 class="w-full text-[0.8rem] font-bold">{{ skill.title }}</h3>
<h4 class="w-full">
{{ getYearDiff(skill.year) < 1 ? "<" : "" }}{{ getYearDiff(skill.year) > 0 ?
getYearDiff(skill.year) : 1 }}
{{ getYearDiff(skill.year) > 1 ? "years" : "year" }}
</h4>
</div>
</div>
<!-- Skill Icon -->
</div>
<!-- Skill Icon -->
</div>
</div>
</template>
<!-- Current Ability -->

<!-- New Ability -->
<template v-if="dataUser.learn">
<div v-if="dataUser.learn.title" class="w-full p-4 mt-8">
<div class="mx-auto mb-4 text-center">
<h2 class="lan-section-subtitle" v-html="dataUser.learn.title"></h2>
<p class="font-medium text-md text-secondary md:text-lg" v-html="dataUser.learn.description"></p>
<p class="font-medium text-md text-secondary md:text-lg" v-html="dataUser.learn.description">
</p>
</div>
</div>
<div v-if="dataUser.learn.topics && dataUser.learn.topics.length > 0" class="w-full px-4">
<div class="flex flex-wrap items-center justify-center">
<div
class="grid items-center justify-center grid-cols-2 gap-2 md:grid-cols-3 md:gap-5 xl:grid-cols-4 xl:gap-8">
<!-- Skill Icon -->
<div
v-for="skill in dataUser.learn.topics"
class="max-w-[52px] mx-4 py-4 text-[#FFCA28] lan-50-to-100 xl:mx-6 flex flex-col"
>
<div v-for="skill in dataUser.learn.topics"
class="grid justify-between h-16 lg:h-20 grid-cols-[2fr_5fr] gap-3 p-2 text-secondary lan-50-to-100">
<!-- Icon -->
<TechnologyIcon :techName="skill.name"></TechnologyIcon>
<div class="flex items-center justify-center w-12 h-12 lg:h-16 lg:w-16">
<TechnologyIcon :techName="skill.name"></TechnologyIcon>
</div>
<!-- Icon -->
<h4 class="mt-3 text-xs font-bold text-center min-w-max text-secondary">
{{ getYearDiff(skill.year) < 1 ? "<" : "" }}{{ getYearDiff(skill.year) > 0 ? getYearDiff(skill.year) : 1 }}
{{ getYearDiff(skill.year) > 1 ? "years" : "year" }}
</h4>

<div class="flex flex-col text-xs text-left justify-evenly">
<h3 class="w-full text-[0.8rem] font-bold">{{ skill.title }}</h3>
<h4 class="w-full">
{{ getYearDiff(skill.year) < 1 ? "<" : "" }}{{ getYearDiff(skill.year) > 0 ?
getYearDiff(skill.year) : 1 }}
{{ getYearDiff(skill.year) > 1 ? "years" : "year" }}
</h4>
</div>
</div>
<!-- Skill Icon -->
</div>
Expand Down

0 comments on commit 1de0607

Please sign in to comment.