Refactor skills on the main page

apps/d0rich.me/components/homepage/B3Skills.vue

@@ -4,7 +4,6 @@ import * as skillsAnimations from '~~/utils/homepage/skills'
 const { data } = useAsyncData(() => queryContent('/homepage/skills').find())
 
 const skillsGroups = ref<ComponentPublicInstance[]>([])
-const bgSpinner = ref<ComponentPublicInstance | null>(null)
 
 onMounted(() => {
   skillsAnimations.applyContentRevealAnimation(skillsGroups)
@@ -21,12 +20,7 @@ onMounted(() => {
     <template #svg>
       <div class="relative w-full h-full max-w-3xl mx-auto">
         <DAnimationHypnosis
-          :ref="
-            (el: ComponentPublicInstance) => {
-              bgSpinner = el
-            }
-          "
-          class="absolute inset-0 mx-auto right-2/3 top-[12%] w-80 -rotate-12"
+          class="absolute inset-0 mx-auto right-2/3 top-28 w-80 -rotate-12"
         />
         <DAnimationHypnosis
           class="absolute inset-0 m-auto left-1/4 bottom-64 w-96 rotate-12"
@@ -41,8 +35,8 @@ onMounted(() => {
         v-for="(doc, index) in data"
         :key="doc._id"
         :ref="
-          (el: ComponentPublicInstance) => {
-            skillsGroups[index] = el
+          (el) => {
+            skillsGroups[index] = el as ComponentPublicInstance
           }
         "
         tag="div"

apps/d0rich.me/content/homepage/skills/1.Programming languages.md

@@ -1,23 +1,23 @@
 ::d-stats{.w-96}
 ---
-titles: ['TypeScript', 'Python', 'Kotlin', 'C#', 'HTML/CSS']
-values: [5, 4, 3, 3, 5]
+titles: [TypeScript, HTML/CSS, Node.js, Python, Smart Contracts]
+values: [5, 5, 5, 4, 4]
 ---
 #icon-1
-  :icon{.w-full.h-full name="vscode-icons:file-type-typescript-official"}
+  :icon{.w-full.h-full name="logos:typescript-icon"}
 
 #icon-2
-  :icon{.w-full.h-full name="vscode-icons:file-type-python"}
+  :icon{.w-2/3.h-auto.mt-[20%] name="vscode-icons:file-type-html"}
+  :icon{.w-2/3.h-auto.ml-[20%].-mt-[40%] name="vscode-icons:file-type-css"}
 
 #icon-3
-  :icon{.w-full.h-full name="vscode-icons:file-type-kotlin"}
+  :icon{.w-full.h-full name="logos:nodejs-icon-alt"}
 
 #icon-4
-  :icon{.w-full.h-full name="vscode-icons:file-type-csharp2"}
+  :icon{.w-full.h-full name="vscode-icons:file-type-python"}
 
 #icon-5
-  :icon{.w-2/3.h-auto.mt-[20%] name="vscode-icons:file-type-html"}
-  :icon{.w-2/3.h-auto.ml-[20%].-mt-[40%] name="vscode-icons:file-type-css"}
+  :icon{.w-full.h-full name="skill-icons:solidity"}
 ::
 
 ::d-card

apps/d0rich.me/content/homepage/skills/3.Engineering.md

@@ -0,0 +1,35 @@
+::d-stats{.w-96}
+---
+titles: [Data Modeling, Integration, Microservices, Event-Driven, DApps]
+values: [5, 5, 5, 4, 4]
+---
+#icon-1
+  :icon{.w-full.h-full name="streamline:industry-innovation-and-infrastructure-solid"}
+
+#icon-2
+  :icon{.w-full.h-full name="carbon:api"}
+
+#icon-3
+  :icon{.w-full.h-full name="carbon:microservices-1"}
+
+#icon-4
+  :icon{.w-full.h-full name="skill-icons:kafka"}
+
+#icon-5
+  :icon{.w-full.h-full name="eos-icons:blockchain"}
+::
+
+::d-card
+---
+mode: homepage-skills
+---
+  :d-card-title[Engineering]
+
+  My knowledge of Microservices and Dapps enables me to design and develop **distributed systems** that are highly scalable.
+
+  With event-driven approach I enable the development of responsive and scalable applications through asynchronous communication and real-time data processing.
+
+  By utilizing Design patterns, I am able to apply **best practices** and proven solutions to common design problems, resulting in efficient and maintainable code. 
+
+  With these skills, I can deliver high-quality solutions that are secure, scalable, and easy to maintain.
+::