Add Skills, Icons

src/components/Skills.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex space-x-2 w-full p-3 items-center bg-gray-300 rounded-xl dark:(bg-gray-800 text-gray-100)">
+    <icon :name="getIconName" class="w-10 h-10" />
+    <h1>{{ skill }}</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    skill: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    getIconName() {
+      if (this.icon) return this.icon;
+      else
+        return (
+          this.skill?.toLowerCase()?.replace(/[^a-zA-Z]/g, "")
+        );
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/pages/index.vue

@@ -2,12 +2,26 @@
   <div class="grid justify-items-center dark:bg-gray-900">
     <Navbar />
     <AboutMe />
+    <section id="skills" class="grid w-8/12 justify-items-center">
+      <h2 class="mt-10 text-xl font-semibold text-gray-900 dark:text-gray-100">
+        My Skills
+      </h2>
+      <div class="grid grid-cols-5 skills mt-4 gap-2">
+        <Skills
+          v-for="(skill, index) in skills"
+          :key="`skill-${index}`"
+          :skill="skill"
+        />
+      </div>
+    </section>
     <section class="grid justify-items-center w-10/12" id="projects">
       <h2 class="mt-10 text-xl font-semibold text-gray-900 dark:text-gray-100">
         My Projects
       </h2>
       <div class="mx-2 grid gap-2 mt-4">
-        <div class="grid gap-4 w-full justify-items-center sm:grid-cols-3 projects">
+        <div
+          class="grid gap-4 w-full justify-items-center sm:grid-cols-3 projects"
+        >
           <ProjectCard
             v-for="(project, index) in getProjects.featured"
             :key="`project-featured-${index}`"
@@ -70,6 +84,18 @@ export default {
           link: "/",
         },
       ],
+      skills: [
+        "Vue.js",
+        "Javascript",
+        "C#",
+        "Nuxt.js",
+        "WindiCSS",
+        "Node.js",
+        "Sass",
+        "Dotnet",
+        "Github",
+        "Figma",
+      ],
     };
   },
   computed: {
@@ -91,5 +117,8 @@ html {
   .projects {
     @apply sm:grid-cols-2;
   }
+  .skills {
+    @apply sm:grid-cols-3;
+  }
 }
 </style>