src/components/Side/Skills.vue

@@ -36,7 +36,7 @@ const otherSkills = ref(importOtherSkills);
 <template>
     <div class="px-4 py-3">
         <h2 class="text-xl text-[#E57D4C] pb-2">Główne umiejętności</h2>
-        <ul class="flex flex-row flex-wrap justify-center align-baseline gap-4 text-xl">
+        <ul class="grid grid-cols-4 justify-between align-baseline gap-2 text-xl">
             <li
                 v-for="(skill, key) in skills"
                 :key="key"
@@ -48,7 +48,7 @@ const otherSkills = ref(importOtherSkills);
         </ul>
         <div class="mt-3">
             <h3 class="text-lg text-[#E57D4C] pb-1">Dodatkowo</h3>
-            <ul class="flex flex-row flex-wrap align-baseline gap-1">
+            <ul class="flex flex-row flex-wrap align-baseline gap-0.5">
                 <li v-for="(skill, key) in otherSkills" :key="key" class="border border-slate-200 rounded-md px-1.5 py-0.5 bg-white">{{ skill }}</li>
             </ul>
         </div>

src/composables/Skills.js

@@ -1,52 +1,52 @@
 const skills = [
+    {
+        class: 'linux',
+        faIcon: ['fab', 'linux'],
+        title: 'Ikona Linux',
+        text: 'GNU/Linux',
+    },
+    {
+        class: 'git',
+        faIcon: ['fab', 'git'],
+        title: 'Ikona Git',
+        text: 'Git',
+    },
     {
         class: 'php',
         faIcon: ['fab', 'php'],
-        title: 'PHP Icon',
+        title: 'Ikona PHP',
         text: 'PHP 7/8',
     },
     {
         class: 'laravel',
         faIcon: ['fab', 'laravel'],
-        title: 'Laravel Icon',
+        title: 'Ikona Laravel',
         text: 'Laravel',
     },
     {
         class: 'js',
         faIcon: ['fab', 'js'],
-        title: 'JavaScript Icon',
+        title: 'Ikona JavaScript',
         text: 'JavaScript',
     },
     {
         class: 'vuejs',
         faIcon: ['fab', 'vuejs'],
-        title: 'Vue.js Icon',
+        title: 'Ikona Vue.js',
         text: 'Vue.js',
     },
     {
         class: 'html5',
         faIcon: ['fab', 'html5'],
-        title: 'HTML 5 Icon',
+        title: 'Ikona HTML 5',
         text: 'HTML',
     },
     {
         class: 'css3-alt',
         faIcon: ['fab', 'css3-alt'],
-        title: 'CSS 3 Icon',
+        title: 'Ikona CSS 3',
         text: 'CSS',
     },
-    {
-        class: 'git',
-        faIcon: ['fab', 'git'],
-        title: 'Git Icon',
-        text: 'Git',
-    },
-    {
-        class: 'linux',
-        faIcon: ['fab', 'linux'],
-        title: 'Linux Icon',
-        text: 'GNU/Linux',
-    },
 ];
 
 const otherSkills = [
@@ -63,6 +63,7 @@ const otherSkills = [
     'WSL',
     'LXC/LXD',
     'REST',
+    'RWD',
     'i więcej...',
 ];