feat(blog): enhance content styling and add new blog post with sharing capabilities

- Refine blog typography with optimized font sizes and line heights for better readability
- Adjust heading margins and sizes (h1-h4) for improved visual hierarchy
- Implement custom bullet styling with primary color indicators for lists
- Add highlighted key phrases styling with left border accent for emphasized content
- Create new BlogShare component for social sharing functionality
- Add Callout and PullQuote content components for enhanced blog formatting
- Introduce resume-button.css for improved button styling
- Update blog post template with slug-based routing support
- Add new blog post "Career Change: From Huawei to Frontend" in English and Persian
- Enhance portfolio components (Hero, Skills, AIStack, etc.) with refined styling
- Improve RTL language support with better spacing and alignment for Persian content
- Add blog hero image asset (big-career-change.webp)
- Update i18n translations for new blog content and UI improvements
- Optimize code block and inline code styling with CSS variables for consistency
- Refine blockquote styling with better contrast and spacing

app/components/content/Callout.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const props = defineProps<{
+  type?: 'info' | 'warning' | 'success' | 'tip' | 'primary'
+  title?: string
+}>()
+
+const typeConfig = {
+  primary: {
+    icon: 'i-heroicons-light-bulb',
+    color: 'primary',
+    bgClass: 'bg-primary-50 dark:bg-primary-950/30 border-primary-200 dark:border-primary-800'
+  },
+  info: {
+    icon: 'i-heroicons-information-circle',
+    color: 'blue',
+    bgClass: 'bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800'
+  },
+  warning: {
+    icon: 'i-heroicons-exclamation-triangle',
+    color: 'yellow',
+    bgClass: 'bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 dark:border-yellow-800'
+  },
+  success: {
+    icon: 'i-heroicons-check-circle',
+    color: 'green',
+    bgClass: 'bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800'
+  },
+  tip: {
+    icon: 'i-heroicons-light-bulb',
+    color: 'purple',
+    bgClass: 'bg-purple-50 dark:bg-purple-950/30 border-purple-200 dark:border-purple-800'
+  }
+}
+
+const config = typeConfig[props.type || 'info']
+</script>
+
+<template>
+  <div :class="['callout-box', config.bgClass]" class="my-6 p-5 rounded-lg border-2 shadow-sm">
+    <div class="flex items-start gap-3">
+      <UIcon :name="config.icon" class="w-5 h-5 flex-shrink-0 mt-0.5"
+        :class="`text-${config.color}-600 dark:text-${config.color}-400`" />
+      <div class="flex-1 min-w-0">
+        <div v-if="title" class="font-semibold text-base mb-1.5"
+          :class="`text-${config.color}-900 dark:text-${config.color}-100`">
+          {{ title }}
+        </div>
+        <div class="prose prose-sm dark:prose-invert max-w-none">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.callout-box {
+  transition: all 0.2s ease;
+}
+
+.callout-box:hover {
+  transform: translateY(-2px);
+  shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+</style>

app/components/content/PullQuote.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const props = defineProps<{
+  author?: string
+  highlight?: boolean
+}>()
+</script>
+
+<template>
+  <div class="pull-quote my-8 relative">
+    <div :class="[
+      'relative p-6 rounded-lg',
+      highlight
+        ? 'bg-gradient-to-br from-primary-50 to-primary-100 dark:from-primary-950/40 dark:to-primary-900/40 border-2 border-primary-200 dark:border-primary-800'
+        : 'bg-gray-50 dark:bg-gray-900/50 border-l-4 border-primary-500 dark:border-primary-400'
+    ]">
+      <!-- Quote Icon -->
+      <div class="absolute top-4 left-4 opacity-10 dark:opacity-5">
+        <UIcon name="i-heroicons-chat-bubble-left-right" class="w-16 h-16 text-primary-600" />
+      </div>
+
+      <!-- Content -->
+      <div class="relative z-10">
+        <blockquote class="text-lg md:text-xl font-medium leading-relaxed text-gray-900 dark:text-gray-100 italic">
+          <slot />
+        </blockquote>
+
+        <!-- Author -->
+        <div v-if="author" class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+          <cite class="text-sm font-semibold text-primary-600 dark:text-primary-400 not-italic">
+            — {{ author }}
+          </cite>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pull-quote {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>