Initial Commit

components/Resume/Projects.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="wrapper-small my-5">
+      <div class='grid grid-cols-1 md:grid-cols-2 gap-6'>
+        <a
+          v-for='(project, index) in projects'
+          :key='index'
+          :href='project.html_url'
+          class='block bg-gray-50 dark:bg-gray-800 p-6 shadow rounded-lg mt-2 lg:mt-0'
+          rel="noreferrer"
+          target='_blank'
+        >
+          <div>
+            <h3 class='text-lg font-medium text-gray-800 dark:text-gray-100'>
+              {{ project.name }}
+            </h3>
+            <p class='my-2 text-base text-gray-500 dark:text-gray-400'>
+              {{ project.description }}
+            </p>
+            <ul class='flex items-center space-x-4 text-black dark:text-gray-200'>
+              <li class='inline-flex items-center'>
+                <IconStar class="h-4 w-4 mr-1"/>
+                <span>{{ project.stargazers_count }}</span>
+              </li>
+              <li v-if='project.forks' class='inline-flex items-center'>
+                <IconFork class="h-4 w-4 mr-1"/>
+                <span>{{ project.forks }}</span>
+              </li>
+            </ul>
+          </div>
+        </a>
+        <div class='flex items-center justify-center'>
+          <a
+            class='bg-black w-full md:w-auto flex items-center justify-center px-10 md:px-24 py-3 shadow-md hover:bg-gray-800 rounded-lg text-white'
+            href='https://github.com/aymaneMx'
+            rel="noreferrer"
+            target='_blank'
+          >
+            <IconGithub class="text-white h-6 w-6 mr-3"/>
+            See More Projects
+          </a>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    projects: {
+      type: Array,
+      default() {return []}
+    }
+  }
+}
+</script>

components/Resume/Technologies.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="grid grid-cols-2 gap-2 mt-4 sm:grid-cols-3 md:grid-cols-4">
+    <ResumeTechnologyCard
+      v-for="(technology, index) in technologies"
+      :key="`skill-${index}`"
+      :title="technology"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      technologies: [
+        "JavaScript",
+        "HTML5",
+        "Nuxt.js",
+        "Vue.js",
+        "Tailwind CSS",
+        "Node.js",
+        "TypeScript",
+        "Sass",
+        "Figma",
+        "WordPress",
+        "PHP",
+        "React.js",
+      ]
+    }
+  }
+}
+</script>

components/Resume/TechnologyCard.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    class="flex items-center space-x-2 overflow-hidden text-gray-900 dark:text-gray-100"
+  >
+    <icon :name="getIconName" class="flex-shrink-0 w-7 h-7" />
+    <span class="truncate">{{ title }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+      default: "",
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    /**
+     * Returns possible icon name if icon prop is not passed.
+     * @returns {string}
+     */
+    getIconName() {
+      if (this.icon) return this.icon
+      else
+        return (
+          this.title?.toLowerCase()?.replace(/[^a-zA-Z]/g, "") || "arrow-right"
+        )
+    },
+  },
+}
+</script>