feat: add whats im doing section

doroudi · Dec 30, 2023 · 32d883a · 32d883a
1 parent 30b85e1
commit 32d883a
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 11 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -14,5 +14,6 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollButton: typeof import('./components/ScrollButton.vue')['default']
+    WorkInfo: typeof import('./components/WorkInfo.vue')['default']
   }
 }
diff --git a/src/components/AboutMe.vue b/src/components/AboutMe.vue
@@ -1,12 +1,17 @@
 <script setup>
-
+const works = [
+  { title: 'Web Development', icon: '', description: 'Web Development' },
+  { title: '.Net Development', icon: '', description: '.Net Platform' },
+  { title: 'System Design', icon: '', description: '' },
+  { title: 'Mobile Development', icon: '', description: '' },
+]
 </script>
 
 <template>
   <section class="section content p-6 md:p-8">
     <div class="mx-auto container">
       <div class="flex flex-col pt-4 md:flex-row md:pt-10">
-        <div class="author-image w-full flex items-center justify-center p-4 md:w-1/5">
+        <div class="author-image w-full flex items-start justify-center p-4 md:w-1/5">
           <img src="@/assets/images/profile.jpg" alt="سعید درودی saeid doroudi">
         </div>
         <div>
@@ -18,26 +23,39 @@
           </h2>
           <p class="py-3 text-justify">
             Full Stack Software developer with more than 15 yrs of experience in software industry.<br>
-            Developing Web and service based solutions (specially based on ASP.Net and Web Api) for more than a decade. <br>
-            Loving implement UI and client side applications and SPA solutions in JavaScript ecosystem and specially in Vue<br>
+            Developing Web and service based solutions (specially based on ASP.Net and Web Api) for more than a decade.
+            <br>
+            Loving implement UI and client side applications and SPA solutions in JavaScript ecosystem and specially in
+            Vue<br>
             Educated Software architecture and System Designer with hands on experience in various businesses.
           </p>
 
           <div class="my-4">
-            <a href="/uploads/Saeid_Doroudi_Resume.pdf" class="mx-1 border-2 border-green-600 rounded-full bg-transparent p-3 text-sm font-semibold text-green-600 transition duration-300 hover:(border-transparent bg-green-600 text-white) focus:(outline-none ring-2 ring-offset-2 ring-green-600)">
+            <a
+              href="/uploads/Saeid_Doroudi_Resume.pdf"
+              class="mx-1 border-2 border-green-600 rounded-full bg-transparent p-3 text-sm font-semibold text-green-600 transition duration-300 hover:(border-transparent bg-green-600 text-white) focus:(outline-none ring-2 ring-offset-2 ring-green-600)"
+            >
               Download Resume
             </a>
-            <a href="tel:+989144786806" class="mx-1 border-2 border-gray-200 rounded-full p-3 text-sm font-semibold text-gray-600 transition duration-300 hover:(border-transparent bg-gray-400 text-white) focus:(outline-none ring-2 ring-offset-2 ring-gray-600)">
+            <a
+              href="tel:+989144786806"
+              class="mx-1 border-2 border-gray-200 rounded-full p-3 text-sm font-semibold text-gray-600 transition duration-300 hover:(border-transparent bg-gray-400 text-white) focus:(outline-none ring-2 ring-offset-2 ring-gray-600)"
+            >
               Contact
             </a>
           </div>
+
+          <div class="pb-3 pt-10">
+            <h3 class="bubble">
+              What I'm Doing
+            </h3>
+
+            <div class="grid grid-cols-2 gap-4">
+              <WorkInfo v-for="(item, i) of works" v-bind="item" :key="i" />
+            </div>
+          </div>
         </div>
       </div>
-      <div class="my-3">
-        <h3 class="bubble">
-          What I'm Doing
-        </h3>
-      </div>
     </div>
   </section>
 </template>

diff --git a/src/components/WorkInfo.vue b/src/components/WorkInfo.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  description: string
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="work-info flex flex-col py-6">
+    <h3 class="title mb-4 font-bold font-mono">
+      {{ title }}
+    </h3>
+    <p>{{ description }}</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    color: #000;
+    position: relative;
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: -4px;
+        left: 0;
+        height: 4px;
+        width: 45px;
+        background: #d2e1d2;
+
+    }
+}
+</style>